본문 바로가기

Javascript/이론+예제

배열함수 map()

map()

map.. 요놈은 누구일까?

반환한 값을 배열에 담아 반환해주는 함수이당!!

forEach() 와 다른 점은

  • forEach는 반환값이 없음.
  • map()은 반드시 배열을 반환함. 그래서 return을 적어야함.

그래서 map을 사용하는 예시를 한번 적어보겠습니댜.

let names = [
    "Steven Paul Jobs",
    "Bill Gates",
    "Mark Elliot Zuckerberg",
    "Elon Musk",
    "Jeff Bezos",
    "Warren Edward Buffett",
    "Larry Page",
    "Larry Ellison",
    "Tim Cook",
    "Lloyd Blankfein"
]



names.map((item) => {
    return item
})

이렇게 적으면 names들을 반환은 해주지만, 반환된 값이 어디에도 저장이 되지않아서 보이지 않아오..

그래서 map() 은 변수에 반환값을 저장할 때 사용하면 좋다규

이것이 forEach() 와 차이점이 아닐까?

응용을 해보쟈규!

let names = [
    "Steven Paul Jobs",
    "Bill Gates",
    "Mark Elliot Zuckerberg",
    "Elon Musk",
    "Jeff Bezos",
    "Warren Edward Buffett",
    "Larry Page",
    "Larry Ellison",
    "Tim Cook",
    "Lloyd Blankfein"
]



let namesMap = names.map((item) => {
    return item+"추가"
})

console.log(names)
console.log(namesMap)

요렇게 보면, names는 원래 names의 배열이 나오고, 

namesMap에는 원래 names에 있는 아이템 뒤에 "추가" 라는 글씨가 붙은 애들만 배열로 반환되어있는 것을 볼 수 있어!

결론은 원래 배열을 건들이지 않고 따로 작업한 결과물을 새로 배열로 저장해주는거지!

또 다른 예제로 응용을 해볼까?

let ceoList = [
    {name : "Larry Page", age : 23, ceo : true},
    {name : "Tim Cook", age : 40, ceo : true},
    {name : "Elon Musk", age : 55, ceo : false}
]

이 배열에서 나는 name만 불러와서 배열로 저장하고 시퍼~~ 하면 어떻게 해야할까?

let ceoList = [
    {name : "Larry Page", age : 23, ceo : true},
    {name : "Tim Cook", age : 40, ceo : true},
    {name : "Elon Musk", age : 55, ceo : false}
]

let result = ceoList.map((item) => {
    return item.name
})

console.log(result)

이렇게 item에서 name만 갖고와서 배열로 저장할 수가 있따.. 헐.. 완전 편리하쟈냐..ㅠㅠ

 

'Javascript > 이론+예제' 카테고리의 다른 글

배열 함수 every()  (0) 2022.10.20
배열함수 some()  (0) 2022.10.20
배열함수 filter()  (0) 2022.10.20
배열함수 forEach()  (0) 2022.10.20
ES6 자바스크립트 최신 문법 정리  (0) 2022.10.20