[자바스크립트 js] 배열 메소드 forEach / map

  forEach

• 배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드.
• 단순히 배열의 반복작업이 필요할 때 사용한다.
• 첫번째 아규먼트로 콜백함수를 전달 받는다.
• 콜백함수의 파라미터에는 각각 배열의 요소, index, 메소드를 호출한 배열이 전달된다. (index와 array는 생략 가능)

const numbers = [1, 2, 3];

numbers.forEach((element, index, array) => {
  console.log(element); // 순서대로 콘솔에 1, 2, 3이 한 줄씩 출력됨.
});

const members = ['뚝딱', '두올다', '아캔', '캔두'];


// for of문
for (let member of members0 {
	console.log(`${member}님이 인사합니다.`);
}



// forEach문
// 첫번째 파라미터에 배열의 요소를 담아준다. = member
members.forEach(function (member) { // 콜백함수
	console.log(`${member}님이 인사합니다.`);
});

// arrow function으로 작성하면,
members.forEach((member) => {
	console.log(`${member}님이 인사합니다.`);
});

// 인덱스를 관리할 수도 있다. 두번째 파라미터에 index 혹은 i
// 1번 예시
members.forEach((member, i) => {
	console.log(`${1} ${member}님이 인사합니다.`);
});

// 2번 예시 : 다른 배열과 함께 활용할 때 같은 인덱스의 값을 매칭 가능하다.
const firstNames = ['뚝딱', '두올다', '아캔', '캔두'];
const lastNames = ['안', '강', '최', '김'];

firstNames.forEach((firstName, i) => {
	console.log(`${lastNames[i]}${firstName}님이 인사합니다.`);
});


// 반복적인 배열 자체를 전달할 수 있다. 세번째 파라미터에 arr
// 변수에 담긴 배열의 경우, 변수 이름을 그대로 사용하면 되기 때문에 일반적으로 잘 사용하지 않는다.
const firstNames = ['뚝딱', '두올다', '아캔', '캔두'];
const lastNames = ['안', '강', '최', '김'];

firstNames.forEach((firstName, i, arr) => {
	console.log(`${lastNames[i]}${firstName}님이 인사합니다.`);
    console.log(arr);
});

// 변수에 담지 않고 forEach문을 활용할 경우,
['뚝딱', '두올다', '아캔', '캔두'].forEach((firstName, i, arr) => {
	console.log(`${lastNames[i]}${firstName}님이 인사합니다.`);
    console.log(arr);
});

 

 

 

  map

• forEach와 비슷하게 배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드.
• 첫번째 아규먼트로 전달하는 콜백함수가 매번 리턴하는 값들을 모아서 새로운 배열을 만들어 리턴한다.
• 반복 작업을 통해서 새로운 배열이 필요한 경우에 사용한다.

const numbers = [1, 2, 3];
const twiceNumbers = numbers.map((element, index, array) => {
  return element * 2;
});

console.log(twiceNumbers); // (3) [2, 4, 6]

const firstNames = ['뚝딱', '두올다', '아캔', '캔두'];
const lastNames = ['안', '강', '최', '김'];

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

// 콜백함수 내에서 return문을 작성하게 되면,
// 각각의 리턴값으로 구성된 새로운 배열이 메소드의 결과로 리턴된다.


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


// 위 코드를 좀 더 간결하게
const fullNames = firstNames.map((firstName, i) => lastNames[i] + firstName);


console.log(fullNames);

// 결과
// 배열이 보여진다.
// (4) [ "안뚝딱", "강두올다", "최아캔", "김캔두" ]

 

 

 

  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) ["뚝딱", "두올다"]