자바스크립트 문법 (4) Map / Set

ES2015 문법 (4) Map / Set  

ES2015부터 자바스크립트에 '연상배열'이 도입됐다. 연상배열의 종류에는 Map객체와 Set객체가 있다. Map객체를 활용한다면, 기존 자바스크립트에서 할 수 없었던 '객체의 size'를 for루프구문 없이 한번에 구할 수 있으며, 그 어떤 값도 '키'로 지정하고, 불러올 수 있다. 말 그대로 '키:값'으로 매핑'이 가능한 셈이다.

 

1 『Map 객체』

Map 객체의 주요 기능들은 다음과 같다.

맴버	기능
size	Map 객체 내의 요소들 수를 반환
set ( key , val )	키 key / 값 val 요소를 추가 (중복될 경우에는 덮어씀)
get ( key )	지정한 키가 갖고 있는 값을 획득
has ( key )	지정한 키의 요소가 존재하는지 판독
delete ( key )	지정한 키의 요소를 삭제
clear ( )	모든 요소를 삭제
keys ( )	모든 키를 취득
values ( )	모든 값을 취득
entries ( )	모든 키 / 값을 취득
forEach(fnc , [,that ])	맵 내의 요소를 함수 fnc로 순서대로 처리

위의 11가지 객체 매서드들은 실무에 많이 활용된다. 글로써 이해하는 것보다 직접 예제를 실행해보면서 따라해보기를 추천한다. Map 객체 사용법을 예제로 살펴보자.

---

[예제]

let car = new Map( );

car.set( 'toyota' , '캠리' );

car.set('volvo' ,'s80' );

car.set('ferrari' ,'superfast 812' );

console.log(car.size);                          // 결과: 3

console.log(car.get('toyota'));              // 결과:  캠리

console.log(car.has('ferrari'));              // 결과: true

for( let key of car.keys( ) ) {

console.log( key );                        //결과: toyota, volve, ferrari

}

for( let value of car.values( ) ) {

console.log( value );                     //결과:  캠리, s80, superfast812

}

for( let [ key, value ] of car ) {

console.log( value );                    //결과: 캠리, s80, superfaset812

}

car.delete( 'toyota' );

console.log(car.size);                        // 결과: 2

car.clear( );

console.log( car.size );                     //결과: 0

---

2 『Set 객체』

 set객체는 중복되는 값을 무시하는 특징을 갖고 있는 Map객체라 생각하면 된다. 단, Map객체처럼 '키'값을 설정할 수 없다. (배열처럼 index값으로 접근할 수도 없음).

Set객체는 주로, has메서드로 값 유무를 판정하거나 for ..of 루프로 내부값을 열거하는 데에 활용된다.

맴버	기능
size	Set 객체 내의 요소들 수를 반환
add (val)	지정한 값을 추가
has (val)	지정한 값이 존재하는지 판정
delete (val)	지정한 값의 요소를 삭제
clear ( )	모든 요소를 삭제
entries ( )	모든 키/값을 취득
values( )	모든 값을 취득
forEach(fnc , [,that ])	지정한 함수를 Set의 각 값마다 처리

---

[예제]

let data = new Set( );

data.add(30);

data.add(12);

data.add(100);

data.add(65);

data.add(3);

console.log(data.has(3)); //    결과: true

console.log(data.size);    //     결과: 5

for( let val of data.values( ) ){

console.log(val);                   //  결과 : 30, 12, 100, 65, 3

}

for(let val of data){

console.log(val);                  //  결과: 30, 12, 100, 65, 3

}

data.delete(3);      

console.log(data.size)               //  결과: 4

data.clear( );

console.log(data.size)              // 결과: 0

---