TIL 009 | 배열의 기초

1. 배열(Array)이란

자바스크립트에서 배열(Array)이란 특정한 데이터들을 모아놓은 집합이다. 배열 안에 들어있는 것을 요소(element)라고 부르고, 요소에는 모든 데이터 타입이 들어갈 수 있다. 대괄호 [ ]를 안에 요소를 넣는 형태로 만들 수 있다.

배열의 특징 중 하나는 순서가 존재한다는 것이다. 가장 앞에 있는 요소는 0번 index에 위치하게 되고, 그 다음 요소들은 1번 index, 2번 index, 3번 index, ... 에 위치하게 된다. 주목할 점은 배열의 길이는 요소의 개수와 동일하기 때문에 위의 예시에서 배열의 길이는 4이고 마지막 요소의 index 번호는 4보다 1작은 3이 된다는 점이다.

2. 배열의 인덱스를 활용해서 요소에 접근하기

배열의 이름 뒤에 대괄호[ ]를 쓴 후 안에 index 번호를 써주면 배열의 각 요소에 접근할 수 있다.

let myArray = [19, 44, 'good', false];

console.log(myArray[0]);  // 19
console.log(myArray[1]);  // 44
console.log(myArray[2]);  // 'good'
console.log(myArray[3]);  // false

위의 예시에서는 배열의 요소의 개수가 적기 때문에 마지막 요소에 접근하기 쉽지만, 배열의 길이가 길어지게 되면 마지막 요소의 index 번호를 찾기가 힘들어지는데, 그럴 때는 length 프로퍼티를 써주면 된다.

let myArray = [19, 44, 'good', false, 'bad', 500, 1000, null, undefined, 7000];

console.log(myArray.length);             // 10

console.log(myArray[9]);                 // 7000

console.log(myArray[myArray.length-1]);  // 7000   
// 일반화시켰기 때문에 변수의 개수가 변해도 계속 사용가능

3. 배열의 값을 수정, 추가, 삭제하는 방법

• 배열의 값을 수정

let myArray = [19, 44, 'good', false];

myArray[0] = 500;

console.log(myArray);   // [500, 44, 'good', false]

myArray[2] = 'bad';

console.log(myArray);   // [500, 44, 'bad', false]

• 배열의 끝에 요소 추가하기

let myArray = [19, 44, 'good', false];

myArray.push('apple');

console.log(myArray);   // [19, 44, 'good', false, 'apple']

• 배열의 끝에서부터 요소 제거하기

let myArray = [19, 44, 'good', false];

myArray.pop();

console.log(myArray);   // [19, 44, 'good']

myArray.pop();
myArray.pop();

console.log(myArray);   // [19]

• 배열의 앞에서부터 요소 제거하기

let myArray = [19, 44, 'good', false];

myArray.shift();

console.log(myArray);   // [44, 'good', false]

myArray.shift();
myArray.shift();

console.log(myArray);   // [false]

• 배열의 앞에서부터 요소 추가하기

let myArray = [19, 44, 'good', false];

myArray.unshift('apple');

console.log(myArray);   // ['apple', 19, 44, 'good', false]

4. splice 메서드

splice 메서드는 배열 내의 특정한 요소를 삭제하거나, 다른 요소로 대체하거나 새로운 요소를 추가할 때 사용합니다.

array.splice( start, deleteCount, value1, value2, ...)  // splice 문법

위에서는 인자가 여러개 들어갔지만, splice 메서드는 필요에 따라 인자를 최소 1개만 쓸 수도 있다.

• 첫번째 인자 : 배열의 index의 시작점
• 두번째 인자 : 삭제할 요소의 개수
• 세번째 인자 이후 : 추가하고 싶은 요소

let myNumber = [1, 2, 3, 4, 5]

myNumber.splice(2);              // 2번 index부터 삭제

console.log(myNumber);           // [1, 2]

let myNumber = [1, 2, 3, 4, 5]

myNumber.splice(3, 1);           // 3번 index부터 1개 삭제 
                                 // 요소 1개 삭제할 때 유용
console.log(myNumber);           // [1, 2, 3, 5]

let myNumber = [1, 2, 3, 4, 5]

myNumber.splice(1, 2);           // 1번 index부터 2개 삭제

console.log(myNumber);           // [1, 4, 5]

let myNumber = [1, 2, 3, 4, 5]

myNumber.splice(2, 1, 'apple');  // 2번 index부터 1개 제거 후 그 자리에 'apple'추가

console.log(myNumber);           // [1, 2, 'apple', 4, 5]

let myNumber = [1, 2, 3, 4, 5]

myNumber.splice(2, 3, 'apple');  // 2번 index부터 3개 제거 후 그 자리에 'apple'추가

console.log(myNumber);           // [1, 2, 'apple']

let myNumber = [1, 2, 3, 4, 5]

myNumber.splice(2, 0, 'apple');  // 2번 index부터 0개 제거 후 그 자리에 'apple'추가
                                 // 요소 1개 원하는 위치에 추가할 때 유용
console.log(myNumber);           // [1, 2, 'apple', 3, 4, 5]

let myNumber = [1, 2, 3, 4, 5]

myNumber.splice(-2);             // 뒤에서부터 2개 삭제

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

5. 다차원 배열

가장 처음에 언급했듯이 배열 안에 들어있는 것을 요소(element)라고 부르고, 요소에는 모든 데이터 타입이 들어갈 수 있다. 배열 안의 요소로 배열이 들어올 때 2차원 배열이라고 부르고, 포괄적으로 다차원 배열이라고 한다.
2차원 배열에서도 요소에 접근할 수 있는데 대괄호[ ]를 한 번 더 써주면 된다.

let myArray = [19, 44, 'good', [100, 200, 500], false];

console.log(myArray[3]);      // [100, 200, 500]
console.log(myArray[3][0]);   // 100
console.log(myArray[3][1]);   // 200
console.log(myArray[3][2]);   // 500

console.log(myArray[1][3]);   // undefined
console.log(myArray[2][3]);   // 'd'   
//(시험삼아 쳐봤는데 'good'의 index 3번의 문자열이 나왔다.)

references

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
https://mine-it-record.tistory.com/352