[JavaScript] 자바스크립트 배열(Array) 이해하기 - 1

객체를 활용하면 다양한 속성을 만들어서 하나의 객체에 여러 가지 값을 담아낼 수 있다.

여러 가지 값을 담을 수 있다는 특징 하나만으로도, 정말 다양한 작업을 가능하게 해 주지만,

아쉽게도 객체의 속성들은 일정한 순서를 가지지 않는다.

다시 말해, 객체 안에 다양한 값들이 존재하지만 그 값들끼리는 어떤 연관성을 가지기가 어렵다.

 

그래서 순서가 있는 값들의 집합을 만들고 싶을 때는 배열(Array)이라는 것을 활용하면 된다.

자바스크립트에서 배열도 객체의 한 형태로 분류되지만, 일반적인 객체와는 조금 다른 형태의 객체다.

 

배열 선언

let arr1 = new Array();
let arr2 = [];

객체는 이렇게 두 가지 방법으로 생성할 수 있는데,

중괄호를 열고 닫는 식으로 객체를 많이 생성하듯이

배열 또한 대괄호를 열고닫는 식으로 배열을 생성하는 것이 좀 더 일반적이다.

 

객체의 속성 값과 마찬가지로 배열 안의 값들도 모든 자료형의 값들을 저장할 수 있고,

여러 값들 간의 구분은 쉼표로 구분한다.

let arr1 = new Array('김', '나', '박', '이');
let arr2 = ['김', '나', '박', '이'];

이런 식으로 배열을 선언할 때 바로 값을 할당할 수도 있다.

 

let arr = ['김', '나', '박', '이', ['김', '미역', '굴', '톳'], {'김': '모락모락'}, 1, 2, 3, true, false, null, undefined];

 

다양한 값을 저장할 수 있다고 언급했듯 이렇게 

숫자, 문자열, 불린, null, undefined까지 모든 기본형 값은 당연하고,

객체도 배열 안에 하나의 값으로 들어갈 수 있고,
배열 안에 배열도 하나의 값으로 들어갈 수 있다.

 

이렇게 배열 안에 들어간 값을 요소, 영어로는 item이라고 부르는데,

이 요소들은 배열 안에서 가장 왼쪽부터 오른쪽으로 차례대로 순서를 가진다.

이 순서를 자연스럽게 숫자 값을 가지고 이것을 index라고 부른다.

 

요소 접근하기

배열 자체에 접근하고 싶다면 당연히 배열을 담고 있는 변수 이름을 호출하면 배열에 접근할 수 있다.

그런데 배열 안에 있는 요소에 접근하고 싶다면 어떻게 해야 할까?

 

앞서 배열도 특별한 형태의 객체라고 언급했던 만큼 [JavaScript] 자바스크립트 객체(Object) 이해하기 - 2에서 정리했던

객체의 속성에 접근하는 방식 중, 괄호 표기법을 활용해서 배열의 요소에 접근이 가능하다.

배열 뒤에 대괄호를 붙여 그 안에 index를 넣어 호출하면 그 순서에 있는 요소에 접근을 할 수 있다.

let arr = ['김', '나', '박', '이'];

console.log(arr[1]); // 나
console.log(arr[2]); // 박
console.log(arr[3]); // 이
console.log(arr[4]); // undefined

한 가지 주의할 점은 배열의 순서는 1번이 아니라 0번부터라는 점이다.

위 코드에서도 알 수 있듯이 arr[1]은 배열 arr의 첫 번째 값인 '김'이 아니라 두 번째 값인 '나'이다.

당연히 5번째 값은 할당한 적이 없기 때문에 arr[4]는 undefiend 값을 가진다.

let arr = ['김', '나', '박', '이'];

console.log(arr.0); // SyntaxError
console.log(arr.1); // SyntaxError
console.log(arr[false]); // undefined
console.log(arr[true]); // undefined
console.log(arr['2']); // 박 
console.log(arr['3']); // 이

점 표기법으로 접근하려고 하면, 일단 코드에디터를 사용하고 있다면 바로 빨간 줄이 그어질 것이고,

굳이 실행하더라도 Uncaught SyntaxError: missing ) after argument list라는 에러를 만나게 된다.

 

괄호 안에서 index는 문자열로도 작성이 가능한데, 숫자형으로 형 변환이 일어나는 건가 의심이 들어서

false와 true도 함께 출력해봤지만, 배열 요소에 접근할 때 괄호 안에서 형 변환이 일어나지는 않는다.

 

나머지는 다음에..

요소를 추가하고 삭제하는 등, 배열의 요소들을 다루는 건 다음 포스트에 정리하자.