알아두면 쓸모있는 자바스크립트 Arrays APIs 정리
1. join()
배열안에 있는 요소들을 하나의 String 값으로 바꿔주는 메서드
const fruits = ['apple', 'banana', 'orange'];
const result = fruits.join() // 인자가 없을때
console.log(result) // "apple,banana,orange"
const result2 = fruits.join('') // 따옴표만 넣었을때
console.log(result2) // "applebananaorange"
const result3 = fruits.join('|') // 인자가 있을때
console.log(result3) // "apple|banana|orange"
2. split()
문자열을 특정 구분자로 나누어서 배열에 담는 메서드
const fruits = 'apple,banana,orange'
const result = fruits.splie(','); // ',' 을 기준으로 자른다
console.log(result) // 'apple','banana','orange'
3. reverse()
배열안에있는 데이터들의 순서를 역순으로 바꾸는 메서드, 배열 자체의 값을 바꿔버린다.
const arr = [1,2,3,4,5];
const result = arr.reverse();
console.log(result) // [5, 4, 3, 2, 1]
console.log(arr) // [5, 4, 3, 2, 1]
4. splice(start , end)
배열의 start 번째부터 end 개 요소를 삭제하는 메서드 배열 자체의 값을 바꾼다.
const arr = [1,2,3,4,5];
arr.splice(2,2); // [3, 4] 삭제된 요소들
console.log(arr) // [1, 2, 5]
5. slice(start , end)
배열의 start 번째부터 end -1 번째요소까지 잘라내서 새로운 배열을 리턴하는 메서드
기존 배열에는 변화가 없다.
const arr = [1,2,3,4,5];
const result = arr.splice(2,5); // 2번째부터 (5-1) 번째까지 잘라냄
console.log(result); // [3, 4, 5]
6. find()
배열안에서 콜백함수의 조건을 만족하는 첫번째 요소를 리턴하는 메서드.
요소를 찾아내면 멈춤
const arr = [1,2,3,4,5];
const result = arr.find((value) => value > 3);
console.log(result); // 4 가 출력된다.
7. filter()
배열 전체를 돌면서 콜백함수의 조건을 만족하는 요소들로 만들어진 새로운 배열을 리턴하는 메서드.
const arr = [1,2,3,4,5];
const result = arr.filter((value) => value > 3);
console.log(result); // [4, 5]
8. map()
배열안에있는 모든 요소들을 원하는 함수로 가공해서 다른 방식의 데이터의 배열로 만들어내는 메서드
const arr = [1,2,3,4,5];
const result = arr.map((value) => value * 2); // value * 2 값 리턴
console.log(result); // 2, 4, 6, 8, 10
9. some()
배열의 요소들 중 하나라도 콜백함수의 조건을 만족한다면 true 값을 리턴하는 메서드
const arr = [1,2,3,4,5];
const result = arr.map((value) => value > 4);
console.log(result); // true 값 리턴
10. every()
배열전체를 훑으면서 모든요소가 콜백함수의 조건을 만족한다면 true 값을 리턴하는 메서드
const arr = [1,2,3,4,5];
console.log(arr.map((value) => value > 4)); // false 값 리턴
console.log(arr.map((value) => value > 0)); // true 값 리턴
11. reduce()
배열의 각 요소에 콜백함수를 실행하고 하나의 결과값을 반환하는 메서드
Array.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);
const arr = [1,2,3,4,5];
//배열 요소들을 더하기
console.log(arr.reduce((prev, curr) => prev + curr, 0)); // 결과값: 15 출력
// 딕셔너리의 quntity(수량)
let total = [{quntity: 1}, {quntity: 2}, {quntity: 1}].reduce(
(acc, cur) => acc + cur.quntity
, 0
)
console.log(total) // 결과값: 4
12. sort()
배열안의 요소들을 정렬하는 메서드. 기본값은 오름차순
const arr = [5,2,1,4,3];
console.log(arr.sort()); // [1, 2, 3, 4, 5]
console.log(arr.sort((a,b) => a - b)); // [1, 2, 3, 4, 5] 오름차순
console.log(arr.sort((a,b) => b - a)); // [5, 4, 3, 2, 1] 내림차순
13. concat()
기존 배열에 다른 배열이나 값들을 합쳐서 새로운 배열을 반환하는 메서드
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
// ["a", "b", "c", "d", "e", "f"]
14. includes()
배열이 특정 요소를 포함하고 있는지 판별하는 메서드.
fromIndex 를 통해서 몇번째 인덱스부터 판별할 것인지 결정할 수 있다.
const array1 = [1, 2, 3];
arr.includes(valueToFind, fromIndex?) // fromIndex 생략가능
console.log(array1.includes(2));
// true
const pets = ['dog', 'bat', 'cat'];
console.log(pets.includes('cat'));
// true
console.log(pets.includes('at'));
// false
16. pop()
배열에서 마지막 요소를 제거하고 그 요소를 반환하는 메서드.
배열자체의 값을 바꿔버린다.
const arr = [1,2,3,4,5];
console.log(arr.pop()); // 결과값: 5 (삭제된 요소 리턴)
console.log(arr); // [1, 2, 3, 4]
17. push()
배열의 끝에 하나 이상의 요소를 추가하고, 새로운 배열의 길이를 반환합니다.
const arr = [1,2,3,4,5];
console.log(arr.push('6')); // 결과 : 6 (arr.length)
console.log(arr); // [1, 2, 3, 4, 5, 6]
console.log(arr.push('7','8')); // 결과 : 8 (arr.length)
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8]
18. shift()
배열의 첫 번째 요소를 제거하고, 제거된 요소를 반환한다. 배열 자체의 값을 바꾸는 메서드
const arr = [1,2,3,4,5];
console.log(arr.shift()); // 결과 : 1
console.log(arr); // [2, 3, 4, 5]