Javascript. 배열 메소드 (Array methods)

push() / pop() / unshift() / shift()

• push() : 뒤에 삽입
• pop() : 뒤에 삭제
• unshift() : 앞에 삽입
• shift() : 앞에 삭제

arr.splice(n, m)

• 배열의 특정 요소 지움
• n번째 요소부터 m개 삭제

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

arr.splice(n, m, x)

• n번째 요소부터 m개 삭제, 그 자리에 x 삽입

let arr = [1,2,3,4,5];
arr.splice(1, 3, 100, 200);
console.log(arr); // [1,100,200,5]
arr.splice(1, 0, 100, 200);
console.log(arr); // [1,100,200,2,3,4,5]
// 두번째 인수가 0인 경우 원하는 자리에 추가만 가능

arr.splice()

• 삭제된 요소 반환

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

arr.slice(n, m)

• n부터 m까지 반환, m은 포함하지 않고 m을 쓰지 않으면 n부터 배열 끝까지를 반환
• 문자열의 slice 메소드와 동일
• () 안에 아무것도 넣지 않으면 배열이 복사됨

let arr = [1,2,3,4,5];
arr.slice(1, 4); // [2,3,4]
arr.slice(); // [1,2,3,4,5]

arr.concat(arr2, arr3...)

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

let arr = [1,2];
arr.concat([3,4]); // [1,2,3,4]
arr.concat([3,4], [5,6]); // [1,2,3,4,5,6]
arr.concat([3,4],5,6); // [1,2,3,4,5,6]

arr.forEach(fn)

• 배열 반복
• 세개의 매개변수(해당 요소 item, 순서 index, 해당 배열 자체 arr)를 가진 함수를 인수로 받음
• 매개변수는 보통 첫번째와 두번째만 사용

let mind = ['love', 'hate', 'sad'];
mind.forEach((item, index, arr) => {
  //..  love,hate,sad  0,1,2  mind
});

arr.indexOf / arr.lastIndexOf

• arr.indexOf(x)
  - 배열 안에서 x를 발견하면 인덱스를 반환하고 없으면 -1을 반환
• arr.indexOf(x, y)
  - 인수가 두개인 경우 두번째 인수 y는 시작 위치를 의미
• arr.lastIndexOf
  - 끝에서부터 탐색

arr.includes()

• 인덱스 상관없이 포함하는지만 확인, boolean값 반환

arr.find(fn) / arr.findIndex(fn)

• 보다 복잡한 연산이 가능하도록 함수 연결 가능
• 첫번째 true 값만 반환하고 끝, 없으면 undefined 반환

arr.filter(fn)

• 조건을 만족하는 모든 요소를 배열로 반환

arr.reverse()

• 역순으로 재정렬

arr.map(fn)

• 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환

let userList = [
  { name: "love", age: 10 },
  { name: "hate", age: 15 },
  { name: "sad", age: 30 }
];

let newUserList = userList.map((user, index) => {
  return Object.assign({}, user, {
    id: index + 1,
    inAdult: user.age > 19
  });
});

console.log(newUserList); // 1번
console.log(userList); //2번

• 1번
  
• 2번
  

arr.join()

• 배열을 합쳐서 문자열을 만듦
• 인수로 전달하는 게 구분자, 아무것도 전달하지 않으면 , 로 구분

arr.split()

• 문자열을 나눠서 배열로 만들어줌
• 어떤 문자로 나눠줄지 인수로 전달
• "" 빈 문자열 넣어주면 한 글자씩 배열로 반환

arr.isArray()

• 배열인지 아닌지 확인
• typeOf를 사용하면 객체(Object)로 알려줌, 일반 객체와 구분 불가하기 때문에 isArray() 사용

arr.sort()

• 배열 재정렬
• 배열 자체가 변경되니 주의
• 배열 내 요소를 문자열로 인식하기 때문에 제대로 정렬하기 위해서 인수로 정렬 로직을 담은 함수를 받음

let arr = [3, 29, 5, 1, 12];
console.log(arr.sort()); // [1, 12, 29, 3, 5] 문자열로 인식

function fn(a, b){
  return a - b;
}
arr.sort(fn); // 아래와 동일한 식

arr.sort((a, b) => {
  console.log(a, b);
  return a - b; // a와 b를 비교해서 더 작으면 앞으로 보내고 크면 뒤로 보냄
});

console.log(arr); // [1, 3, 5, 12, 5]

• 보통 함수로 만들어 사용하기 보다는 유용한 기능을 모아둔 Lodash와 같은 라이브러리 사용
• _.sortBy(arr);
  - 숫자든 문자든 객체든 원하는 기준으로 정렬해줌
  • 실무에서 많이 사용 - https://lodash.com/

arr.reduce()

• 배열을 돌면서 원하는 작업을 하고 최종값을 반환시켜줌
• 인수로 함수를 받음
• (누적 계산값, 현재값) => { return 계산값 };

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

• arr.reduceRignt() : arr.reduce()와 동일하나 배열 우측부터 수행