[JS] 2.3. 배열

참고 자료

boostcourse 생활코딩: 자바스크립트의 시작

배열 메서드

강의에서 다루지 않지만 기본적으로 사용할 메서드, 도움이 될만한 것들을 따로 정리해보았다. MDN - Array를 참고했다.

push : 맨 마지막에 추가

파이썬의 append 메서드와 같다.

var fruits = ["Banana", "Orange", "Apple"];
fruits.push("Kiwi");

document.write(fruits);
document.write(fruits.length);

//[결과] Banana,Orange,Apple,Kiwi4

fruits 배열 내에 “Kiwi” 항목이 들어가 추가되면서, 출력에도 추가되고 개수도 4개로 늘어난 것을 볼 수 있다.

놀랍게도 배열이 아닌 텍스트로 출력된다. 자동으로 띄어쓰기를 하지 않고 반점으로만 구분해 출력된다. 그리고 write()를 하더라도 개행(line break)을 하지 않는다.

파이썬은 배열 자체를 출력하며 print()를 할 때마다 자동개행 되는데 이와 사뭇 다르다.

이후부터는 MDN의 예시 배열을 활용한다.

let fruits = ["사과", "바나나"];

console.log(fruits.length);
// 2

unshift : 맨 앞에 추가

배열의 맨 앞에 항목을 추가하는 방법이다.

let newLength = fruits.unshift("딸기"); // 앞에 추가

// ["딸기", "사과", "바나나"]

pop : 맨 마지막을 제거

let last = fruits.pop(); // 끝의 바나나를 제거

// ["딸기", "사과"]

shift : 맨 앞을 제거

lef first = fruits.shift() // 제일 앞의 '사과'를 제거

// ['바나나']

indexOf : 배열 안 항목의 인덱스 찾기

fruits.push("망고");
// ["딸기", "바나나", "망고"]

let pos = fruits.indexOf("바나나");
// 1

python의 .find() 메서드와 같다. 브라우저의 console에서 시험해 보았을 때 array에 없는 항목을 조회하면 -1이 반환된다.

forEach : 배열을 하나하나 처리

배열의 항목들을 순환하며 하나하나씩 처리한다. 파이썬의 enumerate()처럼 item과 idex를 함께 조회하거나 출력할 수 있다.

fruits.forEach(function (item, index, array) {
  console.log(item, index);
});

// [결과]
// 사과 0
// 바나나 1

splice : 인덱스 위치에 있는 항목 제거

.splice(a, b)는 ‘a index 위치부터 b개 제거’라는 뜻이다.

let fruits = ["딸기", "바나나", "망고"];
let removedItem = fruits.splice(1, 1);

// ["딸기", "망고"]

만약 값을 하나만 쓰면 앞에서부터 값에 해당하는 개수만큼 제거한다.

let fruits = ["딸기", "바나나", "망고", "귤"];
let removedItem = fruits.splice(2);

// ["망고", "귤"]

[…array] : shallow copy

같은 메모리 공간을 바라보는 리스트를 복제한다. python에서 단순히 리스트를 할당하는 것과 같다.

let shallowCopySpread = [...fruits];
// ["딸기", "망고"]

같은 얕은 복사로 다음의 방법을 사용해도 된다.

let shallowCopySlice = fruits.slice();
// ["Strawberry", "Mango"]

let shallowCopyFrom = Array.from(fruits);
// ["Strawberry", "Mango"]