자바스크립트 배열

• 들어가기 전에

자바스크립트에서 데이터를 보관하고 조작하는 방법은 리스트 형태로 보관할 수 있는 배열과 키와 밸류로 된 어떤 해시 구조로 되어있는 오브젝트 객체를 다루는 것이다. 자바스크립트에서 배열은 가장 많이 사용되는 자료구조(Data Structure)이다.

• 학습 목표

1. 자바스크립트 배열을 다루는 방법을 알아보자.

• 핵심 개념

- array

- array method

• 배열의 선언

- 자바스크립트 배열의 선언은 간단하다.

var a = [];

//배열안에는 모든 타입이 다 들어갈 수 있다.

var a = [1, 2, 3, "hello", null, true, []];

cs

- new Array() 문으로 선언할 수도 있지만, 보통은 간단히 '[ ]'를 사용한다.

- 배열에는 length 속성이 있어 그 길이를 쉽게 알 수 있다.

- 배열에 원소 추가는 index 번호와 함께 추가할 수 있다.

var a = [4];
a[1000] = 3;
console.log(a.length); //1001
console.log(a[500]); //undefined

- 배열은 사실 push 메소드를 통해 뒤에 순차적으로 추가할 수 있다.

var a = [4];
a.push(5);
console.log(a.length); //2

• 배열의 유용한 메소드들

- 배열은 순서가 있고, push와 같은 메소드를 제공하고 있어, 추가/삭제/변경이 용이하다.

- 배열의 여러가지 메소드들도 모두 함수이므로 반환 값이 존재한다.

//배열의 원소에 특정 값이 들어있는 지 확인할 수 있다. 값이 들어있지 않을 때는 -1 반환
[1, 2, 3, 4].indexOf(3); //2
 
//배열의 원소를 문자열로 합칠 수 있다.
[1, 2, 3, 4].join(); //"1, 2, 3, 4"
 
//배열을 합칠 수 있다.
[1, 2, 3, 4].concat(2,3); //[1, 2, 3, 4, 2, 3]

- 주의할 점은 어떤 메소드는 새로운 배열을 반환하고, 어떤 메소드는 원래 배열의 값을 변경시킨다는 것이다.

- 예를 들어서 concat은 원래 배열은 그대로 있고 합쳐진 새로운 배열을 반환한다.

var origin = [1, 2, 3, 4];
var changed = origin.concat(2, 3);
console.log(origin, changed); //[1, 2, 3, 4] [1, 2, 3, 4, 2, 3]

• 배열 탐색(forEach, map, filter)

- 배열의 순회는 for문을 사용하거나, forEach와 같은 메소드를 통해서 할 수 있다.

- forEach()

var array = [1, 2, 3];
 
var fun = function(value, index, object) {
    console.log(value);
};
 
array.forEach(fun); //1, 2, 3

· 더는 배열의 길이를 체크하는 for문을 추가하거나, i++과 같은 증가시켜주는 코드가 필요없다. 이 부분은 알아서 자바스크립트 파서가 처리해준다. 결국 for문을 쓰면서 생길 수 있는 실수를 줄여주고 코드의 가독성을 높인다.

· forEach()는 함수를 동작하는 함수

- map()

var array = [1, 2, 3];
 
var mapped = array.map(function(v) {
    return v * 2; //array의 원소를 돌면서 값을 변경시킨 후에 새로운 배열로 만들어서 반환
});
 
console.log(mapped); //[2, 4, 6]

· 원래의 값을 바꾸지 않고, 새로운 배열을 반환