TIL 021_JavaScript Array.map()

🎯 map()다시 보기 퀴즈

다음의 문제의 결과를 맞춰보자. 틀렸다면 map()을 다시 공부할 때이다.

문제1.

const arr = [ {name: "Alice"},  {age: "100"}]
const quiz1 = arr.map(item => item.name = "천재")

console.log(arr, quiz1)의 결과는?

console.log(arr) // [{ name: '천재' }, { age: '100', name: '천재' }]
console.log(quiz1) // [ '천재', '천재' ]

• quiz1에 의해 원래 배열인 arr의 변형이 일어났다.
• quiz1의 결과 주목! map은 결국엔 배열을 뱉어낸다. 이 경우, 배열 안의 요소 수만큼 "천재"가 담긴 배열이 탄생하였다.

문제2.

const arr = [ {name: "Alice"},  {age: "100"}]
const quiz2 = arr.map(item => {item.name = "천재"})

console.log(arr, quiz2)의 결과는?

console.log(arr) // [{name: "Alice"},  {age: "100"}]
console.log(quiz2) // [ undefined, undefined ]

• 원래 배열에는 변형이 없지만, 아무것도 뱉어내지 못한 quiz2는 undefined을 요소를 가지게 되었다.

문제3.

const arr = [ {name: "Alice"},  {age: "100"}]
const quiz3 = arr.map(item=> {return {...item, name:"천재"}})

console.log(arr, quiz3)의 결과는?

console.log(arr)// [{ name: "Alice" },  { age: "100" }]
console.log(quiz3)// [{ name: '천재' }, { age: '100', name: '천재' }]

• 원래 함수에 변형이 없고, 새로운 배열은 원래 배열을 참고하여 완전히 다른 배열로 만들어져 졌다.

map() 중요 포인트

• map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

• map() 메서드는 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만든다.

• map() 메서드는 호출한 배열의 값을 변형하지 않는다. 하지만 callback 함수에 의해서 변형될 수는 있다.

• map이 처리할 요소의 범위는 첫 callback을 호출하기 전에 정해지기 때문에 map이 시작한 이후 배열에 추가되는 요소들은 callback을 호출하지 않는다.

배열 속 객체 재구성하기

let array = [{key: 1, value: 10}, {key: 2, value: 20}, {key: 3, value: 30}]

array.map(obj => {
    let newArr = {};
    newArr[obj.key] = obj.value;
    
	return newArr;
})


console.log(array) // same as the beginning
console.log(newArr) //  [{1: 10}, {2: 20}, {3: 30}]

숫자문자열을 인자로 가지는 배열에서 숫자를 가진 배열로 바꾸기

const numStr = ['1', '2', '3'];
numStr.map(str => parseInt(str); //[1,2,3] 
           
           or
           
numStr.map(Number) // [1,2,3]

💭What I learned from this..

리액트에서는 map() 메서드가 다양하게 사용된다.
JSX를 반복하여 생성하기 위해서도 많이 사용하지만 로직을 위해서도 정말 많이 사용된다.

오늘 싸이트 클론 중 문득 새삼 갑자기 이 함수가 헷갈려 정리해본다.