27. Array

https://poiemaweb.com/js-array

Array | PoiemaWeb

 

배열(array)은 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다. 

자바스크립트의 배열은 객체이며 유용한 내장 메소드를 포함하고 있다.
배열은 Array 생성자로 생성된 Array 타입의 객체이며 프로토타입 객체는 Array.prototype이다.

1. 배열의 생성

1.1 배열 리터럴
0개 이상의 값을 쉼표로 구분하여 대괄호([])로 묶는다. 

첫번째 값은 인덱스 ‘0’으로 읽을 수 있다. 존재하지 않는 요소에 접근하면 undefined를 반환한다.

 

const arr = [

    'zero', 'one', 'two', 'three', 'four',

    'five', 'six', 'seven', 'eight', 'nine'

  ];

 

  console.log(arr[1]);      // 'one'

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

  console.log(typeof arr);  // object

---

배열

대괄호 표기법을 사용하며 요소의 인덱스를 넣어준다. 

프로퍼티명이 없고 각 요소의 값만이 존재한다.
배열 리터럴 arr의 프로토타입 객체는 Array.prototype

 

객체

대괄호 표기법 or 마침표 표기법을 사용 

프로퍼티명을 키로 사용한다. 

객체 리터럴 obj의 프로토타입 객체는 Object.prototype

 

 

 

자바스크립트 배열은 어떤 데이터 타입의 조합이라도 포함할 수 있다.

const misc = [

    'string',

    10,

    true,

    null,

    undefined,

    NaN,

    Infinity,

    ['nested array'],

    { object: true },

    function () {}

  ];

---

1.2 Array() 생성자 함수

일반적으로 배열 리터럴 방식으로 생성 하지만,  Array() 생성자 함수로 배열을 생성하는 것을 단순화시킨 것이다.

Array() 생성자 함수는 Array.prototype.constructor 프로퍼티로 접근할 수 있다.

매개변수가 1개이고 숫자인 경우 매개변수로 전달된 숫자를 length 값으로 가지는 빈 배열을 생성한다.

const arr = new Array(2);

console.log(arr); // (2) [empty × 2]

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

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

---

2. 배열 요소의 추가와 삭제

2.1 배열 요소의 추가
동적으로 요소를 추가할 수 있다. 

인덱스를 사용하여 필요한 위치에 값을 할당한다. 

배열의 길이(length)는 마지막 인덱스를 기준으로 산정된다.

존재하지 않는 요소를 참조하면 undefined가 반환된다.

const arr = [];

console.log(arr[0]); // undefined

arr[1] = 1;

arr[3] = 3;

console.log(arr); // [ <1 empty item>, 1, <1 empty item>, 3 ]

console.log(arr.length); // 4

console.log(arr[2]) // undefined

 

 

2.2 배열 요소의 삭제
배열은 객체이기 때문에 배열의 요소를 삭제하기 위해 delete 연산자를 사용할 수 있다. 

 Array.prototype.splice 메소드를 사용하면 해당 요소를 완전히 삭제 가능

const numbersArr = ['zero', 'one', 'two', 'three'];

// 요소의 값만 삭제된다

delete numbersArr[3];

console.log(numbersArr); // [ 'zero', 'one', 'two', <1 empty item> ]

// 요소 값만이 아니라 요소를 완전히 삭제한다

// splice(시작 인덱스, 삭제할 요소수)

numbersArr.splice(3, 1);

console.log(numbersArr); // [ 'zero', 'one', 'two' ]

---

 

3. 배열의 순회
객체의 프로퍼티를 순회할 때 for…in 문을 사용한다. (순서를 보장하지 않음)

배열의 순회에는 forEach 메소드, for 문, for…of 문을 사용하는 것이 좋다.

const arr = [0,1,2,3,4,5]

for(let item of arr){

    console.log(item)

}

---

4. Array Property

4.1 Array.length
length 프로퍼티는 요소의 개수(배열의 길이)를 나타낸다. 

배열 인덱스는 32bit 양의 정수로 처리된다.

const arr = [1, 2, 3, 4, 5];

console.log(arr.length); // 5

 

주의할 것은 배열 요소의 개수와 length 프로퍼티의 값이 반드시 일치하지 않을 수 있다. (희소배열?)

 

 

length 프로퍼티의 값은 명시적으로 변경할 수 있다. 만약 length 프로퍼티의 값을 현재보다 작게 변경하면 변경된 length 프로퍼티의 값보다 크거나 같은 인덱스에 해당하는 요소는 모두 삭제된다.

const arr = [ 1, 2, 3, 4, 5 ];

// 배열 길이의 명시적 변경

arr.length = 3;

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

---

 

5. Array Method

5.1 Array.isArray(arg: any): boolean ES5
정적 메소드 Array.isArray는 주어진 인수가 배열이면 true, 배열이 아니면 false를 반환한다.

console.log(Array.isArray([1,2])) // true

console.log(Array.isArray({})) // false

console.log(isArray({})) // err

 

5.2 Array.from ES6
Array.from 메소드는 유사 배열 객체(array-like object) 또는 이터러블 객체(iterable object)를 변환하여 새로운 배열을 생성한다.

// 문자열은 이터러블이다.

const arr1 = Array.from('Hello');

console.log(arr1); // [ 'H', 'e', 'l', 'l', 'o' ]

 

str = "Hello"

let arr = str.split('');

console.log(arr) // [ 'H', 'e', 'l', 'l', 'o' ]

// 객체, 유사 배열 객체를 배열

const obj = { 0: 'a', 1: 'b', 2: 'c', length: 3 };

// Array.from()을 사용하여 객체를 배열로 변환

const arr2 = Array.from(obj);

console.log(arr2); // ['a', 'b', 'c']

// Array.from의 두번째 매개변수에게 배열의 모든 요소에 대해 호출할 함수를 전달할 수 있다.

// 이 함수는 첫번째 매개변수에게 전달된 인수로 생성된 배열의 모든 요소를 인수로 전달받아 호출된다.

const arr3 = Array.from({ length: 5 }, function (v, i) { return i; });

console.log(arr3); // [ 0, 1, 2, 3, 4 ]

 

5.3 Array.of ES6
Array.of 메소드는 전달된 인수를 요소로 갖는 배열을 생성한다.
Array.of는 인수가 1개이고 숫자이더라도 인수를 요소로 갖는 배열을 생성한다.

Array 생성자 함수는 매개변수가 1개이고 숫자인 경우, 전달된 숫자를 length 값으로 가지는 빈 배열을 생성한다.

const arr = new Array(2);

console.log(arr); // [ <2 empty items> ]

 

const arr1 = Array.of(2);

console.log(arr1); // [2]

const arr2 = Array.of('string',1,null);

console.log(arr2); // [ 'string', 1, null ]

 

5.4 Array.prototype.indexOf(searchElement: T, fromIndex?: number): number 🔒 ES5
원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환한다.

중복되는 요소가 있는 경우, 첫번째 인덱스를 반환한다.
해당하는 요소가 없는 경우, -1을 반환한다.

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

console.log(arr.indexOf(2));     // 1

console.log(arr.lastIndexOf(2))  // 3

console.log(arr.indexOf(10));    //-1    배열 arr에서 요소 10이 없으므로 -1을 반환

console.log(arr.indexOf(2, 2));  // 3    두번째는 검색을 시작할 인덱스이다. 생략시 처음부터 검색

console.log(arr.includes(4))     // true

 

 

5.5 Array.prototype.concat(…items: Array<T[] | T>): T[] 🔒 ES3
인수로 전달된 값들(배열 또는 값)을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다. 

let arr1 = [1, 2];

let arr2 = [3, 4];

// 배열 arr2를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환

// 인수로 전달한 값이 배열인 경우, 배열을 해체하여 새로운 배열의 요소로 추가한다.

let newArr = arr1.concat(arr2);

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

console.log(arr1) // [1, 2]

 

 

5.6 Array.prototype.join(separator?: string): string 🔒 ES1
원본 배열의 모든 요소를 문자열로 변환한 후, 구분자(separator)로 연결한 문자열을 반환한다. 

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

 

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

// 기본 구분자는 ','이다.

// 원본 배열 arr의 모든 요소를 문자열로 변환한 후, 기본 구분자 ','로 연결한 문자열을 반환

let result = arr.join();

console.log(result); // '1,2,3,4';

// 원본 배열 arr의 모든 요소를 문자열로 변환한 후, 빈문자열로 연결한 문자열을 반환

result = arr.join('');

console.log(result); // '1234'

// 원본 배열 arr의 모든 요소를 문자열로 변환한 후, 구분자 ':'로 연결한 문자열을 반환

result = arr.join(':');

console.log(result); // '1:2:3:4'

---

5.7 Array.prototype.push(…items: T[]): number ✏️ ES3
인수로 전달받은 모든 값을 원본 배열의 마지막에 요소로 추가하고 변경된 length 값을 반환한다. 

push 메소드는 원본 배열을 직접 변경한다.

const arr = [1, 2];

// 인수로 전달받은 모든 값을 원본 배열의 마지막에 요소로 추가하고 변경된 length 값을 반환한다.

let result = arr.push(3, 4);

console.log(result); // 4

// push 메소드는 원본 배열을 직접 변경한다.

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

 

 

push 와 concat 차이점

• push 메소드는 '배열 인수'에 대해서 그대로 '원본 배열'에 추가
• concat 메소드는 '배열 인수'를 해체해서 추가한 '새로운 배열'을 반환

 

push 메소드는 성능면에서 좋지 않다.length 프로퍼티를 사용하여 맨 뒤에 직접 요소를 추가하는 방법이 더 빠르다.

 

 

const arr1 = [1, 2];

const arr2 = [1, 2];

const arr3 = [1, 2];

// 원본 변경

arr1.push(3);

arr2[arr2.length] = 3

// 원본 유지

const newArr1 = arr3.concat([3])

const newArr2 = [...arr3, 3]

 

 

5.8 Array.prototype.pop(): T | undefined ✏️ ES3
원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환한다. 

원본 배열이 빈 배열이면 undefined를 반환한다. pop 메소드는 원본 배열을 직접 변경한다.

const arr1 = [1, 2];

arr1.push(3)

arr1.pop() // 3

arr1.pop() // 2

 

스택(stack) 구조를 구현 가능

 

5.9 Array.prototype.shift(): T | undefined ✏️ ES3
배열에서 첫요소를 제거하고 제거한 요소를 반환한다. 

만약 빈 배열일 경우 undefined를 반환한다. shift 메소드는 대상 배열 자체를 변경한다.

 

 

 

 

const arr = [2];

arr.push(3);    // 2 arr.length

arr.pop();        // 3 arr의 마지막 인덱스

arr.unshift(1)  // 2 arr.length

arr.shift()        // 1 arr의 0번 인덱스

---

 

5.10 Array.prototype.reverse(): this ✏️ ES1
배열 요소의 순서를 반대로 변경한다. 이때 원본 배열이 변경된다. 반환값은 변경된 배열이다.

const arr = [1,2,3];

console.log(arr.reverse()) // [ 3, 2, 1 ]

 

5.11 Array.prototype.slice(start=0, end=this.length): T[] 🔒 ES3
첫번째 매개변수 start에 해당하는 인덱스를 갖는 요소부터 매개변수 end-1 까지 복사한다. 원본 배열은 변경되지 않는다.

 

const arr = [0,1,2,3,4,5,-3,-2,-1];

console.log(arr.slice(1,4)) // [ 1, 2, 3 ]

console.log(arr.slice(2))   // [ 2, 3, 4, 5, -3, -2, -1 ]

console.log(arr.slice(-2))  // [ -2, -1 ]

 

 

얕은복사

const arr = [1, 2, 3];

// 원본 배열 arr의 새로운 복사본을 생성한다.

const copy = arr.slice();

console.log(copy, copy === arr); // [ 1, 2, 3 ] false

 

// 얕은복사를 통해 유사배열객체 -> Array

const arr2 = Array.prototype.slice.call(arguments);

// Spread 문법

const arr3 = [...arguments];

// Array.from 메소드는 유사 배열 객체를 복사하여 배열을 생성한다.

const arr4 = Array.from(arguments);

 

 

5.12 Array.prototype.splice(start: number, deleteCount=this.length-start, …items: T[]): T[] ✏️ ES3
기존의 배열의 요소를 제거하고 그 위치에 새로운 요소를 추가한다. 배열 중간에 새로운 요소를 추가할 때도 사용된다.

매개변수

• start : 배열에서의 시작 위치이다. start 만을 지정하면 배열의 start부터 모든 요소를 제거한다.
• deleteCount : 시작 위치(start)부터 제거할 요소의 수이다.  0인 경우, 아무런 요소도 제거되지 않는다. (옵션)
• items : 삭제한 위치에 추가될 요소들이다. 지정하지 않을 경우, 삭제만 한다. (옵션)
• 반환값 : 삭제한 요소들을 가진 배열이다.

const arr = [0,1,2,3,4,5,6,7]

// 삭제

console.log(arr.splice(2,3))  // [ 2, 3, 4 ]

console.log(arr)                   // [ 0, 1, 5, 6, 7 ]

// 삭제 후 추가

console.log(arr.splice(2,3,20,30,40))  // [ 5, 6, 7]

console.log(arr)                                   // [ 0, 1, 20, 30, 40 ]

// 특정 위치에 추가

console.log(arr.splice(3,0,100,200)) // []

console.log(arr)                                 // [ 0, 1, 20, 100, 200, 30, 40 ]

---

 

정리

Array.isArray([arr]) : arr이 array 이면 true
Array.from(유사배열객체) : 유사배열객체, 문자열을 배열로 반환
Array.of(a,b,c) : [a,b,c] 배열로 반환

arr.indexOf(search) : arr에서 search를 찾아 인덱스를 반환
arr.lastIndexOf(search) : 뒤에서부터 찾음
arr.includes(search) : arr 에서 search 요소가 존재하는지 확인하여 true/false 반환

arr1.concat(arr2) : arr1 뒤에 arr2를 추가한 새로운 배열 반환 
arr.join(구분자) : 배열을 문자열로 바꿔 반환

arr.reverse() : 배열 요소의 순서를 반대로 변경하여 반환

arr.push(a) : arr 맨 마지막에 a 를 추가하고 arr.length 를 반환
arr.pop() : arr 맨 마지막 요소를 제거하고 해당 요소를 반환 
arr.shift() : arr 첫 요소를 제거하고 해당 요소를 반환
arr.unshift(a) : arr 첫 요소에 a 를 추가하고 arr.length 를 반환

 

arr.slice(start,end) : arr의 start부터 end-1까지 새로운 배열로 반환
arr.splice(start,delete[,item1,item2]) : arr의 start 부터 delete 갯수만큼 제거하고 item 을 추가한다. 제거한 배열을 반환

 

 

배열은 String 과 Object 래퍼 객체와 다르게 Array.isArray 로 메소드를 사용해야 했다.

 

배열을 순회 할때는?
배열의 순회에는 forEach 메소드, for 문, for…of 문을 사용하는 것이 좋다.

 

 

https://chatgpt.com/