자바스크립트 map(), Map() 차이와 사용 예제 및 정의

오늘 공부는 javascript map()과 Map()를 구분해보고 사용예제를 정리해볼려고 한다.

부트캠프를 진행하면서 강사님 강의를 통해 분명 배운거 같지만 진도를 따라가다보니 기억이 가물가물하다..

핑계지만 이번 기회에 다시 복습하고자 한다!!

 

map()

• 반복문과 유사하지만 주로 배열의 변환을 목적으로 사용하는 함수!!
• 고차 함수 = 함수를 인자로 전달 받거나 함수를 결과로 반환하는 함수
• 배열을 순회해서 각 요소를 콜백 함수로 적용해서 처리해 모은 새로운 배열을 반환하기 위한 함수
• 함수에 전달되는 콜백 함수는 "각 요소를 변환하여 새로운 배열로 매핑(mapping)하는 역할을 한다"라고 말하고
  이렇게 매핑된 결과를 새로운 배열로 반환하기 때문에 이 함수의 이름이 "map"으로 정해졌다 한다

 

일반 배열 함수 일때

const numbers = [1, 2, 3, 4];

//number를 반복
// case 1 - 화살표 함수 이용

const squredNumbers2 = numbers.map((number) => number * 2);
console.log(squredNumbers2);
결과

// case 2 - 화살표 함수 이용

const squredNumbers = numbers.map(num => num * 2);
console.log(squredNumbers);
결과

위에 차이점은 보다보면 1. map((number)), 2. map(num) 왜 다르냐는 것이다.

1. number과 num은 매개변수라고 한다. 그말은 어떤 단어로 적어도 작동한다는 것이고 단지 매개변수명으로 map이 무엇을 변환할려는지 알기 쉽게 해주면 좋다고 한다.

2.number은 ()가 쳐져 있고 num은 ()가 없다 매개변수가 1개 일 경우는 ()을 생략이 가능하다! 물론 () 안에 매개변수를 넣어도 똑같이 작동한다. 2개 이상 매개변수가 있다면 ()가 꼭 있어야된다!!

차이점을 보면서 의미를 알고 왜 그렇게 쓰이는지 알고나니 더 기억에 남고 공부가 된다.
그러다 실무에서 작업을 하게 될때 ()가 매개변수가 1개여도 써도 되고 2개 일땐 필수라면 일관성 있게
내가 작업할때 무조건 () 감싸주는게 좋지 않을까란 생각을 해봤다!!

객체 배열을 사용 할때

const users = [
{firstName : "Susan", lastName: "Steward"},
{firstName : "Daniel", lastName: "Longbottom"},
{firstName : "Jacob", lastName: "Black"}
];

const fullNameUsers = users.map(name => `${name.firstName} ${name.lastName}`)

console.log(fullNameUsers);

결과 값

 

 

위에 객체 배열을 이용한 map() 사용 하다 문득 든 의문점(객체 배열에 대한)

const users = [
{firstName : "Susan", lastName: "Steward"},
{firstName : "Daniel", lastName: "Longbottom"},
{firstName : "Jacob", lastName: "Black"}
];

여기서 우리가 알고 있듯이 firstName이 key이고, "Susan"이 value로 알고 있다. 
그리고 문자열은 "" 안에 넣는다. 하지만 key는 문자열이지만 ""을 쓰지 않는다.
그렇다면 key는 무조건 ""이걸 안 쓰는걸까? 라는 의문이 들어 찾아보았다

key
- 문자열 형태의 키는 반드시 따옴표("" 또는 '')로 감싸지 않아도 되고 자바스크립트에서는 firstName, lastName처럼 따옴표 없이 사용하는것이 일반적이라고 한다
- 하지만 숫자, 특수문자, 공백 등이 포함된 key를 사용할 경우에는 반드시 따옴표("" 또는 '')로 감싸야 된다

value
- 문자열 값은 반드시 따옴표로 감싸야 된다. "Susan","Steward" 처럼
- 숫자, 불리언, 배열, 객체 등의 값은 따옴표 없이도 사용할 수 있다. 예를 들어 age:25, isAdmin:false, skills:["html", "css"] 등이 사용 가능하다

예시

요약
key: 따옴표는 선택적이지만, 숫자, 특수문자, 공백가 포함된 경우 필수
value: 문자열 값은 따옴표 필수, 숫자/불리언 등은 따옴표 불 필요

 

 

 

Map()

• 데이터를 저장하고 관리하며 key-value 쌍으로 저장하는 방식
• 함수가 아닌 객체!!

기본적인 문법은 아래와 같다

// Map Object 선언

let map = new Map()
// let map = new Map([['a', 1]]) iterable 객체 전달

// key를 이용해 value를 저장
map.set(key, value)

// key에 해당하는 값을 반환, key가 존재하지 않으면 undefined를 반환한다.
map.get(key)

// key가 존재하면 true, 존재하지 않으면 false를 반환
map.has(key)

// key에 해당하는 값을 삭제
map.delete(key)

// 맵 안의 모든 요소를 제거
map.clear() – 맵 안의 모든 요소를 제거합니다.

// 요소의 개수를 반환
map.size

 

 

위 문법을 통해 실전 예시