자바스크립트 배열

2020-06-10

해당 Post는 Javascript의 배열에 대해 정리한 파일입니다.


배열의 선언

자바스크립트 배열의 선언은

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]); //그럼, 이 결과는 무엇일까요? Undefine이 출력이 됩니다.

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

var a = [4];
a.push(5);
console.log(a.length);//기존에 4라는 값 1개가 들어는 상태에서 push로 5를 입력해 길이는 2가 출력이 됩니다.

배열의 유용한 메서드들

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

그밖에도 많은 메서드가 있습니다. indexOf, join, slice,concat 의 활용을 좀 더 알아보는 게 좋습니다.

//배열의 원소에 특정 값이 들어 있는지 확인할 수 있다.
[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은 원래 배열은 그대로 있고 합쳐진 새로운 배열을 반환합니다. 이점을 주의해야 합니다.

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

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

다른 프로그래밍 언어와 비슷한 문법인 자바스크립트 for문은 여러분들이 금방 찾아서 학습이 가능할 것 같아 생략하고요.

forEach를 통한 배열 탐색을 공부할 필요가 있습니다.

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

forEach를 사용하면 더는 배열의 길이를 체크하는 for문을 추가하거나, i++과 같은 증가시켜주는 코드가 필요 없습니다.

이 부분은 알아서 자바스크립트 파서가 처리해줍니다.

결국, for문을 쓰면서 생길 수 있는 실수를 줄여줍니다.

그리고 코드의 가독성도 좋아서 읽기 편한 코드를 만들 수 있습니다.

for문과 성능 차이도 있을 수 있지만 미미한 차이입니다.

한 가지 더 특이한 점은 forEach와 같은 메서드가 함수를 인자로 갖는다는 점입니다.

이런 특징은 자바스크립트에서 많이 나오는데요, 배열에서는 이런 식으로 동작하는 메서드들이 꽤 있습니다.

filter, map은 아주 중요합니다.