✍️ TIL 9 ㆍJavascript 배열 내장함수 2

1. filter
2. splice & slice
3. shift & pop
4. unshift & push

1. filter

filter 함수는 배열에서 특정 조건을 만족하는 값들을 추출하여 새로운 배열을 생성한다.

color = 'red'인 조건을 만족하는 배열 fruitColorRed 생성하기.

const fruits = [
  
  { id: 1,
    name: 'apple',
    color: 'red' },
  
  { id: 2,
    name: 'banana',
    color: 'yellow' },
  
  { id: 3,
    name: 'melon',
    color: 'green' },
  
  { id: 4,
    name: 'orange',
    color: 'orange' },
  
  { id: 5,
    name: 'strawberry',
    color: 'red' },
];

const fruitColorRed = fruits.filter(fruit => fruit.color === 'red');
console.log(fruitColorRed);

결과

2. splice & slice

splice는 배열에서 특정 항목을 제거할 때 사용.

slice는 기존 배열을 건들지 않고 특정 항목을 제거한 후 새로운 배열 생성.

splice

배열에서 값이 3인 index를 찾아 순서대로 3개 제거하기.

const numbers = [1, 2, 3, 4, 5, 3, 7];

const index = numbers.indexOf(3); // 값이 3인 배열의 index 찾기
numbers.splice(index, 3); // 그 index부터 순서대로 3개 제거
console.log(numbers);

결과 [1, 2, 3, 7]
주의할 것, 여기서 indexOf는 값이 3인 index 중 가장 앞에 있는 index값을 반환한다.

slice

const numbers = [1, 2, 3, 4, 5, 3, 7];

const sliced = numbers.slice(2, 5); // 2부터 시작해서 5전까지

console.log(sliced); // [3, 4, 5]
console.log(numbers); // [1, 2, 3, 4, 5, 3, 7] 원래 배열은 그대로

결과 [3, 4, 5]
[1, 2, 3, 4, 5, 3, 7]

3. shift & pop

shift는 배열의 첫번째 원소 추출 및 제거

pop은 배열의 마지막 원소 추출 및 제거

shift

첫번째 원소값 추출 및 제거하기

const numbers = [1, 2, 3, 4, 5, 3, 7];

const value = numbers.shift();
console.log(value); // 1
console.log(numbers); // [2, 3, 4, 5, 3, 7]

결과 1
[2, 3, 4, 5, 3, 7]

pop

배열의 마지막 원소 추출 및 제거하기

const numbers = [1, 2, 3, 4, 5, 3, 7];

const value = numbers.pop();
console.log(value); // 7
console.log(numbers); // [1, 2, 3, 4, 5, 3]

결과 7
[1, 2, 3, 4, 5, 3]

4. unshift & push

unshift는 배열의 맨 앞에 값 추가

push는 배열의 맨 뒤에 값 추가

unshift

배열의 맨 앞에 값 '5' 추가하기

const numbers = [1, 2, 3, 4, 5, 3, 7];

const value = numbers.unshift(5);
console.log(numbers);

결과 [5, 1, 2, 3, 4, 5, 3, 7]

push

배열의 맨 뒤에 값 '9' 추가하기

const numbers = [1, 2, 3, 4, 5, 3, 7];

const value = numbers.push(9);
console.log(numbers);

결과 [1, 2, 3, 4, 5, 3, 7, 9]