[🍦] 배열 메소드(1) - forEach는 결국 for문이다!

우선,

for문이란?

한마디로 반복문이다.

변수를 할당하여 조건에 따라 작성한 코드를 하나하나 반복하여 실행한다.

const a = [1, 2, 3]

for(let i = 0; i < a.length; i++){
	console.log(a[i] + 1)
}

결과 =>
2
3
4

 

위와 같은 것이 for문의 기본적인 형식으로 대부분 ()안의 내용이 비슷하다.

매번 이 조건을 작성하는 것은 비효율적이기 때문에 forEach를 활용한다.

 

그렇다면,

forEach 반복문이란?

앞서 본 for문이랑 비슷하지만 조건과 인덱스 작성 등이 필요 없다.

 

📍기본 형식

 

1. 배열 뒤에 점(.)을 찍고 forEach 함수를 실행한다.

배열.forEach();

 

2. forEach의 파라미터 (괄호 안)에 콜백함수를 작성한다.

    콜백함수란? 함수의 파라미터에 들어가는 함수

배열.forEach(() => {});

// 혹은 

배열.forEach(function () {
	
});

 

3. 콜백 함수에 파라미터를 넣고, 파라미터를 활용한다.

   콜백함수의 파라미터에 요소가 순서대로 하나씩 들어간다.

배열.forEach((배열내의_요소) => {
	console.log(배열내의_요소)
})

 

 

 

📍연습 하기

 

문제 1.

다음의 배열 내의 요소를 순서대로 출력해보세요. (for문과 비교해보세요.)

const numbers = [1, 2, 3];

정답

// forEach로 작성
numbers.forEach((number) => {
  console.log(number);
});

// for문으로 작성
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

 

문제 2.

forEach를 사용하여 다음의 배열 내의 요소에 1을 더한 값을 출력해보세요.

const numbers = [1, 2, 3];

/* 예상 결과
	 2
	 3
	 4
*/

정답

numbers.forEach((number) => {
  console.log(number + 1);
});

 

문제 3.

forEach를 사용하여 다음의 배열 내의 요소에 튜터라는 문자열을 붙여 출력해보세요.

const tutors = ["최원장", "김병연", "윤창식"];

/* 예상 결과
	 "최원장 튜터"
	 "김병연 튜터"
	 "윤창식 튜터"
*/

정답

tutors.forEach((tutor) => {
  console.log(`${tutor} 튜터`);
});

 

문제 4.

forEach를 사용하여 다음의 배열 내의 요소에 나이를 순서대로 출력해보세요.

const tutors = [
  {
    name: "최원장",
    age: 20,
  },
  {
    name: "김병연",
    age: 21,
  },
  {
    name: "윤창식",
    age: 22,
  },
];

/* 예상 결과
	 20
	 21
	 22
*/

정답

tutors.forEach((tutor) => {
  console.log(tutor.age);
});

 

추가 자료

const products = [
  {
    브랜드: "수아레",
    상품명: "케이블 카라 반팔 니트 - 6 Color",
    가격: 39900,
    평점: 5,
    후기개수: 2997,
    좋아요수: 31352,
  },
  {
    브랜드: "커버낫",
    상품명: "에센셜 어쩌고",
    가격: 34300,
    평점: 5,
    후기개수: 45021,
    좋아요수: 156057,
  },
];

products.forEach((product) => {
  document.querySelector(".product-list").innerHTML += `
    <div class="product">
			<h2>${product.상품명}</h2>
			<h3>${product.브랜드}</h3>
			<p>가격: ${product.가격}</p>
		</div>
  `;
});