[Study/JavaScript] forEach / map

SoShy·2024년 1월 25일

JavaScript_Study

목록 보기

30/36

1. `forEach`

forEach method는 method를 호출할 때, argument로 콜백 함수를 작성하면, 콜백 함수의 첫 번째 파라미터로 배열의 요소를 순서대로 하나씩 전달하면서 매번 이 함수를 실행하는 원리로 동작한다.

때문에, 콜백 함수에는 반드시 하나 이상의 파라미터가 작성이 되어야 한다.

const members = ['영훈', '윤수', '동욱', '태호'];

for (let member of members) {
  console.log(`${member}님이 입장하셨습니다.`)
}

members.forEach(function (member) {
  console.log(`${member}님이 입장하셨습니다.`)
});

콜백 함수에 두 번째 파라미터를 전달해주면 요소의 index를 관리할 수 있다.

const members = ['영훈', '윤수', '동욱', '태호'];

for (let member of members) {
  console.log(`${member}님이 입장하셨습니다.`)
}

members.forEach((member, index) => {
  console.log(`${i} ${member}님이 입장하셨습니다.`)
});

추가적으로, 두 번째 파라미터를 전달해주는 방식은, 다른 배열과 함께 활용할 때, 같은 index의 요소를 매칭할 때도 응용이 가능하다.

const firstNames = ['영훈', '윤수', '동욱', '태호'];
const lastNames = ['강', '이', '손', '성'];

firstNames.forEach((firstName, i) => {
  console.log(`${lastNames[i]${firstName}님이 입장하셨습니다.}`)
});

콜백 함수에 세 번째 파라미터를 전달해주면, 반복 중인 배열 자체를 전달할 수 있다.

const firstNames = ['영훈', '윤수', '동욱', '태호'];
const lastNames = ['강', '이', '손', '성'];

firstNames.forEach((firstName, i, arr) => {
  console.log(`${lastNames[i]${firstName}님이 입장하셨습니다.}`);
  console.log(arr);
});
.
.
.
>>> 강영훈님이 입장하셨습니다.
	(4) ["영훈", "윤수", "동욱", "태호"]
	.
	.
	.

const firstNames = ['영훈', '윤수', '동욱', '태호'];
const lastNames = ['강', '이', '손', '성'];

['영훈', '윤수', '동욱', '태호'].forEach((firstName, i, arr) => {
  console.log(`${lastNames[i]${firstName}님이 입장하셨습니다.}`);
  console.log(arr);
});
.
.
.
>>> 강영훈님이 입장하셨습니다.
	(4) ["영훈", "윤수", "동욱", "태호"]
	.
	.
	.

2. `map`

forEach와 동작하는 방식이 거의 비슷하기 때문에, 위에서 봤던 코드에서 forEach 부분을 map으로 변경하면 동일한 결과가 나온다.

const firstNames = ['영훈', '윤수', '동욱', '태호'];
const lastNames = ['강', '이', '손', '성'];

['영훈', '윤수', '동욱', '태호'].map((firstName, i, arr) => {
  console.log(`${lastNames[i]${firstName}님이 입장하셨습니다.}`);
  console.log(arr);
});
.
.
.
>>> 강영훈님이 입장하셨습니다.
	(4) ["영훈", "윤수", "동욱", "태호"]
	.
	.
	.

다만, forEach와는 다르게, map은 method의 호출 결과로 새로운 배열을 리턴한다.

때문에, 아래와 같이, method를 호출한 결과를 변수에 담아서 콘솔에 출력해보면, map method를 호출할 때 작성한 콜백 함수의 리턴값들로 구성된 배열이 출력된다.

const firstNames = ['영훈', '윤수', '동욱', '태호'];
const lastNames = ['강', '이', '손', '성'];

const fullNames = firstNames.map((firstName, i) => {
  return lastNames[i] + firstName;
});

console.log(fullNames);
.
.
.
>>> (4) ["강영훈", "이윤수", "손동욱", "성태호"]