요소의 인덱스를 찾고 싶을때
const cafe = ['coffee', 'cake', 'tea', 'cookie']
cafe.indexOf('tea')
//expected output: 2
cafe.indexOf('coffe', 1)
//expected output: -1
cafe.indexOf('bread')
//expected output: -1
인자가 배열인지 확인하고 싶을 때
Array.isArray('coffee');
//expected output: false
Array.isArray(false);
//expected output: false
Array.isArray([1]);
//expected output: true
요소들을 연결해 하나의 값으로 만들 때
join은 숫자만 입력하는 것이 좋다
const cafe = ['coffee', 'cake', 'tea', 'cookie']
cafe.join('/')
//expected output: 'coffee/cake/tea/cookie'
cafe.join('')
//expected output: 'coffeecaketeacookie'
const example = ['coffee', null, undefined, 'cake']
example.join('')
//expected output: 'coffeecake'
null
또는 undefined
일 경우 빈 문자열로 반환된다.모두 똑같은 요소로 채우고 싶을때
해당 메소드는 원본을 변경하는 메소드로, 복사본이 아닌 this 객체로 변경해 반환한다는 특징이 있다.
const cafe = ['coffee', 'cake', 'tea', 'cookie']
cafe.fill('bread')
//expected output: ['bread', 'bread', 'bread', 'bread']
0
이다.const cafe = ['coffee', 'cake', 'tea', 'cookie']
//expected output: ['coffee', 'cake', 'tea', 'bread']
['coffee', 'cake', 'tea', 'bread']
가 출력되며 맨 마지막 요소만 'bread' 로 변경된 것을 확인할 수 있다.배열을 원하는 깊이로 평탄화하고 싶을때
let arr = [[1, 2, 3], [4, 5, 6], [7, 8, [9, [10, 11]]]]
arr.flat();
//expected output: [1, 2, 3, 4, 5, 6, 7, 8, [9, [10, 11]]]
arr.flat(1);
//expected output: [1, 2, 3, 4, 5, 6, 7, 8, [9, [10, 11]]]
arr.flat(2);
//expected output: [1, 2, 3, 4, 5, 6, 7, 8, 9, [10, 11]]
arr.flat(3);
//expected output: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
arr.flat(Infinity);
//expected output: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
특정 요소가 포함되었는지 확인할 때
const cafe = ['coffee', 'cake', 'tea', 'cookie']
cafe.includes('bread');
//expected output: false
cafe.includes('cake');
//expected output: true
cafe.includes('cake', -3);
//expected output: true
하나의 요소라도 조건을 만족하는지 확인할 때
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.find(i => i > 5);
//expected output: 6
filter();와 다른점은 단 하나의 요소만을 찾는다는 점이 다르다.
find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다.
모든 요소가 조건을 만족하는지 확인할 때
const arr = [{
'name' : 'title1',
'contents' : 'contents1',
'dataNum' : 1
}, {
'name' : 'title2',
'contents' : 'contents2',
'dataNum' : 2
}, {
'name' : 'title3',
'contents' : 'contents3',
'dataNum' : 3
}, {
'name' : 'title4',
'contents' : 'contents4',
'dataNum' : 4
}, {
'name' : 'title5',
'contents' : 'contents5',
'dataNum' : 5
}];
arr.filter(i => i.dataNum > 3);
//expected output:
[{
'name' : 'title4',
'contents' : 'contents4',
'dataNum' : 4
}, {
'name' : 'title5',
'contents' : 'contents5',
'dataNum' : 5
}]
조건을 만족하는 첫 번째 인덱스를 찾을 때
const cafe = [{
'item' : 'coffee',
'amount' : 5
},{
'item' : 'cake',
'amount' : 4
},{
'item' : 'tea',
'amount' : 7
},{
'item' : 'cookie',
'amount' : 3
}];
const index = cafe.findIndex(obj => obj.item.length <= 3)
index
//expected output: 2
주어진 조건에 부합하는 배열의 맨 첫 번째 요소의 인덱스를 반환한다.
배열 내에서 조건에 부합하는 요소가 존재하지 않으면 -1을 반환한다.
findIndex() 메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환
각각 요소에 함수를 호출할 때
const arr = [{
'name' : 'title1',
'contents' : 'contents1',
'dataNum' : 1,
'data' : [1, 2, 3]
}, {
'name' : 'title2',
'contents' : 'contents2',
'dataNum' : 2,
'data' : [1, 2, 3]
}, {
'name' : 'title3',
'contents' : 'contents3',
'dataNum' : 3,
'data' : [1, 2, 100]
}, {
'name' : 'title4',
'contents' : 'contents4',
'dataNum' : 4,
'data' : [1, 2, 3]
}, {
'name' : 'title5',
'contents' : 'contents5',
'dataNum' : 5,
'data' : [1, 2, 100]
}];
배열 내에 있는 요소에 오름차순으로 접근해서 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.
filter();, find();, forEach(); 등 순회하는 메소드 에서도 사용 가능하다.
const arr 내의 data가 100인 title3와 title5를 출력하려면 어떻게 해야 할까?
arr.map((i) => {
if (i.data.includes(100)) {
return i.name
}
return
}).filter(i => i);
//expected output: ['title3', 'title5']
함수를 실행하는 동시에 배열을 평탄화할 때
const coffee = ["iced americano and latte", "espresso", " ", "macchiato", " ", "cappuccino"]
const map = coffee.map(i => i.split(' '));
const flapMap = coffee.flatMap(i => i.split(' '));
forEach();
각각의 요소를 실행하고 싶을 때
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.forEach(i => console.log(i));
// expected output: 1
// expected output: 2
// expected output: 3
// expected output: 4
// expected output: 5
// expected output: 6
// expected output: 7
// expected output: 8
// expected output: 9
// expected output: 10