[Javascript] array 관련 함수
새로운 Array 생성
1. 값이 정해지지 않은 배열 생성하기
let arr1 = [];
let arr2 = new Array();
console.log(arr1);
// Expected output : Array []
console.log(arr2);
// Expected output : Array []
대괄호('[]')를 이용하거나 Array() 생성자 함수를 통해 새로운 배열을 생성할 수 있다.
Javascript에서는 배열의 크기가 동적으로 변경될 수 있기에 인덱스로 배열 내에 요소를 추가할 수 있으며 값이 지정되지 않은 인덱스의 경우, undefined의 값이 출력된다.
2. 초기 배열의 크기를 지정한 배열 생성하기
let arr3 = [,,,];
let arr4 = new Array(4);
console.log(arr3);
// Expected output : Array [undefined, undefined, undefined]
console.log(arr4);
// Expected output : Array [undefined, undefined, undefined, undefined]대괄호 내부의 쉼표의 개수나 Array() 생성자 내에 숫자를 입력함으로 초기 배열의 크기를 지정할 수 있다.
3. 특정 요소로 채워진 배열 생성 - fill() 함수
let arr5 = [,,,,,].fill("x");
let arr6 = Array(6).fill(0);
console.log(arr5);
// Expected output : Array ["X", "X", "X", "X", "X"]
console.log(arr6);
// Expected output : Array [0, 0, 0, 0, 0, 0]fill() 함수를 통해 생성한 배열에 원하는 값으로 배열을 채울 수 있다.
3-1. 인덱스에 따라 변하는 값을 갖는 배열 생성
const arr7 = Array(10).fill().map((arr, i) => i);
const arr8 = Array.from(new Array(10), (x,i) => (i+1) * 2);
console.log(arr7);
// Expected output : Array [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr8);
// Expected output : Array [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]fill() 함수와 map(콜백함수()) 함수를 사용하여 두 번째 인자를 사용하여 해당 인덱스를 값으로 갖도록 하거나
from(배열, 매핑함수()) 함수를 통해 값을 설정할 수 있다.
4. 기존의 배열로 새로운 배열 생성 - map() 함수
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]기존 배열 요소들에 주어진 함수를 실행한 결과를 통해 새로운 함수를 생성
사용한 기존 배열은 map() 함수로 변경되지 않음
특정 요소 찾기
1. find()
const array1 = [5, 12, 8, 130, 44];
const found = array1.find((element) => element > 10);
console.log(found);
// Expected output: 12배열의 각 요소를 돌며 콜백함수를 실행해 조건에 부합한 첫 번째 요소를 반환하는 함수
콜백함수에 부합한 요소가 없다면 undefined를 반환한다.
2. some()
const array = [1, 2, 3, 4, 5];
// Checks whether an element is even
const even = (element) => element % 2 === 0;
console.log(array.some(even));
// Expected output: true배열의 각 요소를 돌며 조건에 부합한 요소가 적어도 하나가 있는지 확인하는 함수로 있다면 true를, 없으면 false를 반환
3. findIndex()
const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = (element) => element > 13;
console.log(array1.findIndex(isLargeNumber));
// Expected output: 3배열의 각 요소를 돌며 조건에 부합하는 첫 번째 요소의 인덱스를 반환하는 함수
만족하는 요소가 없다면 -1를 반환한다.
4. indexOf()
const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison'));
// Expected output: 1배열 내에 주어진 요소와 일치하는 첫 번째 인덱스를 반환하는 함수
만족하는 요소가 없다면 -1를 반환한다.
findIndex()는 내부에 찾고자 하는 요소의 판별 함수를, indexOf()는 내부에 찾고자 하는 요소를 넣는다는 차이점이 있다.
5. includes()
const array1 = [1, 2, 3];
console.log(array1.includes(2));
// Expected output: true배열 내에 주어진 요소가 포함되어 있다면 true를, 없다면 false를 반환하는 함수
indexOf() 함수와 includes() 함수는 삼중등호비교(===)를 통해 요소들을 비교한다("3"과 3, 0과 false는 false 값을 반환)
Array 수정
1. slice(begin, end)
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]주어진 배열의 begin부터 end까지 복사본을 만들어 새로운 배열을 생성하는 함수로 기존 함수는 변경되지 않음
begin : 추출 시작점을 의미하며 정의되지 않은 경우 0부터 시작하며 배열의 크기보다 큰 값일 경우, 빈 배열을 반환함
end : 추출 종료점을 의미하며 해당 인덱스는 포함되지 않는다. end가 정의되지 않거나 배열의 크기보다 큰 값일 경우, 배열의 끝까지 출력함
2. splice(start, deleteCount, opt(item1, item2, ...))
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"]배열의 기존 요소를 삭제하거나 새로운 요소를 추가하여 배열을 변경하는 함수
start : 변경을 시작할 배열의 인덱스를 의미하며 음수 값도 설정 가능함
deleteCount : 배열에서 제거할 요소 개수를 의미하여 생략하거나 시작 위치부터 마지막 요소까지의 길이보다 크면 모든 요소를 삭제한다. 0보다 작으면 삭제하지 않으나 이때에는 새로운 요소를 지정해야 함
opt(item1, item2, ...) : 배열에 새롭게 추가할 요소를 의미하여 없는 경우 요소를 추가하지 않음
Array 순회
1. forEach(callback)
const array1 = ['a', 'b', 'c'];
array1.forEach((element) => console.log(element));
// Expected output: "a"
// Expected output: "b"
// Expected output: "c"각 배열 요소를 돌며 제공된 함수를 실행하는 함수
2. reduce(callback)
const array1 = [1, 2, 3, 4];
// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
(accumulator, currentValue) => accumulator + currentValue,
initialValue,
);
console.log(sumWithInitial);
// Expected output: 10
배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고, 하나의 결과값을 반환하는 함수
리듀서 함수는 누산기, 현재 값, 현재 인덱스, 원본 배열 4개의 인자를 가짐
리듀서 함수의 반환 값이 누산기에 할당되고, 누산기는 순회 중 유지되어 최종적으로 하나의 값을 가짐