[Javascript] 배열

모던 자바스크립트 Deep Dive 정리

1. 배열의 생성

1.1 배열 리터럴

// 배열 선언1
const emptyArr = [];

console.log(emptyArr[1]); // undefined
console.log(emptyArr.length); // 0

// 배열 선언2
const arr = [
  'zero', 'one', 'two', 'three', 'four',
  'five', 'six', 'seven', 'eight', 'nine'
];

- 자바스크립트 배열은 어떤 데이터 타입의 조합이라도 포함 가능함.

const arr = [
  'string',
  10,
  true,
  null,
  undefined,
  NaN,
  Infinity,
  ['nested array'],
  { object: true },
  function () {}
];

1.2 Array() 생성자 함수

// 매개변수가 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 배열 요소의 추가

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

arr[1] = 1;
arr[3] = 3;

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

2.2 배열 요소의 삭제

- 배열은 객체이기 때문에 배열의 요소를 삭제하기 위해 delete 연산자를 사용

- delete로 요소 삭제 시 length에는 변함이 없음

- 해당 요소를 완전히 삭제하여 length에도 반영되게 하기 위해서는 Array.prototype.splice 메소드를 사용

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

// 요소의 값만 삭제된다
delete numbersArr[2]; // (4) ["zero", "one", empty, "three"]
console.log(numbersArr);

// 요소 값만이 아니라 요소를 완전히 삭제한다
// splice(시작 인덱스, 삭제할 요소수)
numbersArr.splice(2, 1); // (3) ["zero", "one", "three"]
console.log(numbersArr);

 

3. 배열의 순회

- 배열의 순회에는 forEach 메소드, for 문, for…of 문을 사용(for...in은 객체에 사용)

const arr = [0, 1, 2, 3];
arr.foo = 10;

for (const key in arr) {
  console.log('key: ' + key, 'value: ' + arr[key]);
}
// key: 0 value: 0
// key: 1 value: 1
// key: 2 value: 2
// key: 3 value: 3
// key: foo value: 10 => 불필요한 프로퍼티까지 출력

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

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

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

 

4. Array Property

4.1 Array.length

- length 프로퍼티는 요소의 개수(배열의 길이)

 

5. Array Method

5.1 Array.isArray(arg: any): boolean

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

5.2 Array.from

- 유사 배열 객체(array-like object) 또는 이터러블 객체(iterable object)를 변환하여 새로운 배열을 생성

// 문자열은 이터러블이다.
const arr1 = Array.from('Hello');
console.log(arr1); // [ 'H', 'e', 'l', 'l', 'o' ]

// 유사 배열 객체를 새로운 배열을 변환하여 반환한다.
const arr2 = Array.from({ length: 2, 0: 'a', 1: 'b' });
console.log(arr2); // [ 'a', 'b' ]

// 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

-  Array.of 메소드는 전달된 인수를 요소로 갖는 배열을 생성

// 전달된 인수가 1개이고 숫자이더라도 인수를 요소로 갖는 배열을 생성한다.
const arr1 = Array.of(1);
console.log(arr1); // // [1]

const arr2 = Array.of(1, 2, 3);
console.log(arr2); // [1, 2, 3]

const arr3 = Array.of('string');
console.log(arr3); // 'string'

5.4 array.indexOf(element, index): number

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

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

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

// 배열 arr에서 요소 2를 검색하여 첫번째 인덱스를 반환
arr.indexOf(2);    // -> 1
// 배열 arr에서 요소 4가 없으므로 -1을 반환
arr.indexOf(4);    // -1
// 두번째 인수는 검색을 시작할 인덱스이다. 두번째 인수를 생략하면 처음부터 검색한다.
arr.indexOf(2, 2); // 2

const foods2 = ['apple', 'banana'];

// ES7: Array.includes
// foods2 배열에 'orange' 요소가 존재하는지 확인
if (!foods2.includes('orange')) {
  // foods2 배열에 'orange' 요소가 존재하지 않으면 'orange' 요소를 추가
  foods2.push('orange');
}

console.log(foods2); // ["apple", "banana", "orange"]

5.5 Array.concat(...e: Array<T[] | T>): T[]

- 인수로 전달된 값들(배열 또는 값)을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환

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

- 원본 배열은 변경되지 않음

const arr1 = [1, 2];
const arr2 = [3, 4];

// 배열 arr2를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환
// 인수로 전달한 값이 배열인 경우, 배열을 해체하여 새로운 배열의 요소로 추가한다.
let result = arr1.concat(arr2);
console.log(result); // [1, 2, 3, 4]

// 숫자를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환
result = arr1.concat(3);
console.log(result); // ["1, 2, 3]

//  배열 arr2와 숫자를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환
result = arr1.concat(arr2, 5);
console.log(result); // [1, 2, 3, 4, 5]

// 원본 배열은 변경되지 않는다.
console.log(arr1); // [1, 2]

5.6 Array.join(separator?: string): string

- 원본 배열의 모든 요소를 문자열로 변환한 후, 인수로 전달받은 값, 즉 구분자(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.push(...e: T[]): number

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

- push 메소드는 원본 배열을 직접 변경

5.8 Array.pop: T| undefined

- 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환

- 원본 배열이 빈 배열이면 undefined를 반환

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

5.9 Array.reverse(): this

- 배열 요소의 순서를 반대로 변경

- 원본 배열이 변경

- 반환값은 변경된 배열

const a = ['a', 'b', 'c'];
const b = a.reverse();

// 원본 배열이 변경된다
console.log(a); // [ 'c', 'b', 'a' ]
console.log(b); // [ 'c', 'b', 'a' ]

5.10 Array.shift(): T | undefined

- 배열에서 첫요소를 제거하고 제거한 요소를 반환

- 빈 배열일 경우 undefined를 반환

- shift 메소드는 대상 배열 자체를 변경한다.

const a = ['a', 'b', 'c'];
const c = a.shift();

// 원본 배열이 변경된다.
console.log(a); // a --> [ 'b', 'c' ]
console.log(c); // c --> 'a'

5.11 Array.slice(start=0, end=this.length): T []

- 인자로 지정된 배열의 부분을 복사하여 반환

- 원본 배열은 변경되지 않는다.

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

- start복사를 시작할 인텍스. 음수인 경우 배열의 끝에서의 인덱스를 나타낸다. 예를 들어 slice(-2)는 배열의 마지막 2개의 요소를 반환

- end옵션이며 기본값은 length 값

const items = ['a', 'b', 'c'];

// items[0]부터 items[1] 이전(items[1] 미포함)까지 반환
let res = items.slice(0, 1);
console.log(res);  // [ 'a' ]

// items[1]부터 items[2] 이전(items[2] 미포함)까지 반환
res = items.slice(1, 2);
console.log(res);  // [ 'b' ]

// items[1]부터 이후의 모든 요소 반환
res = items.slice(1);
console.log(res);  // [ 'b', 'c' ]

// 인자가 음수인 경우 배열의 끝에서 요소를 반환
res = items.slice(-1);
console.log(res);  // [ 'c' ]

res = items.slice(-2);
console.log(res);  // [ 'b', 'c' ]

// 모든 요소를 반환 (= 복사본(shallow copy) 생성)
res = items.slice();
console.log(res);  // [ 'a', 'b', 'c' ]

// 원본은 변경되지 않는다.
console.log(items); // [ 'a', 'b', 'c' ]

5.12 Array.splice(start: number, deleteCount=this.length-start, ...items: T[]): T[]

- 기존의 배열의 요소를 제거하고 그 위치에 새로운 요소를 추가

- 배열 중간에 새로운 요소를 추가할 때도 사용

- start배열에서의 시작 위치. start 만을 지정하면 배열의 start부터 모든 요소를 제거

- deleteCount시작 위치(start)부터 제거할 요소의 수

- deleteCount가 0인 경우, 아무런 요소도 제거되지 않음.(옵션)

- items삭제한 위치에 추가될 요소들이다. 만약 아무런 요소도 지정하지 않을 경우, 삭제만 한다.(옵션)

- 반환값 삭제한 요소들을 가진 배열

- 가장 일반적인 사용은 배열에서 요소를 삭제할 때

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

// items[1]부터 2개의 요소를 제거하고 제거된 요소를 배열로 반환
const res1 = items1.splice(1, 2);

// 원본 배열이 변경된다.
console.log(items1); // [ 1, 4 ]
// 제거한 요소가 배열로 반환된다.
console.log(res1);   // [ 2, 3 ]

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

// items[1]부터 모든 요소를 제거하고 제거된 요소를 배열로 반환
const res2 = items2.splice(1);

// 원본 배열이 변경된다.
console.log(items2); // [ 1 ]
// 제거한 요소가 배열로 반환된다.
console.log(res2);   // [ 2, 3, 4 ]