배열 에서

배열 소개

JavaScript에서 배열은 길이가 고정되지 않은 리스트 형태의 구조로, 원시 값이나 객체 등 어떤 타입이든, 심지어 서로 다른 타입이 섞여 있어도 담을 수 있어요. 배열에는 length 속성이 있고, 배열을 순회하고 변경하는 데 쓸 수 있는 유용한 메서드도 많이 있어요.

배열을 만들려면 대괄호 [] 사이에 원소를 넣어요. 배열에서 값을 읽으려면 식별자 뒤에 대괄호 []를 쓰고 그 안에 인덱스를 넣어요. 배열의 인덱스는 0부터 시작해요.

예를 들어 볼까요:

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names[1];
// => Laura

배열은 생성자 문법으로도 만들 수 있지만, 대부분의 경우에는 배열 리터럴 문법을 권장해요.

const names = new Array();
names.push('Jack', 'Laura', 'Paul', 'Megan');

names[1];
// => Laura

배열은 strings를 원소 인덱스로 쓸 수 없고 정수(number)를 써야 해요. 대괄호 표기법(또는 점 표기법)으로 정수가 아닌 값을 사용해 설정하거나 접근하면, 배열 리스트 자체의 원소를 설정하거나 가져오는 것이 아니라 그 배열의 객체 속성 컬렉션에 연결된 변수에 접근하거나 값을 설정하게 돼요. 배열의 객체 속성과 배열 원소의 목록은 서로 별개이고, 배열의 순회 및 변경 작업은 이런 이름 있는 속성에는 적용할 수 없어요.

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.length;
// => 4

// Properties can be set on arrays using bracket ['property'] or
// dot .property notation, and this will affect the length, as
// shown below.

names.magician = 'Elyse';
names.length;
// => 4

// The property shows up when logging the array, making it seem
// that the property is somehow incorporated in the array.

names;
// => ["Jack", "Laura", "Paul", "Megan", magician: "Elyse"]

// However, be aware. Properties added via non-numeric keys are
// NOT part of the array's internal list, and are not traversed
// or mutated when using one of the traversal or mutation
// operations.

names.forEach((name) => console.log(name));
// => Jack
// => Laura
// => Paul
// => Megan

배열에서 항목 삭제하기

JavaScript에서 배열은 일반 objects예요. 그래서 delete 키워드로 항목을 삭제할 수 있어요. 하지만 이렇게 해도 배열의 _길이_는 바뀌지 않고 empty라는 구멍이 남아요. 다른 언어로 치면 희소 배열과 비슷해요. empty 구멍은 순회나 변경 작업을 할 때 건너뛰어요.

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
delete names[1];

names;
// =>  ["Jack", empty, "Paul", "Megan"]

names.length;
// => 4

names.forEach((name) => console.log(name));
// => Jack
// => Paul
// => Megan

구멍이 없어야 하고, length가 순회하거나 변경될 항목의 개수를 반영해야 한다면, 대신 splice를 사용해요.

splice() 메서드는 기존 원소를 제거하거나 교체하고, 새로운 원소를 그 자리에 추가하는 방식으로 배열의 내용을 변경해요.¹

예를 들어 볼까요:

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.splice(1, 1);

names;
// =>  ["Jack", "Paul", "Megan"]

names.length;
// => 3

names.forEach((name) => console.log(name));
// => Jack
// => Paul
// => Megan

배열의 length는 변경할 수 있어요

배열의 length 속성은 배열이 담고 있는 항목 목록과 연결되어 있어요. 이 속성은 변경할 수 있어요. 길이를 늘리면 배열을 순회하거나 변경할 때 고려되지 않는 empty 구멍이 생겨요. 길이를 줄이면 배열 끝에 있는 원소가 _제거_돼요.

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.length = 6;

names;
// => ["Jack", "Laura", "Paul", "Megan", empty × 2]

names.length = 2;
// =>  ["Jack", "Laura"]

어떤 값이 배열인지 확인하기

배열은 objects이기 때문에 typeof names는 "object"를 반환해요. 어떤 값이 배열인지 확인하려면 Array.isArray를 사용해요:

const names = ['Jack', 'Laura', 'Paul', 'Megan'];

typeof names;
// => "object"

Array.isArray(names);
// => true

const object = {};
Array.isArray(object);
// => false

names instanceof Array를 쓰고 싶어질 수도 있는데, 그건 통할 수도 있지만 모든 상황에서 통하는 건 아니에요. 더 자세한 내용은 이 글을 읽어보세요.

배열 메서드

모든 배열 객체에서 사용할 수 있는 메서드 중에는 배열에 값을 추가하거나 제거하는 데 쓸 수 있는 것들이 있어요. 그중 몇 가지를 살펴볼까요:

push

push() 메서드는 배열 끝에 하나 이상의 원소를 추가하고, 배열의 새로운 길이를 반환해요.²

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.push('Jill'); // => 5
names;
// => ['Jack', 'Laura', 'Paul', 'Megan', 'Jill']

pop

pop() 메서드는 배열의 마지막 원소를 제거하고 그 원소를 반환해요. 이 메서드는 배열의 길이를 바꿔요.³

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.pop(); // => 'Megan'
names;
// => ['Jack', 'Laura', 'Paul']

shift

shift() 메서드는 배열의 첫 번째 원소를 제거하고 제거된 원소를 반환해요. 이 메서드는 배열의 길이를 바꿔요.⁴

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.shift(); // => 'Jack'
names;
// => ['Laura', 'Paul', 'Megan']

unshift

unshift() 메서드는 배열의 앞에 하나 이상의 원소를 추가하고, 배열의 새로운 길이를 반환해요.⁵

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.unshift('Jill'); // => 5
names;
// => ['Jill', 'Jack', 'Laura', 'Paul', 'Megan']

splice

splice() 메서드는 기존 원소를 제거하거나 교체하고, 새로운 원소를 그 자리에 추가하는 방식으로 배열의 내용을 변경해요. 이 메서드는 삭제된 원소를 담은 배열을 반환해요.¹

const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.splice(2, 1, 'Jill'); // => ['Paul']
names;
// => ['Jack', 'Laura', 'Jill', 'Megan']

---

1. splice, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice (referenced September 29, 2021) ↩

2. push, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push (referenced September 29, 2021) ↩

3. pop, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop (referenced September 29, 2021) ↩

4. shift, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift (referenced September 29, 2021) ↩

5. unshift, MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift (referenced September 29, 2021) ↩