[array] 배열 메서드 모음

요소를 더하거나 지우기

• Array.push(...items) - 맨 끝에 요소 추가

const list = [1, 2, 3, 4, 5];
list.push(6); // 6
list; // [1, 2, 3, 4, 5, 6]

• Array.pop() - 맨 끝 요소 추출

const list = [1, 2, 3, 4, 5];
list.pop(); // 5
list; // [1, 2, 3, 4]

• Array.unshift() - 맨 앞에 요소 추가

const list = [1, 2, 3, 4, 5];
list.unshift(0); // 0
list; // [0, 1, 2, 3, 4, 5]

• Array.shift() - 맨 앞에 요소 추출

const list = [1, 2, 3, 4, 5];
list.shift(); // 1
list; // [2, 3, 4, 5]

• Array.splice(pos, deleteCount, ...items) - pos부터 deleteCount개의 요소를 지우고, items 추가

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

• Array.slice(start, end) - start부터 end 바로 앞까지의 요소를 복사해서 새로운 배열 생성(기존 배열엔 변형 없음)

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

• concat(...items) - 배열의 모든 요소를 복사, items를 추가해서 새로운 배열 생성 후 반환. items가 배열이면 이 배열의 인수를 기존 배열에 더해줌.

 

원하는 요소 찾기

• Array.indexOf/lastIndexOf(item, pos) - pos부터 원하는 item을 찾음. 찾게되면 해당 요소의 인덱스를 반환. 없으면 -1 반환

const list = [1, 2, 3, 4, 5];

list.indexOf(3); // 2
list.indexOf(6); // -1

list.lastIndexOf(3); // 2
list.lastIndexOf(3, 1); // -1

• Array.includes(value) - 배열에 value가 있으면 true, 없으면 false를 반환

const list = [1, 2, 3, 4, 5];
list.includes(3); // true
list.includes(6); // false

• Array.find/filter(func) - func의 반환값을 true로 만드는 첫번째(find)/전체(filter) 요소를 반환

const list = [1, 2, 3, 4, 5];

list.find(el => el === 3); // 3
list.find(el => el === 6); // undefined

list.filter(el => el % 2 === 0); // [2, 4]

• Array.findIndex(func) - func의 반환값을 true로 만드는 배열의 첫번째 요소에 대한 인덱스를 반환

const list = [5, 12, 8, 130, 440];
list.findIndex(element => element > 13); // 3

 

배열 전체 순회하기

• forEach(func) - 모든 요소에 func을 호출함. 결과는 반환되지 않음.

 

배열 변형하기

• Array.map(func) - 모든 요소에 func을 호출하고 반환된 결과를 가지고 새로운 배열을 생성

const list = [1, 2, 3, 4];
list.map(el => el*2); // [2, 4, 6, 8]

• Array.sort(func) - 배열을 정렬하고 정렬된 배열을 반환

const list = ['D', 'B', 'A', 'C'];
list.sort(); // ['A', 'B', 'C', 'D']

// or
const listNumber = [4, 1, 3, 2, 10];
listNumber.sort(); // [1, 10, 2, 3, 4]
listNumber.sort((a, b) => a - b); // [1, 2, 3, 4, 10]

• Array.reverse() - 배열의 순서를 뒤집어 반환

const list = [1, 2, 3, 4, 5];
list.reverse(); // [5, 4, 3, 2, 1]
list; // [5, 4, 3, 2, 1]

• Array.split/join() - 문자열을 배열로, 배열을 문자열로 변환

const list = [1, 2, 3, 4, 5];
list.join(', '); // "1, 2, 3, 4, 5

• Array.reduce(func, initial(opt)) - 요소를 차례로 돌면서 func을 호출함. 반환값은 다음 함수 호출에 전달함. 최정적으로 하나의 값이 도출

const list = [1, 2, 3, 4, 5];
list.reduce((total, item) => total + item, 0); // 15

• Array.reduceRight(func, initial(opt)) - 배열의 각 값(오른쪽에서 왼쪽으로)을 돌면서 func를 호출함. (reduce와 동일한 로직)

const list = [[0,1], [2,3], [4,5]];
list.reduceRight((total, item) => total.concat(item)); // [4,5,2,3,0,1]

 

기타

• Array.isArray(arr) - arr이 배열인지 여부를 판단함

Array.isArray([1, 2, 3, 4, 5]); // true
Array.isArray(5); // false

• Array.from(arrayLike, func) - 유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새로운 배열 객체를 만듬.

Array.from('foo'); // ['f', 'o', 'o']
Array.from([1, 2, 3], x=> x + x); // [2, 4, 6]

const range = n => Array.from({length: n}, (_, i) => i+1);
console.log(range(10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

* (_, i)

인덱스만 사용하기를 원하여 해당 코드의 첫번째 인수(index에 있는 요소 i)가 관련이 없고 쓸모가 없다는 표시이다.

• Array.of(element) - 인자의 수나 유형에 관계없이 가변 인자를 갖는 새 배열 생성

const list = Array.of(1, 2, 3, 4, 5);
list; // [1, 2, 3, 4, 5]

• Array.at() - 정수 값을 받아 배열에서 해당하는 값에 해당하는 인덱스의 요소를 반환.(음수일 경우, 뒤에서부터 인덱스를 count)

const list = [1, 2, 3, 4, 5];
list.at(1); // 2
list.at(-1); // 5
list.at(-2); // 4

 

참고.

• Array.some(func) - 함수의 반환값을 true로 만드는 요소가 하나라도 있는지 여부 확인 후 조건 충족 시 true, 그렇지 않으면 false

const list = [1, 2, 3, 4, 5];
list.some(el => el === 3); // true
list.some(el => el === 6); // false

• Array.every(func) - 모든 요소가 함수의 반환값을 true로 만드는지 여부를 확인 후 조건 충족 시 true, 그렇지 않으면 false

const list = [1, 2, 3, 4, 5];
list.every(el => el === 3); // false

const list2 = [2, 4, 6, 8, 10];
list.every(el => el % 2 === 0); // true

• Array.fill(value, start, end) - start부터 end까지 value를 채워 넣음

const list = [1, 2, 3, 4, 5];
list.fill(0); // [0, 0, 0, 0, 0];

• Array.copyWithin(target, start, end) - start부터 end까지 요소를 복사하고, 복사한 요소를 target에 붙여넣음. 기존 요소는 덮어씀

const list = [1, 2, 3, 4, 5];
list.copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]
// (0, 3, 4) => 인덱스 0에 인덱스 3에 있는 요소 복사

• Array.flat([depth]) - 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열 생성

const list = [1, 2, [3, 4, [5, 6]]];
list.flat(Infinity); // [1, 2, 3, 4, 5, 6]

• Array.flatMap(func) - 먼저 매핑함수를 사용해 각 엘리먼트에 대해 map 수행 후, 결과를 새로운 배열로 평탄화합니다.

const list = [1, 2, 3];
list.flatMap(el => [el, el* el]); // [1, 1, 2, 4, 3, 9]