자바스크립트 Array 객체

배열 리터럴

자바스크립트는 객체 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 모든 것이 객체이다. 원시 타입을 제외한 나머지 값들(함수, 배열, 정규 표현식 등) 모두 객체이다.

배열 리터럴은 객체 리터럴과 달리 프로퍼티명이 없고 각 요소의 값만 존재한다. 두 객체의 근본적인 차이는 배열 리터럴의 프로토타입 객체는 Array.prototype이고 객체 리터럴의 프로토타입 객체는 Object.prototype 이다.

대부분의 프로그래밍 언어는 배열의 요소가 모두 같은 데이터 타입 이어야 하지만 자바스크립트는 어떤 데이터 타입의 조합도 가능하다.

const array = ['word', 10, true, undefined]

배열의 생성

배열은 배열 리터럴 방식으로 생성하는데 이는 결국 내장 함수 Array() 생성자 함수로 배열을 생성한다.

매개 변수가 1개이고 숫자라면 매개변수의 숫자의 길이만큼의 빈 배열을 생성한다.

const array = new Array(2);

그 외의 경우 매개변수로 전달된 값들을 요소로 가지는 배열을 생성한다.

const array = new Array(1,2,3);

배열 요소의 추가와 삭제

push 와 pop을 통해서 array를 stack 형태로 사용하는게 가능하다.

var nums = new Array();
nums.push(1);
nums.pop();

단순 push 메소드는 length 프로퍼티를 사용하여 직접 요소를 추가하는 것보다 성능면에서 좋지않다.

const array = [1,2];
array[array.length] = 3;

push 메소드는 원본 배열을 직접 변경하는 부수효과가 있기 때문에 spread 문법을 사용하는 것이 좋다.

const array = [1,2];
const newArray = [...array,3];

index를 통해서 List 형태로 사용할 수 있다.

가장 배열스럽게 Array를 사용할 수 있다.

var nums = new Array();
nums[0] = 1;
console.log(nums[0]);

0 번째 index부터 차례로 값을 넣지 않아도 배열이 생성된다.

할당되지 않은 나머지 요소는 생성되지 않으며 참조하면 undefined를 반환한다.

var nums = new Array();
nums[3] = 1;
console.log(nums.length);

배열은 객체이기 때문에 요소 삭제를 위한 delete 연산자를 사용할 수 있다. 이때 length에는 변함이 없다.

const array = [1,2,3,4];
delete array[0]; //[empty, 2, 3, 4]

요소 값만이 아니라 요소를 완전히 삭제하려면 splice 메소드를 사용한다.

//splice(시작 인덱스, 삭제할 요소 수, 대체 요소)
const array = [1,2,3,4];
array.splice(3,1,5); // [1,2,3,5]

배열의 순회

배열 역시 객체이므로 for in문을 사용할 수 있으나 배열 요소 외의 불필요한 프로퍼티까지 출력될 수 있고 요소들의 순서를 보장하지 않기때문에 forEach, for, for of문을 사용하는것이 적합하다.

const array = [1,2,3,4];

for(let i =0; i<array.length; i++) {
  console.log(i,array[i]);
}

for(const item of array) {
  console.log(item);
}

array.forEach((item, index) => console.log(index, item));

Array Property

Array.length

length프로퍼티는 요소의 개수를 나타내며 length 프로퍼티의 값은 가장 큰 인덱스에 1을 더한 것이다.

length 프로퍼티 값보다 더 큰 인덱스로 요소를 추가하면 자동으로 프로퍼티 값이 늘어난다.

배열 요소의 개수와 length 프로퍼티의 값이 반드시 일치하지는 않으며 이러한 배열을 희소 배열이라고 한다.

const array = [1,2,3,4,5];
console.log(array.length);

Array.isArray

주어진 인수가 배열이면 true, 아니면 false를 반환한다.

Array.isArray([]);

Array.from

유사배열 객체 또는 이터러블 객체를 변환하여 새로운 배열을 생성한다.

이터러블 객체인 문자열을 배열로 반환한다.

const array = Array.from("hello");
console.log(array); //['h','e','l','l','o']

유사배열 객체를 새로운 배열로 반환한다.

const array = Array.from({length : 2, 0: 'a', 1: 'b'});
console.log(array); //['a', 'b'];

Array.of

Array.of는 전달된 인수를 요소로 갖는 배열을 생성하며 Array 생성자 함수와는 다르게 전달된 인수가 1개이고 숫자이더라도 인수를 요소로 갖는 배열을 생성한다.

const array = Array.of(1);
console.log(array); // [1]

Array.prototype.indexOf

원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환한다.

const array = [1,2,3,4];
array.indexOf(3); // 2

배열에 요소가 없으면 -1을 반환한다.

const array = [1,2,3,4];
array.indexOf(5); // -1

두번째 인수는 검색을 시작할 인덱스로 생략하면 처음부터 검색한다.

const array = [1,2,3,2];
array.indexOf(2,2); // 3

Array.concat

인수로 전달된 값들을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다.

원본 배열은 변경되지 않으며 새로운 배열을 반환한다.

const array1 = [1,2];
const array2 = [3,4];

const result = array1.concat(array2);
console.log(result); //[1,2,3,4]

Array.join

원본 배열의 모든 요소를 문자열로 변환한 후, 인수로 전달 받은 값, 즉 구분자로 연결한 문자열을 반환한다.

구분자는 생략 가능하며 기본 구분자는 ,(쉼표) 이다.

const array = [1,2,3,4];
const result = array.join();
console.log(result); // "1,2,3,4"

Array.reverse

원본 배열 요소의 순서를 반대로 변경하여 변경된 배열을 반환한다.

const array = [1,2,3];
const reverseArray = array.reverse();

Array.shift

배열에서 첫 요소를 제겋고 제거한 요소를 반환하며 원본 배열이 변경된다.

만약 빈 배열이라면 undefined를 반환한다.

const array = [1,2,3];
const shiftedItem = array.shift();
console.log(array); // [2,3]
console.log(shiftedItem); //1

Array.slice

인자로 지정된 배열의 부분을 복사하여 반환하며 원본 배열이 변경되지 않는다.

첫번째 매개변수 start에 해당하는 인덱스를 가지는 요소부터 end에 해당하는 인덱스를 가진 요소 전까지 복사한다.

//slice(start, end);
const array = [1,2,3];
const coppiedArray = array.slice(0,2);
console.log(coppiedArray); // [1,2]