forEach 메소드
배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드이다. forEach 메소드는 첫 번째 아규먼트로 콜백 함수를 전달받는데, 콜백 함수의 파라미터에는 각각 배열의 요소, index, 메소드를 호출한 배열이 전달된다. (index와 array는 생략가능, 파라미터 하나는 반드시 작성되어야 하는데 배열의 요소는 반드시 작성해야한다.)
const numbers = [1, 2, 3];
numbers.forEach((element, index, array) => {
console.log(element); // 순서대로 콘솔에 1, 2, 3이 한 줄씩 출력된다.
});//for...of 문과 비교해보기
const members = ['지철', '동욱', '요셉', '민지'];
//for...of문
for (let member of members) {
console.log(`${member}님이 입장하셨습니다.`);
};
//forEach문
members.forEach(function (member) {
console.log(`${member}님이 입장하셨습니다.`);
});
//forEach문 화살표함수로 반환하기
members.forEach((member) => {
console.log(`${member}님이 입장하셨습니다.`);
});
//출력되는 값은 모두 같다
지철님이 입장하셨습니다.
동욱님이 입장하셨습니다.
요셉님이 입장하셨습니다.
민지님이 입장하셨습니다.forEach문에 작성된 function (member)에서 member 파라미터는 for...of 문의 let member of members에 member 변수와 역할이 같다.
//인덱스 활용하기
const firstNames = ['범수', '얼', '효신', '수'];
const lastNames = ['김', '나', '박', '이'];
//다른 배열과 함께 활용할 때 같은 인덱스의 요소를 매칭할 수 있다.
firstNames.forEach((firstName, i, arr) => {
console.log(`${lastNames[i]${firstName}님이 입장하셨습니다.}`);
//배열 활용하기
console.log(arr);
});
//출력되는값
김범수님이 입장하셨습니다.
['범수', '얼', '효신', '수']
나얼님이 입장하셨습니다.
['범수', '얼', '효신', '수']
박효신님이 입장하셨습니다.
['범수', '얼', '효신', '수']
이수님이 입장하셨습니다.
['범수', '얼', '효신', '수'] //forEach 메소드를 호출한 배열이 전달된 모습+ 변수에 담지않고 배열값 자체에 forEach 메소드를 활용하는 경우도 있다. 상황에 따라서 콜백 함수 내에서 해당 배열이 필요할 때 활용 가능하다. (firstNames.forEach => ['범수', '얼', '효신', '수'].forEach)
Map 메소드
forEach와 비슷하게 배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드이다. 단, 첫 번째 아규먼트로 전달하는 콜백 함수가 매번 리턴하는 값들을 모아서 새로운 배열을 만들어 리턴하는 특징이 있다.
const numbers = [1, 2, 3];
const twiceNumbers = numbers.map((element, index, array) => {
return element * 2;
});
console.log(twiceNumbers); // (3) [2, 4, 6]//forEach문 대신 map 사용해보기
const firstNames = ['범수', '얼', '효신', '수'];
const lastNames = ['김', '나', '박', '이'];
firstNames.map((firstName, i, arr) => {
console.log(`${lastNames[i]${firstName}님이 입장하셨습니다.}`);
console.log(arr);
});
//출력되는값
김범수님이 입장하셨습니다.
['범수', '얼', '효신', '수']
나얼님이 입장하셨습니다.
['범수', '얼', '효신', '수']
박효신님이 입장하셨습니다.
['범수', '얼', '효신', '수']
이수님이 입장하셨습니다.
['범수', '얼', '효신', '수']map 메소드는 콜백함수 내에서 리턴문을 작성하게되면 각각의 리턴값으로 구성된 새로운 배열이 결과로 리턴된다.
const firstNames = ['범수', '얼', '효신', '수'];
const lastNames = ['김', '나', '박', '이'];
firstNames.map((firstName, i) => {
return lastNames[i] + firstName;
});
//그래서 이 메소드에 호출한 결과를 변수에 담아서 콘솔에 출력해보면
const fullNames = firstNames.map((firstName, i) => {
return lastNames[i] + firstName;
});
//arrow function으로 변환했을 때(더욱 간결한 작성)
//const fullNames = firstNames.map((firstName, i) => lastNames[i] + firstName);
console.log(fullNames);
//결과값
(4) ["김범수", "나얼", "박효신", "이수"]
//작성한 콜백 함수의 리턴값들로 구성된 배열이 출력된다.forEach 메소드는 리턴값이 없기 때문에 변수에 담았을 땐 항상 undefined 값을 갖는다.
const fullNames = firstNames.map((firstName, i) => lastNames[i] + firstName);
console.log(fullNames);
//출력
undefined단순히 배열의 반복작업이 필요할 땐 forEach를, 반복 작업을 통해서 새로운 배열이 필요한 경우엔 map 메소드를 활용한다.
+ 두 메소드의 최대 반복 횟수는 메소드를 처음 호출할 때 그 당시 요소의 개수이다. forEach나 map 메소드는 콜백 함수 내부에서 반복중인 배열을 편집할 수도 있다. 매번 반복할 때마다 배열의 새로운 요소를 추가하게 되면 무한루프에 빠질 거라고 예상할 수도 있지만 실제로 동작해보면 배열의 요소 갯수만큼만 동작하고 끝난 모습을 확인 할 수 있다.
const members = ['나래', '가영', '종윤', '세영'];
members.forEach((member) => {
console.log(`${member}님이 입장하셨습니다.`);
members.push('김태호');
});
console.log(members);
//출력되는 값
나래님이 입장하셨습니다.
가영님이 입장하셨습니다.
종윤님이 입장하셨습니다.
세영님이 입장하셨습니다.
(8) ["나래", "가영", "종윤", "세영", "김태호", "김태호", "김태호", "김태호"]반복 중에 배열의 길이가 줄어든다면 반복 횟수도 함께 줄어든다.
const members = ['나래', '가영', '종윤', '세영'];
members.forEach((member) => {
console.log(`${member}님이 입장하셨습니다.`);
members.pop();
});
console.log(members);
//출력되는 값
나래님이 입장하셨습니다.
가영님이 입장하셨습니다.
(2) ["나래", "가영"]'코린이 개념잡기 > JavaScript' 카테고리의 다른 글
| 배열 메소드 Ⅲ (some, every) (0) | 2024.12.19 |
|---|---|
| 배열 메소드 Ⅱ (filter, find) (0) | 2024.12.19 |
| 에러와 에러 객체 (1) | 2024.12.18 |
| 구조 분해 Destructuring (0) | 2024.12.17 |
| 모던한 프로퍼티 표기법 (1) | 2024.12.17 |
