[Nodejs] 코딩 테스트 필수 테크닉: Array

자바스크립트로 코딩 테스트를 볼 때 반드시 알아야 Array 관련 함수에 대해 알아보자

 

 

Array.prototype.forEach

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

배열의 각 원소에 대해 callback 함수를 호출한다.

(callback함수의 매개변수: (현재 요소 값, 현재 인덱스 번호, 원본 배열))

 

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

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

간편하지만, 반복 중간에 중지하고 싶어도 그럴 수 없다.

(무조건 처음부터 끝까지 순회한다)

 

Array.prototype.every

// 화살표 함수
every((element) => { ... } )
every((element, index) => { ... } )
every((element, index, array) => { ... } )

// 콜백 함수
every(callbackFn)
every(callbackFn, thisArg)

// 인라인 콜백 함수
every(function callbackFn(element) { ... })
every(function callbackFn(element, index) { ... })
every(function callbackFn(element, index, array){ ... })
every(function callbackFn(element, index, array) { ... }, thisArg)

every는 forEach와 달리 중간에 반복을 멈출 수 있다.

 

콜백의 리턴값이 true인 경우 다음 원소로 다시 callback을 호출하는 것을 반복하지만

false인 경우 반복을 멈춘다.

(callback함수의 매개변수: (현재 요소 값, 현재 인덱스 번호, 원본 배열))

 

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true

Array.prototype.map

arr.map(callback(currentValue[, index[, array]])[, thisArg])

배열의 각 원소에 대해 callback 함수를 호출하고, 그 callback의 리턴값으로 이루어진 새로운 배열을 만들어 리턴한다.

(callback함수의 매개변수: (현재 요소 값, 현재 인덱스 번호, 원본 배열))

 

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

새로운 배열을 만들기 위함이 아니더라도, 

각 원소에 대해 반복하기 위해서도 사용한다.

Array.prototype.filter

arr.filter(callback(element[, index[, array]])[, thisArg])

배열의 각 원소들에 대해 callback을 호출하는데,

이 callback의 리턴값이 true인 원소들로만 이루어진 새로운 배열(필터링된 배열)을 만든다.

(callback함수의 매개변수: (현재 요소 값, 현재 인덱스 번호, 원본 배열))

 

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

 

Array.prototype.reduce

arr.reduce(callback[, initialValue])

initalValue부터 시작해 배열의 각 원소들에 대해 callback을 호출하여 누적값을 계산한다.

 

reduce는 콜백을 받는 다른 Array함수와는 조금 다르다.

 

콜백의 첫 인자가 acc(누적값)이고, 나머지가 하나씩 뒤로 밀린 형태이므로, 사용할 때 주의하자.

(callback함수의 매개변수: (누적값, 현재 요소 값, 현재 인덱스 번호, 원본 배열))

 

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

Array.prototype.indexOf

arr.indexOf(searchElement[, fromIndex])

주어진 원소가 몇번 index에 있는지 리턴하는 함수이다.

 

찾았을 경우 해당 원소의 index, 찾지 못했을 경우 -1을 리턴한다.

 

var array = [2, 9, 9];
array.indexOf(2);     // 0
array.indexOf(7);     // -1
array.indexOf(9, 2);  // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0

(두 번쨰 매개변수는 탐색을 시작할 인덱스; 기본값 0)

 

주의! 이 함수는 콜백을 받는게 아니라 찾고자 하는 원소를 입력받는다.

따라서 object, array 타입인 경우 참조 값을 직접 전달하는 게 아니라면 찾을 수 없다.

 

const arr1= [{name: 'asd'}];

//return -1 (not found)
//{}=== {} 의 결과가 false 임에 유의하자.
console.log(arr1.indexOf({name: 'asd'}));


const arr2= [[1,2]];

//return -1 (not found)
//[] === [] 의 결과가 false임에 유의하자.
console.log(arr2.indexOf([1,2]));

 

Array.prototype.findIndex

arr.findIndex(callback(element[, index[, array]])[, thisArg])

indexOf를 콜백 형태로 사용할 때 findIndex를 사용한다.

 

배열의 각 원소에 대해 순차적으로 callback을 호출하고,

callback에서 true를 리턴할 경우 탐색을 종료하고 그 원소의 인덱스를 반환한다.

(callback함수의 매개변수: (현재 요소 값, 현재 인덱스 번호, 원본 배열))

 

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// expected output: 3

 

Array.prototype.fill

fill(value)
fill(value, start)
fill(value, start, end)

배열의 원소를 value로 모두 채운다.

 

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

// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]

// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]

console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]

 

이 함수는 길이가 n인 배열을 만들 때 유용하다.

 

왜냐면

Array(6).forEach(console.log)

이건 6번 반복할 것으로 기대하지만, 값이 전부 empty라서 0번 반복한다.

 

따라서 fill로 무의미한 값을 먼저 채워줘야 정상적으로 순회할 수 있다.

 

Array(6).fill(0).forEach(console.log)

이제 콘솔에 6번 찍힌다.

Array.prototype.sort

arr.sort([compareFunction])

배열을 주어진 콜백 함수의 결과에 따라 정렬한다.

 

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);

// [1, 2, 3, 4, 5]

주의! sort는 원본 배열을 변형시킨다.

만약 원본 배열은 보존하고 싶을 경우 arr.slice().sort(...) 처럼 slice()로 값을 복사한 후 정렬해야 한다.

 

Array.prototype.slice

arr.slice([begin[, end]])

arr를 begin부터 end까지 잘라 새로운 배열을 리턴한다.

 

begin의 기본값은 0, end의 기본값은 배열의 길이이다.

(end에 해당하는 인덱스는 제외된다; end 전까지의 요소만 추출된다)

 

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

이 함수는 배열을 복사할 때(얕은 복사) 아주 유용하다.

const arr= [1,2,3];
//copied= [1,2,3];
const copied= arr.slice();

copied[0]= 0;

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

 

Array.prototype.splice

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

배열의 startIndex부터 deleteCount만큼 요소를 제거한다.

(리턴값 없음)

 

만약 매개변수가 3개 이상 전달될 경우, 제거한 위치에 itemN을 차례로 대체시킨다.

 

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

 

주의! splice는 원본 배열을 변형시키며, 아무 값도 리턴하지 않는다.

함수 이름이 비슷한 slice와 헷갈리지 않도록 하자.

 

Array.prototype.join

arr.join([separator])

배열의 각 요소를 구분자를 이용해 하나의 문자열로 합친다.

 

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

 

Array.prototype.reverse()

arr.reverse()

배열의 순서를 거꾸로 뒤집는다.

 

const a = [1, 2, 3];
console.log(a); // [1, 2, 3]

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

 

주의! reverse는 원본 배열을 변형시킨다.

 

전개 연산자 (전개 구문)

...arr

배열 앞에 ...을 붙여 배열을 전개시킬 수 있다.

 

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

const arr3= [...arr1, ...arr2];
//arr3= [1,2,3,4,5,6]

 

비구조화 할당 (구조 분해 할당)

const arr= [1,2];

const [a,b]= arr;
//a=1, b=2

arr을 다른 값에 할당할 때, []로 씌워 할당하면 해당 배열의 인덱스 위치에 있는 값들을 차례로 할당한다.