[JavaScript] Map vs Object

Javascript에는 키-값으로 데이터를 저장하는 방식이 두가지가 있다.

바로 Map과 Object인데 오늘은 이 두가지에 대해 소개해보고자 한다.

 

우선 Object는 매우 대중적인 방식이다. Map보다 가볍고 사용하기도 쉬워 아마 많은 사람이 사용하리라 생각된다.

Object는 구조가 단순한 대신 직속의 key-value들을 마음대로 뒤섞을수 있기 때문에 사용할때 주의가 많이 필요하다.

// a object에 b key값에 1이라는 value를 할당
const a = {
	b: 1
}

console.log(a['b']) // 1
console.log(a.b) // 1

// a를 const로 선언했기에 a에 새로운 값을 재할당하는것은 불가능하다.
// a에 새로운 값을 할당하는것은 불가능하지만 a의 키에 새로운 값을 재할당하는것은 가능하다.
// Uncaught TypeError: Assignment to constant variable.
a = { b: 2 }

a.c = 2 // a object의 c key값에 2라는 value를 할당
console.log(a['c']) // 2
console.log(a.c) // 2

console.log(a) // { b: 1, c: 2 }

// Uncaught TypeError: Spread syntax requires ...iterable[Symbol.iterator] to be a function
console.log(...a)

// argument가 object형식인 경우 function에서 다음과 같이 처리하는것이 가능하다.
function test({ b, c }) {
	// Array지만 바로 값을 읽어드리는 tuple방식으로도 사용이 가능하다.
	return [b, c]
}

// 각각 a.b, a.c를 의미한다.
const [b, c] = test(a);

console.log(b) // 1
console.log(c) // 2

const d = {
	d: 3 
}

// object는 ...방식으로 직속의 키들을 뿌려줄수 있다.
const e = {
	...a,
    ...d
}

console.log(e) // { b: 1, c: 2, d: 3 }

 

 

다음은 Map이다.

Map같은 경우는 사용법이 직관적이지만 Map보다 무겁고 for문에서 바로 사용할수 있다는 점이 있다.

(Object의 경우 for문으로 사용하기 위해서는 for .. in으로만 가능하다.)

for문에서는 다음에 다룰 예정이다.

// 상수 a에 Map 선언
const a = new Map();

// a의 b key에 1이라는 value 할당
a.set('b', 1)

// 이 방식도 동작하긴 하는데 이렇게 사용하면 object형식으로 저장된다.
a.b = 1;

// a에서 b값을 꺼내 출력
console.log(a.get('b')) // 1

// a에 b라는 key가 있는지 확인
console.log(a.has('b')) // true

// a의 크기를 확인해준다.
// a에 object key-value들이 할당되어 있더라도 포함시키지 않는다.
console.log(a.size) // 1

// a에 b key를 지워준다.
a.delete('b')

// b key를 지웠으므로 당연히 undefined가 뜬다.
console.log(a.get('b')) // undefined