JS. 배열(2) / Array

.filter()

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

만들어낸 조건에 맞는 내용을 걸러낸 새로운 배열을 반환한다.

const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

const a = numbers.map(number => number < 3)
console.log(a)

const b = numbers.filter(number => number < 3)
console.log(b)

console.log(numbers)

실행 결과
[ true, true, false, false ]
[ 1, 2 ]
[ 1, 2, 3, 4 ]

.map()을 사용하면 number는 true or false로 boolean 데이터로 조건에 따라 추출하게 된다.

.filter()를 사용하면 number는 조건에 맞는 숫자로 추출하여 새로운 배열을 반환한다.

.find() / .findIndex()

find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다.

그런 요소가 없다면 undefined를 반환합니다.

findIndex() 메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다.

만족하는 요소가 없으면 -1을 반환합니다.

const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

const a = fruits.find(fruit => /^B/.test(fruit))
console.log(a)

const b = fruits.findIndex(fruit => /^C/.test(fruit))
console.log(b)

실행 결과
Banana
2

앞글자가 B로 시작하는 인덱스만 추출하여 새로운 배열로 반환한다.

Cherry라는 index의 인덱스 번호를 zerobased에 기초해서 2를 반환한다.

.includes()

includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별한다.

const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

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

const b = fruits.includes('Imae')
console.log(b)

실행 결과
true
false

3번째 인덱스에는 Cherry라는 내용이 있으니 true

imae라는 내용이 fruits에 존재하지 않으므로 false

.push() / .unshift()

push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.

unshift() 메서드는 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환한다.

※ 원본이 수정된다.

const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

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

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

실행 결과
[ 1, 2, 3, 4, 5 ]
[ 0, 1, 2, 3, 4, 5 ]

push 메서드를 사용하여 맨 뒤 인덱스에 5가 추가되었다.

unshift 메서드를 사용하여 맨 앞 인덱스에 0이 추가되었다.

.reverse()

reverse() 메서드는 배열의 순서를 반전된다. 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 된다.

※ 원본이 수정된다.

const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

numbers.reverse()
fruits.reverse()

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

실행 결과
[ 4, 3, 2, 1 ]
[ 'Cherry', 'Banana', 'Apple' ]

.splice()

slice() 메소드는 문자열의 일부를 추출하면서 새로운 문자열을 반환한다.

※ 원본이 수정된다.

요소 여러 개를 삭제할 수 있다.

const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']

numbers.splice(2, 1)
console.log(numbers)

numbers.splice(2, 0, 99)
console.log(numbers)

fruits.splice(2, 0, 'Orange')
console.log(fruits)

실행 결과
[ 1, 2, 4 ]
[ 1, 2, 99, 4 ]
[ 'Apple', 'Banana', 'Orange', 'Cherry' ]

2번 인덱스부터 1개를 제거한다. 2번인덱스부터 0개 삭제하고 그 위치에 99를 추가한다. 2번인덱스부터 0개 삭제하고 그 위치에 Orange를 추가한다.