JavaScript | Array.map()

리액트를 배우고 구현하는 과정 중 많이 쓰인다는 array.map() 메서드를 정확히 공부하고 정리해보고자 한다

여기서 콜백함수는 3가지 인자를 전달 / this 값을 인자로 받을 수 있음

• currentElement : 현재 반환할 값
• Index(option) : 현재 해당하는 인덱스 번호
• Array(option) : 배열에 접근 가능
• this(option) : 사용할 this 키워드의 값

const nums = [1, 2, 3];
const newNums = nums.map(x => x*2)

console.log(newNums) // [2, 4, 6]

기존 배열의 값들을 돌려서 특정 값으로 변경

const objs = [
  {id: 1, name: '과자'},
  {id: 2, name: '스시'},
  {id: 3, name: '라면'}
]

const newObj = objs.map(obj => `${obj['id']}-${obj['name']}`)

console.log(newObj); // [ '1-과자', '2-스시', '3-라면' ]

배열 내 객체를 돌려서 문자열로 변경

map() 메서드는, 하나의 배열을 어떠하게 돌려서 다른 결과의 배열로 보여주는 것이다
(ㅜ_ㅜ map()의 정확한 기능은 아마 사용해나가는 과정에서 깨달아 나가지 않을까 싶다.. 아직은 애매하게 느껴지는 map() 자식!)

mdn 공식문서의 설명!👇🏻🧐

Array.map() 메소드는 콜백 함수를 이용해 각각의 요소에 호출해서 그 값을 변환할 수 있게 해준다.
다시 말하자면 콜백 함수는 배열의 각 요소에 실행되는 것!