Section 7. 자바스크립트 배열의 기본 메서드들

I. 특정 값을 반호나하는 기본 메서드들

1. (정적) isArray - 배열인지 여부를 반환하는 메서드

console.log(
  Array.isArray([1, 2, 3]),
  Array.isArray('123'),
  Array.isArray('123'.split(''))
); //true false true

배열 여부를 boolean 값으로 반환한다.

 

2. at - 주어진 인자를 인덱스로 값을 반환하는 메서드

 at은 음수를 사용하여 뒤에서부터 접근이 가능하다는 사실을 전에 배웠다.

 

const arr = [
  '한놈', '두시기', '석삼', '너구리', '오징어'
];

console.log(
  arr.at(1), arr.at(2)
); //두시기 석삼

console.log(
  arr.at(-1), arr.at(-2)
); //오징어 너구리

 

3. includes - 인자로 주어진 요소 유무를 확인하는 메서드

const arr = [1, 2, 3, 'abc', true];

console.log(
  arr.includes(2),
  arr.includes('abc'),
  arr.includes(true),
); //true true true

인자에 해당 요소가 있으면 true 아니면 false를 반환한다.

 

참조형 데이터의 경우는 다음과 같다

const obj1 = { x: 1, y: 2 };
const obj2 = { x: 1, y: 2 };

const arr = [
  obj1,
  { x: 3, y: 4 }
];

console.log(
  arr.includes(obj1),
  arr.includes(obj2),
  arr.includes({ x: 1, y: 2 }),
  arr.includes({ x: 3, y: 4 })
); //true false false false

두 번째 출력문은 obj1과 값이 같은데도 첫 번째 출력문에서는 true를 반환했고 이번에는 false를 반환했다. 그 이유는 참조형 데이터이기 때문에 비록 같은 값을 가지고 있어도 그 값이 다른 주소를 참조하고 있는 값이여서 obj1 = obj2가 될 수 없는 것이다.

 

4. indexOf, lastIndexOf - 앞에서 첫 번째 값의 인덱스를 반환하는 그리고 마지막으로 그 값의 인덱스를 반환하는 메서드

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

console.log(
  arr.indexOf(2),
  arr.lastIndexOf(2),
  arr.indexOf(4)
); //1 3 -1

 

5. join - 인자로 주어진 값으로 구분하여 요소들을 문자열로 연결하여 반환하는 메서드

*원본값이 바뀌는 것은 아니다.

const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = [
  1, true, null, undefined, '가나다', { x: 0 }, [1, 2, 3]
];

console.log(
  arr1.join()
); //a,b,c,d,e

인자가 없으면 , 로 구분하여 반환한다.

console.log(
  arr1.join('')
); //abcde

console.log(
  arr1.join(' ')
); //a b c d e

console.log(
  arr2.join(':')
); //1:true:::가나다:[object Object]:1,2,3

마지막 출력문을 보면 null이나 undefined는 공백으로 무시가 된 것을 볼 수 있다. 

 

II. 배열을 변경하는 기본 메서드들

1. push, unshift - 배열에 값을 추가하는 메서드

결과의 길이를 반환한다.

 

push - 값을 뒤에 추가한다

const arr = [1, 2, 3];
const x = arr.push(4);

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

const y = arr.push(5, 6, 7); // 최종 길이 반환

console.log(y, arr); //7 (7) [1, 2, 3, 4, 5, 6, 7]

 

unshift - 값을 앞에 추가한다

const arr = [5, 6, 7];
const x = arr.unshift(4);

console.log(x, arr); //4 (4) [4, 5, 6, 7]

const y = arr.unshift(1, 2, 3);

console.log(y, arr); //7 (7) [1, 2, 3, 4, 5, 6, 7]

두 메서드들의 특징을 비교해보면 다음과 같다

• 수정된 배열의 길이를 반환한다.
• 부수효과가 일어난다 - 원본 배열을 변경한다.
• push 보다 unshift가 더 느리다. 이유는 이후 요소들을 밀어내야 하기때문이다.

2. pop, shift - 배열에서 값을 제거하여 반환하는 메서드

 

pop - 값을 뒤에서 제거하여 반환한다.

const arr = [1, 2, 3, 4, 5];
const x = arr.pop();

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

const y = arr.pop();

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

 

shift - 값을 앞에서 제거하여 반환한다.

const arr = [1, 2, 3, 4, 5];
const x = arr.shift();

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

const y = arr.shift();

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

역시 pop보다 shift가 더 느리다. 이유는 이후 요소들을 당겨야 해서 그렇다.

 

3. splice - 원하는 위치에 요소(들)을 추가 및 삭제하는 메서드

2개 이상의 인자를 받는다.

• start : 배열 변경을 시작할 위치
• deleteCount : 제거할 요소의 개수
• item(s) : 추가할 하나 이상의 요소

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

// 2번 인덱스부터 2개 요소 제거
arr.splice(2, 2);

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

// 3번 인덱스부터 요소 제거 없이 'a' 추가
arr.splice(3, 0, 'a');

console.log(arr); //(6) [1, 2, 5, 'a', 6, 7]

// 1번 인덱스부터 3개 요소 제거 후 '가', '나', '다' 추가
arr.splice(1, 3, '가', '나', '다');

console.log(arr); //(6) [1, '가', '나', '다', 6, 7]

 

배열의 delete는 empty 값을 남긴다.

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

console.log(arr); //(5) [1, 2, 비어 있음, 4, 5]

때문에 배열의 값 삭제에는 splice를 사용한다.

arr.splice(2, 1);

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

 

4. fill - 배열을 특정 값으로 채우는 메서드

// 중간의 빈 값도 채움
const arr1 = [1, 2, , , 4, 5];
arr1.fill(7);

console.log('1.', arr1); //1. (6) [7, 7, 7, 7, 7, 7]

빈 값도 7로 채워지는 것을 볼 수 있다.

// 💡 특정 값으로 채운 배열 생성시 유용
const arr2 = new Array(10);
arr2.fill(1);

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

arr2.fill(2, 3);

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

인자가 둘일 때 : (채울 값, ~부터) 식으로 작동한다.

arr2.fill(3, 6, 9);

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

인자가 셋일 때 : (채울 값, ~ 부터, ~전까지)

 

5. reverse - 배열의 순서를 뒤집는 매서드

const arr = [1, 2, 3, 4, 5, 6, 7];
console.log(arr); //(7) [1, 2, 3, 4, 5, 6, 7]

reverse 메서드 자체도 뒤집힌 배열을 반환한다.

arrRev = arr.reverse();

// 원본 배열 뒤집힘
console.log(arr, arrRev); //(7) [7, 6, 5, 4, 3, 2, 1] (7) [7, 6, 5, 4, 3, 2, 1]

 

III. 새 배열을 반환하는 기본 메서드

특성은 다음과 같다

• 원본 배열을 수정하지 않는다. 
• 얕은 복사본이다.

1. concat - 배열에 다른 배열이나 값을 이어붙인 결과를 반환하는 메서드

const arr1 = [1, 2, 3];
const arr2 = ['a', 'b', 'c'];
const arr3 = [true, false];

const arr4 = arr1.concat(arr2);

console.log(arr4); //(6) [1, 2, 3, 'a', 'b', 'c']

const arr6 = arr1.concat('ABC', arr2, arr3, 100);

console.log(arr6); //(10) [1, 2, 3, 'ABC', 'a', 'b', 'c', true, false, 100]

console.log(arr1, arr2, arr3); //(3) [1, 2, 3] (3) ['a', 'b', 'c'] (2) [true, false]

해당 배열 뒤로 인자로 하나 이상 주어진 다른 배열이나 값을 이어붙인 결과를 반환하는 것을 볼 수 있다.

 

2. slice - 인자로 주어진 범주의 값을 잘라 반환하는 메서드

특성은 다음과 같다

• 1~2개 인자를 받는다.
• begin : 시작 위치
• end : 종료 위치
• 원본에는 영향을 주지 않는다.

const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const arr2 = arr1.slice(3);
const arr3 = arr1.slice(3, 7);

console.log(arr2, arr3); //(6) [4, 5, 6, 7, 8, 9] (4) [4, 5, 6, 7]

 

3. flat - 인자로 주어진 깊이 만큼 배열을 펼쳐 반환하는 메서드

[
  1,
  [2, 3],
  [4, 5, 6],
  7
]

↓ ↓ ↓

[
  1,
  2,
  3,
  4,
  5,
  6,
  7
]

이런 식으로 평평하게 한다는 의미이다. 역시 원본에는 영향을 주지 않는다.

const orgArr = [
  1, 2,
  [3, 4],
  [5, [6, [7, 8]]]
];

// 인자가 없으면 1을 넣은 것과 같음
const arr0 = orgArr.flat();
const arr1 = orgArr.flat(1);

const arr2 = orgArr.flat(2);
const arr3 = orgArr.flat(3);

console.log('N:', arr0); //N: (6) [1, 2, 3, 4, 5, Array(2)]
console.log('1:', arr1); //1: (6) [1, 2, 3, 4, 5, Array(2)]
console.log('2:', arr2); //2: (7) [1, 2, 3, 4, 5, 6, Array(2)]
console.log('3:', arr3); //3: (8) [1, 2, 3, 4, 5, 6, 7, 8]