[JS] Array, Set, Map

1. 배열(Array)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

 

1) 배열생성

배열은 배열 리터럴(Array Literal)을 이용하여 생성할 수 있다.

var arr = [1, null, undefined, function () {}, { x: 2, y: 4 }];
console.log(arr[0]);	// 1

delete arr[0];
console.log(arr);	// [empty, null, undefined, ƒ, {…}]
console.log(arr[0]);	// undefined

배열도 객체이며 내장객체 Array 생성자 함수를 이용하여 배열을 생성할 수 있다.

var arr1 = new Array();
console.log(arr1);		// []
var arr2 = new Array(4);	// if argument is single number
console.log(arr2);		// [empty × 4]
var arr3 = new Array(1, 'arr', 'object');
console.log(arr3);		// [1, "arr", "object"]

 

2) 배열 객체의 주요 메소드

var arr = ['b', 'c', 'd', 'e'];
console.log(arr.length);	// 4

console.log(arr.push('f'));	// 5
console.log(arr);		// ["b", "c", "d", "e", "f"]
console.log(arr.pop());		// "f"
console.log(arr);		// ["b", "c", "d", "e"]
console.log(arr.shift());	// "b"
console.log(arr);		// ["c", "d", "e"]
console.log(arr.unshift('x'));	// 4
console.log(arr);		// ["x", "c", "d", "e"]

console.log(arr.indexOf('d'));	// 2
console.log(arr);		// ["x", "c", "d", "e"]
console.log(arr.fill(9, 2, 4));	// ["x", "c", 9, 9], (item, start_index, end_index)
console.log(arr);		// ["x", "c", 9, 9]
console.log(arr.splice(2, 2));	// [9, 9], (start_index, delete_count)
console.log(arr);		// ["x", "c"]

다음과 같이 배열의 깊은 복사(Deep Copy)가 가능하다.

var arr1 = ['a', 'b', 'c', 'd', 'e'];
console.log(arr1.slice(2, 4));	// ["c", "d"], (start_index, end_index)
console.log(arr1);		// ['a', 'b', 'c', 'd', 'e'], no_change
var arr2 = arr1.slice();
console.log(arr1);		// ["a", "b", "c", "d", "e"]
console.log(arr2);		// ["a", "b", "c", "d", "e"]
console.log(arr1 == arr2);	// false, deep copy
var arr3 = arr1;
console.log(arr1 == arr3);	// true, sallow copy

배열의 각 요소를 순회하면서 실행되는 메소드도 있다.

const arr = ['a', 'b', 'c', 'd'];

arr.forEach(function (e, index, array) { console.log(e) });
console.log(arr);						// ["a", "b", "c", "d"]

console.log(arr.map(function (e) { return e + '_' }));		// ["a_", "b_", "c_", "d_"]
console.log(arr);						// ["a", "b", "c", "d"]

console.log(arr.reduce(function (e1, e2) { return e1 + e2; }));	// abcd
console.log(arr);						// ["a", "b", "c", "d"]

console.log(arr.filter(function (e) { return "c" > e; }));	// ["a", "b"]
console.log(arr);						// ["a", "b", "c", "d"]

console.clear();
for (let index in arr) { console.log(arr[index]); }
for (let item of arr) { console.log(item); }

 

2. 집합(Set, ES6)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

 

1) 집합생성

집합은 내장객체 Set 생성자 함수를 이용하여 배열을 생성할 수 있다.

const set = new Set([1, 2, 3, 4]);
console.log(set);		// Set(4) {1, 2, 3, 4}
console.log(set.size);		// 4

 

2) 집합 객체의 주요 메소드

const set = new Set([1, 2, 3, 4]);
console.log(set.has(3));	// true
console.log(set.has(6));	// false
set.add(0)
console.log(set);		// Set(5) {1, 2, 3, 4, 0}
set.add(1)
console.log(set);		// Set(5) {1, 2, 3, 4, 0}
console.log(set.delete(3));	// true
console.log(set.has(3));	// false

집합의 각 요소를 순회하면서 실행되는 문장은 아래와 같다.

const set = new Set(['a', 'b', 'c']);
for (let item of set) console.log(item);		// 'a' 'b' 'c'
for (let item of set.keys()) console.log(item);		// 'a' 'b' 'c'
for (let item of set.values()) console.log(item);	// 'a' 'b' 'c'
for (let [key, value] of set.entries()) console.log(key, value);
set.forEach(function(e) { console.log(e); });		// 'a' 'b' 'c'

 

3. 맵(Map, ES6)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map

 

1) 맵생성

맵은 내장객체 Map 생성자 함수를 이용하여 맵을 생성할 수 있다.

var map = new Map([["key1", "value1"], ["key2", "value2"]]);
console.log(map);	// Map(2) {"key1" => "value1", "key2" => "value2"}
console.log(map.size);	// 2

 

2) 맵 객체의 주요 메소드

var map = new Map();
console.log(map.set("key1", "string"));	// Map(1) {"key1" => "string"}
console.log(map.set(7, {}));		// Map(2) {"key1" => "string", 7 => {…}}
console.log(map.set("key3", function () {}));
console.log(map.set("key3", 8));	// overwrite
console.log(map.size);			// 3
console.log(map.get("key1"));		// "string"
console.log(map.get(7));		// {}

맵의 각 요소를 순회하면서 실행되는 문장은 아래와 같다.

var map = new Map([[-1, "b"], [0, "d"], [3, "g"]]);
for (let [key, value] of map) { console.log(`${key}: ${value}`); }
for (let key of map.keys()) { console.log(key); }	// -1, 0, 3
for (let value of map.values()) { console.log(value); }	// 'b', 'd', 'g'