[부스트코스] 자바스크립트 배열

배열의 선언

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

var a = [];
//배열 안에는 모든 타입이 다 들어갈 수 있다. 함수도 배열 안에 배열도, 배열 안에 객체도 들어갈 수 있음.
var a = [1,2,3,"hello", null, true, []];

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,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은 원래 배열은 그대로 있고 합쳐진 새로운 배열을 반환한다.

//origin과 changed는 같은 배열원소를 가지고 있지만, 두 개가 가리키는 메모리 주소는 다릅니다.즉 reference가 다르다고 할 수 있습니다. 
var origin = [1,2,3,4];
var changed = origin.concat();  //[1,2,3,4]
console.log(origin === changed);  //[1, 2, 3, 4] [1, 2, 3, 4] false

 

 

배열 탐색 - (foreach, map, filter)

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

//forEach는 함수를 인자로 받고 있음
["apple","tomato"].forEach(function(value) {
   console.log(value)
});

// apple
// tomato

forEach를 사용하면 배열의 길이를 체크하는 for문을 추가하거나, i++와 같은 증가시켜주는 코드가 필요 없다. 이 부분은 알아서 자바스크립트 파서가 처리한다. for문을 쓰면서 생길 수 있는 실수를 줄여주고, 코드의 가독성도 좋아서 읽기 편한 코드를 만들 수 있다.

 

한 가지 더 특이한 점은 forEach와 같은 메서드가 함수를 인자로 갖는다는 점이다. 이런 특징은 자바스크립트에서 많이 나오는데, 배열에서는 이런 식으로 동작하는 메서드들이 꽤 있다.

 

 

새로운 배열을 반환하는 map메서드

배열의 모든 요소 각각에 대하여 주어진 콜백 함수를 호출하고, 그 반환값을 모은 새로운 배열을 반환한다.

var newArr = ["apple","tomato"].map(function(value, index) {
   return index + "번째 과일은 " + value + "입니다";
});
console.log(newArr) // ["0번째 과일은 apple입니다", "1번째 과일은 tomato입니다"]

 

filter메서드

지정한 콜백의 반환 결과가 true인 요소만 모은 새로운 배열을 반한다.

var list = [true, false, 1 === 0];
var filteredList = list.filter(element => element === true);
console.log(filteredList); // [true]

 

그 외 유용한 메서드는 여기서 참고 가능하다. 

 

 

[부스트코스 관련 강의 링크]

자바스크립트 배열 - https://www.edwith.org/boostcourse-web/lecture/16745/

[LECTURE] 1) 자바스크립트 배열 : edwith