예비 개발자

const fifthStudyLog = "배열의 생성, 추가, 삭제";

2. 생성, 수정(추가와 갱신), 삭제

2-1. 생성

배열을 생성하는 방식으로는 배열 리터럴 사용, Array 생성자 함수 사용, Array.of, Array.from 이 있다.

  1. 배열 리터럴 사용

가장 일반적이고 간편한 방식이다. 대괄호로 요소들을 묶는 방식이다. (위에서 써왔던 방식)

  1. Array 생성자 함수

이때에는 인수의 개수에 따라서 다르게 동작한다. 인수의 개수가 하나인 경우에는 아래처럼 자리만 존재하는 빈 배열을 만들어낸다.

const arr = new Array(10);

console.log(arr); // [undifned * 10]
console.log(arr.length); // 10

인수가 2개 이상이거나 숫자가 아닌 경우 인수를 요소로 갖는 배열을 생성한다.

new Array(1, 2, 3); //[1,2,3]
  1. Array.of

ES6에서 도입된 메서드로 전달된 인수를 요소로하는 배열을 생성한다.

Array.of("pineapple"); // ['pineapple']
  1. Array.from

마찬가지로 ES6에서 도임된 메서드로 유사배열 객체또는 이터러블 객체를 인수로 전달받아 배열로 변환하여 반환한다.

//유사 배열 객체
Array.from({ lengh: 2, 0: "apple", 1: "pineapple" }); // ['apple', 'pineapple']

//이터러블(문자열 포함)
Array.from("hello"); // ['h','e','l','l',o]

2-2. 추가와 갱신

배열에 요소를 추가하는 방법은 간단하다. 값이 없는 인덱스에 값을 할당하면 추가된다.

const arr = ["apple", "pineapple"];

arr[2] = "orange";
// ['apple', pineapple', 'orange']

값의 갱신도 같은 방법으로 할 수 있다. 값 갱신을 원하는 자리의 인덱스를 이용하여 값을 재할당하면 된다.

const arr = ["apple", "pineapple"];

arr[2] = "orange";
// ['apple', pineapple', 'orange']

arr[2] = "peach";
// ['apple', pineapple', 'peach']

갱신과 추가를 하기 위해서는 인덱스는 0 이상의 정수(혹은 정수 형태의 문자열)로 표현해야한다. 몇 가지의 언어에서는 인덱스에 음수를 넣으면 끝에서부터 순서대로 읽어주는데, Javasript에서는 불가능한 동작이므로 혼동하지 말자!

const arr = [];

//가능
arr[0] = "apple";
arr["1"] = "pineapple";

//불가능
arr[-1] = 2;
arr["element"] = 4;

console.log(arr); // ["apple", "pineapple"]

2-3.삭제

  1. delete 연산자

배열의 특정 요소를 삭제하기 위해서는 delete 연산자를 사용할 수 있다.

const arr = ["apple", "pineapple"];

delete arr[1]; // ["apple", undefined]
console.log(arr.length); // 2

다만 delete 연산자로 삭제하여도 length 프로퍼티에서는 값이 변하지 않는다. delete 연산자는 사용하지 않는 것이 좋다.

  1. Array.prototype.splice

배열에 빈자리를 만들지 않으면서 배열의 요소를 삭제하려면 splice메서드를 사용하는 것이 좋다.

const arr = [1, 2, 3];

arr.splice(1, 1);
// splice(시작 인덱스, 삭제할 요소 수)
//[1,3]

console.log(arr); // 2

정리

배열은 큰 장점이 있다. 하나하나의 값을 변수 하나하나에 할당하는 것보다 묶을 수 있는 특징이 있는 값들은 배열에 모두 넣어서 요소로 취급하면 편리하다. 게다가 for문 등의 반복문 사용으로 순차적인 접근도 용이해진다는 면에서 프로그래밍을 하는 과정에서 필요한 문법 중 하나이다.

개인적으로 배열에서 중요한 내용(기억해야할 내용?) 메서드라고 생각한다. 배열을 삭제하고 추가하고, 수정하는 다양한 메서드를 한 편으로 담기가 힘들어서 다음 스터디로그는 배열 메스드에 대해서 집중적으로 다뤄볼까한다.

<모던 자바스크립트 Deep Dive>에서 읽은 내용 중, 나름 이해가 가능한 내용들만 정리하여 작성하였기에 아쉬운 부분이 많다. 희소배열의 개념 등은 스스로가 더 레벨업된 다음에 다루는 것이 좋다고 생각하여 일단 스킵했다. (눈에 보이는 것을 이해해야 원리가 이해가 잘 되는 스타일이라…)

배열 메서드 이후에는 객체에 대해서 다룰 것이다!

참고