자바스크립트 - 배열 메소드 .forEach .map
for... of 문 : 배열의 요소를 순회하면서 반복문 실행
이와 비슷하게 요소를 순회하는 메소드 .forEach 와 .map
const members = ['하나', '둘', ''셋];
for (let member of members) {
console.log(`${member}님이 입장하셨습니다.`);
}
members.forEach(function (member) {
console.log(`${member}님이 입장하셨습니다.`);
});
.forEach : 첫번째 파라미터로 콜백 함수를 받는다.
콜백 함수의 아규먼트로 요소 할당
members.forEach((member, index, arr) => {
console.log(`${index} : ${member}님이 입장하셨습니다.`);
});
arrow 함수로 작성도 가능하다 (function 지우고 화살표 =>)
const firstNames = ['이름', '네임', '성명'];
const lastNames = ['성', '김가네', '성씨'];
firstNames.forEach((firstNames, i) => {
console.log(`저의 이름은 ${lastNames[i]} ${firstNames} 입니다.`);
});
두번째 파라미터로 배열의 index를 받는다 (i로 쓰기도 함)
-> 이걸 이용해서 다른 배열에 인덱스로 접근해서 같이 출력할 수도 있다
['이름', '네임', '성명'].forEach((firstNames, i, arr) => {
console.log(`저의 이름은 ${lastNames[i]} ${firstNames} 입니다.`);
console.log(arr);
});
세번째 파라미터는 호출한 배열 그 자체 = arr, array
잘 사용하는 파라미터는 아니지만 변수가 아닌 배열 그 자체에 forEach 메소드를 사용한 경우 필요할 수 있다
위 코드에서 forEach를 .map 으로 바꿔도 똑같이 동작함
firstNames.map((firstNames, i) => {
return lastNames[i] + firstNames;
});
콜백함수 내에서 리턴문 작성하면
이 각각의 리턴값으로 구성된 새로운 배열이 이 메소드의 결과로 리턴
const fullNames = firstNames.map((firstNames, i) => {
return lastNames[i] + firstNames;
});
console.log(fullNames); //[ '성이름', '김가네네임', '성씨성명' ]
forEach는 리턴값이 없어서 변수에 담아도 undefined로 출력됨 => 배열의 반복 작업이 필요한 경우 사용
arrow 함수로 더 간결하게 표현 가능
const fullNames = firstNames.map((firstNames, i) => lastNames[i] + firstNames);
forEach, map 두 메소드의 최대 반복 횟수는 최초 호출 시점의 배열 요소의 개수이다.
반복할때 마다 요소가 추가하는 동작 : 최초 요소 개수만큼 호출됨 (무한x)
요소가 감소하는 반복문 : 반복횟수도 함께 줄어든다
forEach에서 return이나 break 를 사용해도
forEach문이 종료되는 것이 아니라 다음 index로 넘어가게 된다