map()
배열의 메소드 중 자주 사용되는 메소드인 map() 메소드에 대해서 알아보겠습니다.
우선 map() 메소드는 배열을 반복하기 위해 사용합니다.
callback 함수에서 리턴한 값으로 리턴 된 매 요소를 수정해 줍니다.
map() 메소드의 return된 값은 수정된 값으로 다시 생성된 배열입니다.
map() 메소드를 사용해서 제곱을 하는 방법을 설명해드리겠습니다.
const nums = [1,2,3,4,5,6];
const output = nums.map(element => element
* element)
-> element 는 매개변수입니다.
===
const output = nums.map(function(element) {
return element * element
})
console.log(nums) // [1,2,3,4,5,6]
console.log(output) // [1,4,9,16,25,36]
좀 더 이해를 돕기위해 예제 하나 더 적어보겠습니다.
map()메소드는 매개변수로 (요소,인덱스,배열) 3가지를 받을 수 있는 콜백함수를 받고, 요소는 각 배열의 요소 값입니다.
ex ) nums.map(element,index.array) => {
console.log(element)
console.log(index)
}
forEach()
forEach() 메소드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.
라고 mdn에 적혀있는데 무슨 말인지 모르겠다.
우선 배열의 반복문으로 사용을 하는 메소드이고
배열에서만 사용가능하다. 또한 배열의 처음부터 마지막 요소까지 순회하기 때문에 length는 따로 필요없다.
인자로 콜백 함수가 들어오고 주어진 콜백함수는 인자를 요소,인덱스,배열 이렇게 3개를 받을 수가 있다.
forEach() 메소드 자체가 return 하는 값이 아무것도 없다는게 map()메소드와 큰 차이입니다.
map()메소드는 요소가 수정된 배열이 return되고,
forEach() 는 아무것도 return 하지 않습니다.
그래서 forEach 로 전달되는 callback 함수에서도 return하는 것이 없습니다.
forEach 는 단지 for 문 대신 사용하는 반복 method 입니다.
-> 그렇다면 왜 for문 대신 forEach를 사용하지...?
글 보단 우리는 코드를 보는게 더 이해가 잘 되니 코드를 적어보겠습니다.
마지막에서 forEach()로 값을 추출해서 할당한 변수를 console.log()로 출력했을 때 undefined가 나온다.
