[JS] 자바스크립트 메서드 정리

자주 사용하는 메서드 정리

slice()

배열 혹은 문자열을 startIndex ~ endIndex 까지 자르며, 원본은 바뀌지 않는다.

인자로 하나의 양수 값만 입력할 시 endIndex값으로 간주하여 자르고,
인자로 하나의 음수 값만 입력할 시 뒤에서 음수값의 갯수만큼 잘라준다.

주어진 Index의 앞부분까지 잘린다고 생각하면 이해하기 편하다.

// slice(startIndex, endIndex);

// 문자열인 경우
const a = 'abcde'
a.slice(-2) // 'cde'
a.slice(0,2) // 'ab'
a.slice(1,2) // 'b'
a.slice(2) // 'cde'

// 배열인 경우
const a = [0,1,2,3,4]
a.slice(-2) // [3,4]
a.slice(0,2) // [0,1]
a.slice(1,2) // [1]
a.slice(2) // [2,3,4]

splice()

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여
배열의 내용을 변경합니다.

// splice(startIndex, deleteCount, addItem)
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"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

find()

주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다.
그런 요소가 없다면 undefined를 반환합니다.

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found); // 12

filter()

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열 로 반환합니다.

// filter(callback(element, index, thisArray))

const userDataList = [
  {
    id: 1,
    userid: 'loi_kim',
    username: '김로이 (Kim Loi)',
    avatar: '/images/img-profile.png',
  },
  {
    id: 2,
    userid: 'nanen_minsu',
    username: '김민수 (Kim Min su)',
    avatar: '/images/img-profile.png',
  },
  {
    id: 3,
    userid: 'minjung_lee',
    username: '이민정 (Lee Min Jung)',
    avatar: '/images/img-profile.png',
  },
  {
    id: 4,
    userid: 'younghee_choi',
    username: '최영희 (Choi Young Hee)',
    avatar: '/images/img-profile.png',
  },
];

const filterdUserList = userDataList.filter(user => userid.includes('kim'));
// userDataList안의 각각의 요소중 userid가 'kim'을 포함하는 요소만 모아 새로운 배열로 반환해준다. 
// 위의 mockData에서는 0번째 요소만 userid에 'kim'을 포함하기 때문에 새로운 배열 안에 하나의 요소만 담겨 반환된다.

console.log(filterdUserList); // 배열의 요소인 객체 자체를 반환함
// {
//  id: 1,
//  userid: 'loi_kim',
//  username: '김로이 (Kim Loi)',
//  avatar: '/images/img-profile.png',
// }

map()

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아
새로운 배열을 반환 합니다.

// map(callback(currentValue, index, thisArray))
const array = [2, 4, 6, 8, 10]
const map = array.map(x => x * 2);

console.log(map); // [4, 8, 12, 16, 20]

참고사이트
MDN Web Docs - Mozilla