배열이란
대괄호를 이용해 여러 개의 값을 리스트 형태로 나열한 자료구조를 뜻하며
'인덱스로 참조되는 요소'라는 값의 집합이다.
배열의 요소(element)는 배열을 구성하는 각각의 값이고,
요소의 위치를 가리키는 숫자를 인덱스(index)라고 한다.
|
1
|
const examArray = [1234, '문자열', false, function sample(){}, null, undefined, NaN];
|
cs |
위의 예시처럼 모든 자료형이 배열로 가능하다.
배열의 특징
배열의 중요한 특징은 세 가지이다.
- 요소의 값을 수정할 수 있고 인덱스로 요소의 값을 호출할 수 있다.
- JavaScript의 배열은 배열타입으로 존재하지 않고 객체타입으로 존재한다.
- 값의 참조가 인덱스로 이루어진다.
|
1
2
3
4
5
6
7
8
|
/*값의 호출*/
const array = ['one', 'two', 'three'];
console.log(array[0]); // output : 'one'
/*값의 변환*/
const array = ['one', 'two', 'three'];
array[0] = 'four';
console.log(array); //output : 'four', 'two', 'three'
|
cs |
배열 요소의 추가와 삭제
1. 배열 요소의 추가
객체가 동적으로 프로퍼티를 추가할 수 있는 것처럼 배열도 동적으로 요소를 추가할 수 있다.
이때 순서에 맞게 값을 할당할 필요는 없고 인덱스를 사용하여 필요한 위치에 값을 할당한다.
배열의 길이는 마지막 인덱스를 기준으로 산정된다.
|
1
2
3
4
5
6
7
|
const array = [];
console.log(array[0]); //undefined
array[1] = 1;
array[3] = 2;
console.log(array); // output : [empty, 1, empty, 3]
|
cs |
값이 할당되지 않은 인덱스 위치의 요소는 생성되지 않는다.
단 존재하지 않는 요소를 참조하면 undefined가 반환된다.
2. 배열 요소의 삭제
배열은 객체이기 때문에 배열의 요소를 삭제하기 위해 delete 연산자를 사용할 수 있다.
이때 length에는 변함이 없다. (안에 value만 삭제)
해당 요소를 완전히 삭제하여 length에도 반영되게 하기 위해서는 array.prototype.splice 메소드를 사용한다.
|
1
2
3
4
5
6
|
const array = ['one', 'two', 'three', 'four'];
//요소의 값만 삭제
delete array[2]; //length : 4, ['one', 'two', empty, 'four']
//요소의 값만이 아니라 완전히 삭제
array.splice(2,2); //length : 2, ['one', 'two']
|
cs |
프로퍼티
프로퍼티는 단순한 속성값을 출력한다.
console.dir(변수명)으로 얻고자 하는 변수 혹은 객체의 property list를 출력할 수 있다.
아래 참조 이미지의 빨간 박스인 length가 array에서 사용하는 배열의 길이 property 값이다.
메소드
메소드는 기능을 수행하는 단위이다.
배열과 마찬가지로 console.dir(변수명)으로 출력해서 메소드들의 리스트를 확인할 수 있고
아래 참조 이미지의 초록색박스가 array에서 사용가능한 메소드 리스트이다.
뒤에 f라고 표시되는 것을 볼 수 있다.
