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

[JavaScript] 자바스크립트 배열(Array) 이해하기 - 1에 이어서 계속해서 배열에 대해 정리해보자.

 

배열 요소 추가하고 수정하기

배열에 요소를 추가하는 방식은 객체와 비슷하다.

배열 내에서 원하는 index에 접근하고, 값을 할당하면 되는데,
값이 존재하지 않았던 index에 접근해서 값을 할당하면 추가가 되고
이미 값이 존재하던 index에 접근해서 값을 할당하면 수정이 된다.

let arr = [];

// 요소 추가
arr[0] = '김';
arr[1] = '나';
arr[2] = 'Big';
arr[3] = '이';

console.log(arr); // (4) ["김", "나", "Big", "이"]

// 요소 수정
arr[2] = '박';

console.log(arr); // (4) ["김", "나", "박", "이"]

 

배열의 길이 확인하기

위 코드에서도 알 수 있듯이, 콘솔에 배열의 요소가 아니라 배열 자체를 바로 출력해보면

배열이 가지고 있는 요소들의 개수가 소괄호에 감싸 져서 출력된다.

다시 말하면, 배열의 길이가 함께 출력된다는 것인데,

 

이 배열의 길이는 length라는 프로퍼티를 활용하면 쉽게 접근할 수 있다.

갑자기 뜬금없이 속성이냐고 할 수 있겠지만, 배열도 사실은 객체다.

자세한 내용들은 이번 포스트에서 다루진 않겠지만, 배열은 기본적으로 몇 가지 속성들을 가지고 있다.

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

console.log(arr.length); // 4

 

참고사항

만약 배열의 index를 순서대로 추가하지 않고 중간에 순서를 뛰어넘어 추가하면 어떻게 될까?

let arr = [];

arr[0] = 0;
arr[1] = 1;
arr[3] = 3;

console.log(arr.length); // 4

console.log(arr); // (4) [0, 1, empty, 3]

console.lor(arr[2]); // undefined

위 코드를 보면 index 0, 1까지 값을 할당하고, 2를 뛰어넘어 3을 할당해줬다.

처음 배열을 배울 때 이런 경우에 값을 3군데만 할당했다고 해서

배열의 길이가 3이 될 것이라 오해할 수 있는데, length를 찍어보면, 4가 출력이 된다. 

뛰어넘은 index의 값은 빈 값이 할당되고, 배열의 길이는 값이 할당된 index만큼 늘어난다.

 

arr를 찍으면 1과 3 사이에 값이 empty라고 출력되는데,

실제로 arr[2]에 접근하면 undefined 값이 출력된다.

 

배열의 요소 삭제는 일반 객체와 다르다

[JavaScript] 자바스크립트 객체(Object) 이해하기 - 2에서 객체의 속성을 삭제할 때는 delete 연산자를 활용한다고 정리했었다.

배열도 delete 연산자로 활용할 수는 있지만, delete 연산자로는 해당 index를 완벽하게 삭제할 수 없다.

let arr = [1, 2, 3];

console.log(arr); // (3) [1, 2, 3]
console.log(arr.length); // 3

delete arr[2];

console.log(arr); // (3) [1, 2, empty]
console.log(arr.length); // 3

위 코드에서 볼 수 있듯이 arr[2]를 delete연산자로 삭제하더라도

삭제한 다음의 arr을 출력했을 때 그 자리에 empty값이 들어간 배열이 출력되고,

arr의 length는 여전히 3으로 남아있는 걸 확인할 수 있다.
배열의 요소를 완벽하게 삭제하려면, 
특별한 메서드를 사용해야 하는데, 이번 포스트에 다루진 않겠다.

 

좀 더 자세한 배열의 활용은 나중에..

배열은 순서가 있는 값들의 집합체이다 보니,
위에서도 볼 수 있듯 각 요소를 추가를 한다거나 삭제를 할 때,
일반적인 객체와 다른 독특한 특징들이 있다.

그래서 사실 배열을 좀 더 자유롭게 다루려면,

배열이 가지고 있는 메서드를 잘 이해하고 활용해야 한다.

그런데 아직까지 메서드에 대한 내용들을 포스팅한 적이 없고,

심지어 함수에 대한 내용들도 정리한 적이 없으니,
배열의 메서드에 대한 개념은 조금 뒤로 미뤄서 따로 정리하도록 하자.