배열 Array

이번 포스팅부터는 마크다운 스타일을 변경하고자 한다.

• 이 표시를 최대한 줄이는 것이 보여질 때 더욱 예뻐보이는 것 같다.

목차

배열의 메서드
다차원 배열
유사 객체 배열
ES6부터 추가된 배열 기능

배열의 메서드

배열은 Array 타입의 객체이며, Array.prototype 의 프로퍼티를 상속받는다.

자주 쓰이는 Array.prototype 의 메서드의 목록은 다음과 같다

수정 메서드는 원본 배열을 바로 수정하는 메서드들이고, 접근자 메서드는 기존의 배열을 건드리지 않고, 배열을 다른 형태로 가공한 새로운 배열을 반환하며 원본을 수정하지 않는 메서드고, 반복 메서드는 원본 배열의 모든 요소를 순회하며 작업을 수행하는 메서드이다.

• 수정 메서드 : 원본 배열을 바로 수정하는 메서드

• 접근자 메서드 : 기존의 배열을 건드리지 않고, 배열을 다른 형태로 가공한 새로운 배열을 반환하는 메서드

• 반복 메서드 : 원본 배열의 모든 요소를 순회하며 작업을 수행

다차원 배열

배열을 중첩하여 다차원 배열을 정의할 수 있다. array[row][col] 로 접근할 수 있다.

유사 객체 배열

함수의 인수를 저장한 Arguments 객체, DOM 의 document.getElementsByTagName(), document.getElementsByName() 메서드 등이 반환하는 NodeList 객체가 대표적인 유사 객체 배열이다.

유사 배열 객체는 Array.prototype 의 메서드를 사용할 수 없다. 그러나 배열로 참조하거나 대입할 수 있으며, for 문이나 for/in 문으로 반복처리할 수 있다.

ES6부터 추가된 배열 기능

비구조화 할당

비구조화 할당은 배열, 객체, 반복가능 객체에서 값을 꺼내어 그 값을 별도의 변수에 대입하는 문장이다. (python 의 unpacking과 비슷하다.)

우변이 배열인 경우의 비구조화 할당은 다음과 같이 사용할 수 있다.

var [a, b] = [1, 2];  // var a = 1, b = 2 와 같다.

[a, b] = [2*a, 3*b];  // a = 2*a, b = 3*b 와 같다.

[b, a] = [a, b];  // b와 a의 값을 교환함.

[,a,,b] = [1, 2, 3, 4];  // a = 2, b = 4 와 같음.

[a, b, ...namuji] = [1,2,3,4];  // a = 1, b = 2, namuji = [3,4] 와같음.

우변 배열의 요소를 하나씩 꺼내어 인덱스 순서대로 a, b에 대입한다. 꼭 우변과 좌변의 변수의 개수가 같을 필요는 없다. 죄변의 변수 개수가 우변의 변수 개수보다 많으면 좌변에 남는 변수에는 undefined 가 할당된다. 반대로, 우변의 개수가 좌변의 개수보다 많으면 넘어가는 값은 무시되고, 변수가 없는 인덱스도 무시된다.
또한, 전개연산자인 ... 을 사용하여 나머지 요소를 한번에 받는 변수도 설정할 수 있다.
함수의 반환값을 비구조화 할당받을 수도 있다.

function (x, y, theta) {
    var s = Math.sin(theta), c = Math.cos(theta);
    return [c*x - s*y, s*x + c*y]
}
var [a, b] = rotation(1, 2, Math.PI/3)

우변이 객체인 경우에도 비구조화 할당을 할 수 있다.
좌변을 객체 리터럴과 비슷한 문법으로 사용한다.

var {a: x, b: y} = {a: 1, b: 2};  // x = 1, y = 2 와 같음.

{a: x, b: y} = {a: 1, b: 2, c: 3};  // c = 3 은 무시됨

var {sin: sin, cos: cos, tan: tan, PI: PI} = Math;
// var sin = Math.sin, cos = Math.cos, tan = Math.tan, PI = Math.PI 와 같음.

반복가능한 객체 (iterator)가 우변일 때 의 비구조화 할당.

var [a, b, c] = "ABC";  // var a = "A", b = "B", c = "C" 와 같다.

function* createNumbers(from, to) {
    while(from <= to) yield from++;
}
var [a, b, c, d, e] = createNumbers(10, 15);
// a = 10, b = 11, c = 12, d = 13, e = 14

전개 연산자 … 을 활용해 반복가능한 객체를 펼칠 수 있다.

[... "abc"]  // -> ["a", "b", "c"]
f(... "abc")  // -> f("a", "b", "c") 와 같음.
[1, ...[2,3,4], 5]  // -> [1,2,3,4,5]
f(...[1,2,3])  // -> f(1, 2, 3)

Set

Set 객체는 중복되지 않는 유일한 데이터를 수집하여 활용하기 위한 객체이다. 파이썬의 set() 과 같다. new 연산자와 set() 생성자로 set 객체를 생성할 수 있다.

var set = new Set();

var zip = new Set(["131-8634", "556-0002"]);
console.log(zip);  // -> Set{"131-8634", "556-0002"}

// 제네레이터로 이터레이터를 만들어 set 객체로 생성
function* makeZip() {
    yield "131-8634";
    yield "556-0002";
}
var zips = makeZip();
zip = new Set(zips);
console.log(zip);

set이 가진 메서드는 다음과 같다.