[JavaScript] 배열 심화

배열 판별

Array.isArray()

주어진 인자가 배열인지를 판별하여, 배열이라면 true, 아니라면 false를 반환한다.

const arr = ['hello', 'world'];
const str = 'hello world';

console.log(Array.isArray(arr)); // true
console.log(Array.isArray(str)); // false

 

배열 생성

Array.from()

반복 가능한 객체 또는 유사 배열 객체를 복사해 새로운 배열 객체를 반환한다. 두 번째 인자에 선택적으로 매핑할 함수를 지정할 수 있으며, 이 경우 주여진 배열을 복사할 때 각각의 요소에 지정된 함수를 실행하고 그 결과를 배열로 반환한다.

const arr = [1, 2, 3, 4, 5];
const newArr = Array.from(arr);

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

function plusTwo(number) {
	return number + 2;
    }

const newArr2 = Array.from(arr, plusTwo);
console.log(newArr2); // [3, 4, 5, 6, 7]

 

Array.of()

인자의 개수나 데이터 타입에 무관하게 가변적인 인자를 가지는 새로운 배열을 반환한다.

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

 

Array()와 Array.of()는 동일한 기능을 하는 것처럼 보이지만, 실제로는 그렇지 않다. Array(3)은 3개의 빈 요소를 가진 배열을 반환하지만 Array.of(3)은 3을 요소로 가진 배열을 반환한다.

 

배열 요소 조작

push()

배열의 끝에 하나 이상의 요소를 추가하고, 변경된 배열의 길이를 반환한다.

const arr =  [1, 2, 3];

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

 

pop()

배열의 끝에서 하나의 요소를 제거하고, 해당 요소를 반환한다.

const arr = [1, 2, 3];

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

 

unshift()

배열의 앞쪽에 하나 이상의 요소를 추가하고, 변경된 배열의 길이를 반환한다.

const arr = [1, 2, 3];

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

 

shift()

배열의 첫 번째 요소를 제거하고, 제거한 요소를 반환한다.

const arr = [1, 2, 3];

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

 

배열과 반복

forEach()

주어진 함수를 배열 요소 각각에 대해 실행하는 메서드로, 필수 인자로 실행할 함수가 요구된다. forEach()는 원본 배열의 값을 변경하거나, 값을 리턴하지 않는다.

const arr = [1, 2, 3];

arr.forEach((number, index) => {
	console.log(`${index + 1}번째 요소 : ${number}`);
    });
/*
1번째 요소 : 1
2번째 요소 : 2
3번째 요소 : 3
*/

 

배열 요소 검색과 정렬

includes()

배열이 주어진 요소를 포함하는지 여부에 따라 boolean 값을 반환한다.

 

find()

주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다. 만약 반환할 값을 찾지 못한 경우 undefined를 반환한다.

const arr = ['hello', 'world', 'hi', 'friend'];
const key = arr.find((value) => value.length < 3);

console.log(key); // hi

 

findIndex()

주어진 판별 함수를 만족하는 첫 번째 요소의 인덱스를 반환한다. 만약 만족하는 요소가 없다면 -1을 반환한다.

const arr = [1, 2, 3, 4, 5];
const key = arr.findIndex((number) => number > 3);

console.log(key); // 3

 

sort()

배열을 정렬한 다음 해당 배열을 반환한다. 이때 정렬의 순서는 기본적으로 문자열의 유니코드 순서에 따르기 때문에 숫자 정렬의 경우 정확하지 않을 수도 있으며, 반환되는 배열은 새로운 배열이 아니라 원본 배열이 수정됨에 주의해야 한다.

const arr = [10, 3, 50, 23, 11];
const str = ['a', 'g', 'u', 'b'];

console.log(arr.sort()); // [10, 11, 23, 3, 50]
console.log(str.sort()); // ['a', 'b', 'g', 'u']
console.log(arr); // [10, 11, 23, 3, 50]
console.log(str); // ['a', 'b', 'g', 'u']

 

배열 요소 수정

fill()

배열을 지정한 값으로 채우며, 원본 배열을 수정한다. fill()은 필수 인자인 배열을 채울 값과 선택 인자인 시작 인덱스, 끝 인덱스를 가진다.

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

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

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

 

slice()

배열의 복사본을 조각 내 새로운 배열로 반환하며, 선택적으로 시작 인덱스와 종료 인덱스를 가질 수 있다.

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

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

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

 

 

splice()

필수 인자로 시작 인덱스가 요구되며, 선택 인자로 배열에서 제거할 요소의 개수와 배열에 추가할 요소를 가질 수 있다. splice()는 원본 배열 자체를 수정함에 주의해야 한다.

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

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

const arr = [1, 2, 3, 4, 5];
console.log(arr.splice(2, 0, 10));
console.log(arr); // [1, 2, 10, 3, 4, 5]

 

기타 배열 메서드

join()

배열의 모든 요소를 이어붙여 하나의 문자열로 반환하며, 선택적으로 각각의 요소를 구분할 문자를 인자로 가질 수 있다.

const arr = ['hello', 'wrold', 'hi'];

console.log(arr.join()); // hello,wrold,hi
console.log(arr.join("/")); // hello/wrold/hi

 

concat()

인자로 주어진 배열을 기존 배열에 합쳐 새로운 배열로 반환한다.

const arr = ['hello', 'world', 'hi'];
const addArr = ['123', '456'];

console.log(arr.concat(addArr)); // ['hello', 'world', 'hi', '123', '456']
console.log(arr.concat('java', 'script')); // ['hello', 'world', 'hi', 'java', 'script']

 

filter()

주어진 판별 함수의 결과값이 참인 요소들만 모아 새로운 배열로 반환하며, 필수 인자로 실행할 함수가 요구된다. 이때 만약 판별 함수의 테스트를 통과한 요소가 없다면 빈 배열이 반환된다.

const arr = [10, 20, 100, 40, 2, 33, 235, 11];
const newArr = arr.filter((number) => number > 99);

console.log(newArr); // [100, 235]

 

reduce()

필수 인자로 리듀서 함수를, 선택인자로 리듀서 함수에 제공할 초깃값을 가질 수 있으며, 배열의 각 요소에 대해 주어진 리듀서 함수를 실행한 뒤, 하나의 값을 반환한다. 리듀서 함수는 필수 인자로 누산기와 현재 값을 가지며, 선택 인자로 현재 요소의 인덱스와 reduce()를 호출한 원본 배열을 가질 수 있다.

const arr = [1, 2, 3, 4, 5];
const reducer = (acc, value) => acc + value;
console.log(arr.reduce(reducer)); // 15
console.log(arr.reduce(reducer, 10)); // 25