[JS] 배열 데이터 (filter, find, findIndex, indexOf, includes, push, unshift, reverse, slice, splice)

 

 

 

배열 데이터의 중요한 메소드만 살펴보려고 했는데.....

중요한게 너무 많다....!!
이번 시간을 마지막으로 진짜 배열데이터 끝짱내자.

 

 

 

.filter()

 

filter란 이름그대로 배열 데이터 안에 들어있는 아이템들을

특정한 기준에 의해서 필터링을 하는 것. 

그리고 filter된 아이템들을 새로운 배열 데이터로 반환한다.

 

 

const numbers = [1, 2, 3, 4]
const fruits = ['apple', 'banana', 'cherry']

const a = numbers.map(number => {
  return number < 3
})
console.log(a)
//화살표함수
const a = numbers.map(number =>  number < 3)
console.log(a)

위의 코드를 살펴보자.

map 메소드를 사용하고 있고, 리턴을 통해서

number라는 매개변수가 숫자 3보다 작은지를 

물어보고있다.

만약? 작다면 true가 작지않다면 false가 출력 될 것이다.

 

아이템을 4개 가지고 있는 새로운 블린데이터가 생성됐다.

 

이번엔 위와 동일한 로직으로 filter라는 메소드를 사용해 보았다.

filter메소드는 number라는 매개변수를 사용하는

화살표함수가 콜백으로 정의되고 있다.

함수의 로직으로는 number부분이 숫자 3보다 작은 경우에

리턴을통해 함수밖으로 반환하고 있다.

filter메소드의 경우에는 콜백함수에서 반환되는 값이 true인 경우에만

새로운 배열에 하나씩 넣어준다.

const b = numbers.filter(number => {
  return number < 3
})
console.log(b)
//화살표함수
const b = numbers.filter(number => number < 3)
console.log(b)

결과는? 전부 숫자 3보다 작은 값만 출력되는것을 볼 수 있다.

 

정리를해보면 map메소드는 배열데이터의 갯수만큼 반복적으로 

내용이 동작하면서 새롭게 반환된 배열데이터도 원본의 배열데이터 

갯수만큼 똑같이 만들어지는 반면에,

filter같은 경우엔 필터링을 해서 일부내용을 걷어내고 새롭운 

배열을 만들어내는 개념이라 그렇게 만들어진 배열데이터는

원본의 내용과 다를 수 있다.

map과 filter모두 원본의 데이터는 훼손하지않는다.

결국, map과 filter는 원본의 영향이 전혀 없이

새로운 배열을 반환하는 배열의 메소드다.

 

 

.find() .findIndex()

 

find는 콜백내에서 뭔가를 찾으면 반복이 종료가 되고

그 찾아진 아이템이 반환이된다.

findIndex는 찾아진 아이템의 index 번호를 반환하는 메소드이다.

 

const numbers = [1, 2, 3, 4]
const fruits = ['apple', 'banana', 'cherry']

const a = fruits.find(fruit => {
  return /^b/.test(fruit)
})
console.log(a) //banana

 

배열 데이터안에서 조건에 맞는 특정한 아이템을 찾을때 find 메소드를 사용한다.

 

const numbers = [1, 2, 3, 4]
const fruits = ['apple', 'banana', 'cherry']

const b = fruits.findIndex(fruit => {
  return /^b/.test(fruit)
})
console.log(b) //1

위 코드를 콘솔창에 출력하면 숫자 1이 출력된다.

코드를 읽어보면 소문자 b로 시작하는 아이템은 바나나고,

find라는 이름으로 바나나를 찾았다.

바나나는 제로베이스로 첫 번째 아이템이기때문에

숫자 1를 출력한다.

 

결국 findIndex는 찾아진 아이템의 index 번호를 반환하는 메소드이다.

그럼 findIndex를 사용하면 뭐가 좋을까?

나중에 특정한 아이템을 찾아서 배열에 몇 번째 있는지

확인하게 될 때, 아이템을 삭제하거나 아이템의 앞과 뒤에

다른 아이템을 추가할 수 있게 된다.

 

 

.includes()

 

includes는 앞에 있는 배열 데이터 부분에 인수(인자)로 사용된

특정한 데이터가 포함이되어져 있는지를 블리언형식으로 확인하는 메소드.

 

number안에 3이 포함되어있는지를 확인하는 프로그래밍을 만들어보고 싶다.

우리가 앞에서 배웠던 forEach를 사용해도 가능하다.

const arr = [1, 2, ,3, 4];

let number = 3;

arr.forEach((elm)) => {
if (elm === number) {
 console.log(true)
 }
});

하지만 includes를 사용하면 훨씬 빨리 할 수 있다.

const numbers = [1, 2, 3, 4]
const fruits = ['apple', 'banana', 'cherry']

const a = numbers.includes(3)
console.log(a) //true

const b = fruits.includes('hello')
console.log(b) //false

 

 

.indexOf()

주어진 배열에서 전달받은 인자와 일치하는 값을 반환하는 함수.

이번에는 주어진 요소가 존재하면 몇번째 있는지 index를 출력하는 프로그램을 만들어보자.

const arr = [1, 2, ,3, 4];

let number = "3";

console.log(arr.indexOf(number));

코드를 입력하면?

-1 이 나온다. 이유는 문자열 "3" 을 넣었기 때문이다.

indexOf 함수는 만약에 주어진 값과 배열안에 값이 일치하는것이 하나도 없으면 -1을 반환한다.

배열안에 존재하는 값을 넣으면 위치를 정확하게 알려준다. 

 

 

 

 

.push() .unshift()

 

원본 수정됨 주의!

 

const numbers = [1, 2, 3, 4]
const fruits = ['apple', 'banana', 'cherry']

numbers.push(5)
console.log(numbers)

numbers부분에 push라는 메소드를 사용하고 있고,

인수로는 숫자 5를 넣어보았다. 

콘솔창을 통해 출력해보았더니.

다섯개가 되었다.(?)

 

코드를 통해 알아보면,

push같은 경우엔 말그대로 데이터를 밀어넣는 것으로 

push메소드가 사용되는 가장 뒷쪽에다가

특정한 인수의 내용을 밀어넣는 것이다.

 

const numbers = [1, 2, 3, 4]
const fruits = ['apple', 'banana', 'cherry']

numbers.unshift(0)
console.log(numbers)

이번에는 unshift메소드에 인수로 숫자데이터 0을 넣어 보았다.

그런데 앞서 원본이 수정됨에 주의하라고 말했듯이,

이미 수정된 데이터 [1,2,3,4,5] 에 숫자 데이터 0이 추가로

들어가는 것을 볼 수 있다.

 

unshift는 배열데이터에 가장 앞쪽에다가 데이터를 삽입하는 것이다.

 

 

 

.reverse()

 

말그대로 뒤집어서 데이터가 출력됨.

원본이 수정됨 주의!!!

 

const numbers = [1, 2, 3, 4]
const fruits = ['apple', 'banana', 'cherry']

numbers.reverse()
fruits.reverse()

console.log(numbers)
console.log(fruits)

 

 

 

.slice()

배열을 싹뚝 자르는 메소드이다.

slice 도 filter,map과 똑같이 새로운 배열로 반환해준다.

    const arr = [
      { num: 1, color: "red" },
      { num: 2, color: "blue" },
      { num: 3, color: "green" },
      { num: 4, color: "black" },
    ]

    console.log(arr.slice(0, 2))

slice는 두개의 인자를 받고, 첫번째는 자를 시작지점,

두번째는 종료지점이다.

 

0~2번까지면 1,2,3이 반환되어야하는데 왜 두개만 출력 됐을까?

배열의 slice는 and에서 한개를 뺀 것까지만 반환을 한다.

그래서 0번부터 1번까지만 잘린 것이다.

 

 

 

.splice()

 

splice()는 특정한 아이템을 제거할 수 있고,

새로운 아이템을 끼워넣을 수도 있다.

원본이 수정됨 주의!!!

 

 

const numbers = [1, 2, 3, 4]
const fruits = ['apple', 'banana', 'cherry']

numbers.splice(2, 1)

console.log(numbers)

 

3이 사라졌다.

 

코드를 이해해보자.

splice메소드는 두 개의 인수를 받고, 

첫 번째 인수로는 배열 데이터의 index값을 받는다. 

(제로베이스로)

두 번째 인수로는 앞에서 받아놓은 index번호에서

아이템 1개를 지우라는 뜻이다.

여기서 재미있는 부분은 세번째 인수를 받을 수 있는데

세번째 인수로는 새로운 아이템을 넣을 수 있다.

const numbers = [1, 2, 3, 4]
const fruits = ['apple', 'banana', 'cherry']

numbers.splice(2, 0, 999)

console.log(numbers)

위의 코드를 출력하면

[1, 2, 999, 3, 4] 가 출력된다.

 

즉,

splice()는 특정한 인덱스번호의 아이템을 제거하는 용도로도 

사용이 되고, 첫번째 인수로 지정된 숫자의 바로 앞에

새로운 아이템을 끼워넣는 용도로도 사용할 수 있다.