[자바스크립트 기본] 알아두면 유용한 배열 Array 메소드 정리 (feat.드림코딩)

알고리즘 문제를 풀다보면 배열메소드를 사용해야 할때가 많다.

다른 사람들의 풀이를 보면 새로운 메소드들과 활용법을 보며 감탄이 나온다.

새로운 메소드들도 공부할겸사겸사 자바스크립트 배열 메소드를 정리해본다.

덤벼라 배열 메소드!!

1. 배열(Array)

데이터의 순서가 있는 집합이다. 배열은 하나의 변수의 여러 개의 값을 저장할 수 있다.

let numArr = [1, 2, 3, 4];
console.log(numArr); // [1, 2, 3, 4]

2. 배열 (Array) 메소드 와 예시

2-1. toString

배열의 있는 요소를 문자열로 변환

let arr = [1,2,3,4]
console.log(arr.toString()); // 1,2,3,4

let arr2 = ['a', 'b', 'c', 'd']
console.log(arr2.toString()); // a,b,c,d

2-2. join

배열의 있는 요소를 구분기호를 지정하여 문자열로 변환

let arr = [1, 2, 3, 4]
console.log(arr.join('|')); // 1|2|3|4

let arr2 = ['a', 'b', 'c', 'd']
console.log(arr2.join('-')); // a-b-c-d

2-3. push

배열의 끝에 새로운 요소를 추가

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

2-4. pop

배열의 끝에 있는 요소를 삭제

let arr = ['pineapple', 'mango', 'watermelon']
arr.pop();
console.log(arr); // ['pineapple', 'mango']

2-5. unshift

배열의 앞부분에 새로운 요소를 추가

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

2-6. shift

배열의 앞부분에 요소를 삭제

let arr = ['pineapple', 'mango', 'watermelon']
arr.shift();
console.log(arr); // ['mango','watermelon']

2-7. splice

배열의 특정위치에 있는 요소를 추가 또는 삭제

원본 배열 바뀜

splice(idx, 제거할 요소 개수, 배열에 추가할 요소)

let money = [100, 1000, 10000]
money.splice(0,0,10); // 배열 맨앞(0)에 어떤요소도 삭제하지 않고 10을 추가함
console.log(money); // [10, 100, 1000, 10000]

money.splice(3,1,50000); // 배열 맨마지막(3)에 있는 요소 하나(1)를 삭제하고 50000을 추가함
console.log(money); // [10, 100, 1000, 50000]

2-8. slice

배열의 특정 위치 부분을 새로운 배열 객체로 반환

원본 배열 바뀌지 않음

slice(startIdx, endIdx)

const array = [1, 2, 3, 4, 5];
const result = array.slice(2,5); // idx 2부터 4까지(5미포함)에 대한 복사본을 새로운 배열로 객체로 반환
console.log(result); // [3, 4, 5]

2-9. reverse

배열의 요소들의 순서를 뒤집음(반전)

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

2-10. sort

배열의 요소를 적절한 위치에 정렬함

기본 정렬의 기준은 문자열의 유티코드 포인트(문자열로 취급하여 정렬)

let arr = [10, 1, 2, 3, 33, 44, 13, 21];
arr.sort();
console.log(arr); // [1, 10, 13, 2, 21, 3, 33, 44]

// 오름차순 정렬
arr.sort((a,b) => a-b);
console.log(arr); // [1, 2, 3, 10, 13, 21, 33, 44]

// 내림차순 정렬
arr.sort((a,b) => b-a);
console.log(arr); // [44, 33, 21, 13, 10, 3, 2, 1]

2-11. concat

인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새배열로 반환

let fruits = ['melon' ,'banana' , 'apple'];
let newFruits = fruits.concat('mango', 'kiwi');
console.log(newFruits); // ["melon", "banana", "apple", "mango", "kiwi"]

let fruits2 = ['orange'];
let newFruits2 = fruits.concat(fruits2);
console.log(newFruits2); // ["melon", "banana", "apple", "orange"]

2-12. filter

주어진 함수의 테스트를 통과하는(결과값 : true) 모든 요소를 모아 새배열로 반환

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let evenArr = arr.filter((val) => val % 2 === 0);
console.log(evenArr); // [2, 4, 6, 8, 10]

2-13. map

배열내의 모든 요소에 대해 주어진 함수를 호출한 결과를 모아 새배열로 반환

let arr = [1, 2, 3, 4];
let newArr = arr.map((val) => val * 2);
console.log(newArr); // [2, 4, 6, 8]

2-14. reduce

배열을 돌면서 주어진 함수를 실행한 요소을 누적해 하나의 결과값을 반환

const arr = [1, 2, 3, 4]
const result = arr.reduce((prev, curr)=> {
  return prev + curr;
  }, 0);
console.log(result); // 10

2-15. some

배열안의 어떤 요소중 하나라도 주어진 함수를 통과하면 true를 반환, 통과 못할 시 false를 반환

(빈 배열 호출시 무조건 false를 반환)

let arr = [1, 3, 5, 8, 11];
let isEven = (val) => val % 2 === 0;
console.log(arr.some(isEven)); // true  arr에 8이라는 isEven을 통과하는 요소가 하나라도 있었기에 true

2-16. every

배열에 있는 모든 요소가 주어진 함수를 통과하면 true, 통과 못할 시 false를 반환

let arr = [1, 3, 5, 8, 11];
let isEven = (val) => val % 2 === 0;
console.log(arr.every(isEven)); // false  배열에 있는 요소중 8을 빼고는 함수를 통과하지 못함

let arr2 = [2, 4, 6, 8];
console.log(arr2.every(isEven)); // true  배열에 있는 모든 요소가 함수를 통과

2-17. find

주어진 함수를 만족하는 첫번째 요소의 값을 반환

(만족하는 요소가 없다면 undefined를 반환)

let arr = [2, 6, 12, 100, 2021];
console.log(arr.find( val => val > 10)); // 12

2-18. indexOf

배열에 왼쪽부터 지정된 요소를 찾아 만족하는 첫 번째 요소의 인덱스를 반환

(만족하는 요소가 없다면 -1을 반환)

let arr = [1, 2, 3, 4];
console.log(arr.indexOf(2)); // 1
console.log(arr.indexOf(0)); // -1

2-19. lastIndexOf

배열에 왼쪽부터 지정된 요소를 찾아 만족하는 마지막 요소의 인덱스를 반환