[javascript] Map 알아보기 (set, get 메소드 사용하기)

프로그래머스 해시문제를 풀고 다른사람 풀이를 살펴보던중

Map을 사용한 풀이를 보았다.

Map역시 ES6에 도입된 문법이다.

이번엔 Map의 key value를 사용해보는 예제를 정리해보려 한다.

 

나의 풀이는

https://pro-jm.tistory.com/52

여기를 참고.

 

---

 

 

1. Map() 이란?

• Map()은 key-value 페어로 이루어져있다.
• key를 사용하여 value를 get, set 할 수 있다.
• key는 중복될 수 없다. (하나의 key에 하나의 value값만 가질 수 있다는 뜻)
• key로 사용 가능한 데이터타입은 string, symbol, object, function 이 있다.

 

 

2. 메소드 개념

set()

set 메소드를 사용하여 Map에 새로운 객체를 추가할 수 있다.

(key, value) 형태로 객체를 추가한다.

get()

get 메소드는 Map에 할당되어있는 value를 key로 접근하여 조회할 수 있다.

 

 

 

3. set() 으로 값 추가하기

예시를 살펴보자

let jeongminInfo = new Map();

jeongminInfo.set('name', 'OhJeongMin');
jeongminInfo.set('job', 'developer');
jeongminInfo.set('language', 'javascript');


// output

Map(3) {
  'name' => 'OhJeongMin',
  'job' => 'developer',
  'language' => 'javascript'
}

나의 정보에 이름, 직업, 언어를 추가해보자.

jeongminInfo 변수에 new Map() 로 새로운 Map을 생성한다.

생성 후 set 메소드를 사용하면 key-value 형태로 값을 추가할 수 있다.

 

 

 

물론 아래 방식으로 선언과 초기화를 동시에 할 수도 있다.

let jeongminInfo = new Map().set('name', 'OhJeongMin').set('job', 'developer').set('language', 'javascript');

 

 

 

3. get() 으로 값 조회하기

get을 사용하면 key로 value를 조회할 수 있다고 했다.

바로 예시로 살펴보자.

// 이름 조회하기
jeongminInfo.get('name')

//output
'OhJeongMin'

 

 

4. get과 set을 사용한 응용 예제

jeongminInfo에 passion을 조회하여 없을경우 새 값을 할당해보는 코드를

get과 set을 사용해보자.

 

jeongminInfo.set('passion', (jeongminInfo.get('passion') || 'max'));

// output
Map(4) {
  'name' => 'OhJeongMin',
  'job' => 'developer',
  'language' => 'javascript',
  'passion' => 'max'
}

 

코드를 뜯어보면,

새 값을 추가하기위해 key자리에 'passion' 값을 할당하였다.

value자리에는 or 조건문을 사용하여

(jeongminInfo.get('passion') || 'max') 로 로직을 짰다.

passion이라는 key값이 현재 값이 없어 undefined이므로 or조건문에서 false로 걸릴것이다.

따라서 'max' 값이 채택되고 이 값이 set의 메소드에 value값으로 할당되는 것이다.

 

 

5. 이번에는 팁

 

1. has()

key로 value값을 조회하는것이 아닌 값의 존재여부만 알고싶을때는 has() 메소드를 사용하면 된다.

// 이름 존재여부 조회하기
jeongminInfo.has('name');

// outpup
true


// 나이 존재여부 확인하기
jeongminInfo.has('age');

//output
false

 

2. delete()

값 삭제할때 사용하는 메소드이다.

// language 삭제
jeongminInfo.delete('language');

// output
true

// 삭제가 되었는지 확인
console.log(jeongminInfo);

//output
{
  'name' => 'OhJeongMin',
  'job' => 'developer',
  'passion' => 'max'
}

 

 

3. clear()

값 전체삭제시 사용하는 메소드이다.

jeongminInfo.clear()
console.log(jeongminInfo)

// output
Map(0) {}

 

 

---

참고사이트 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map