🤓 some()
배열 내의 어떤 요소라도 주어진 callback함수에 만족하는지 확인 후,
하나라도 만족한다면 true를 반환, 그렇지 않다면 false를 반환합니다.
만약 빈 배열이라면 무조건 false를 반환합니다.
const arr = [1, 2, 3, 4, 5, 6];
arr.some(element => element % 2 === 0); // true
arr.some(element => element > 5); // true🤓 every()
배열 내의 모든 요소가 주어진 callback 함수에 만족하는지 확인합니다.
만약 하나라도 만족하지 못한다면 false를 반환합니다.
const arr = [1, 2, 3, 4, 5, 6];
arr.some(element => element % 2 === 0); // false
arr.every(element => element > 0); // true🤓 sort()
메소드를 통해 원하는 방식대로 배열을 정렬할 수 있다.
sort 메소드는 arr을 비교 함수에 따라 정렬한 뒤, arr을 그대로 반환한다.)
const arr = [3, 1, 4, 5, 2];
arr.sort((x,y) => x - y); // [1, 2, 3, 4, 5]
arr.sort((x,y) => y - x); // [5, 4, 3, 2, 1]응용
const names = ['Denton', 'Kathleen', 'Ebba', 'Bruce'];
names.sort((x, y) => x.length - y.length);
// ['Ebba', 'Bruce', 'Denton', 'Kathleen']🚨 비교 함수를 인수로 넘겨주지 않으면, sort 메소드는 먼저 요소를 전부 문자열로 변환한 후, 유니코드 코드포인트를 비교하는 방식으로 정렬한다.
🚨 sort를 사용할 때에는 꼭 비교함수를 넘겨주도록 하자!
const ex1 = [20, 3, 100].sort((x, y) => x - y);
// [3, 20, 100]
let ex2 = ['abc', 'DEF', 'aBC'].sort((x, y) => x.localeCompare(y));
// ['abc', 'aBC', 'DEF']🤓 reduce()
메소드는 모든 요소의 값을 종합해서 하나의 값으로 만드는 계산을 할 때 사용합니다.
const reduceArr = [1, 2, 3];
const reduce = reduceArr.reduce((acc, item) => acc + item, 0)
// 6🚨 코드 수행 순서
1. 초기값 0과 배열의 첫 번째 요소인 1을 인수로 해서 함수를 호출.
즉, acc(accumulator의 약자) 매개변수에 0이 대입되고, item 매개변수에 1이 대입되고, 결과값은 1이 됩니다.
2. 누적값 1과 배열의 두 번째 요소인 2을 인수로 해서 함수를 호출. 결과값 3이 다시 누적값이 됩니다.
3. 누적값 3과 배열의 세 번째 요소인 3을 인수로 해서 함수를 호출. 결과값은 6이 됩니다.
4. 더 이상 요소가 남아있지 않으므로 reduce 호출의 결과값은 6이 됩니다.
const stringArr = ['one', 'two', 'three'];
stringArr.reduce((acc, item, index, array) => {
return acc + `(${index}: ${item})`;
}, ''); // '(0: one)(1: two)(2: three)'🚨 reduce는 (누적값, 현재요소, 인덱스, 배열)과 같은 인자 값을 받습니다.
🚨 reduce 메소드에 초기값 인수를 주지 않으면, 첫번째 인수가 초기값으로 지정되어 첫 번째 요소와 두 번째 요소에 대한 계산부터 시작합니다.
즉, 위 두 예제에서 초기값을 생략해도 같은 결과가 나오게 됩니다.
🚨 만약, 배열의 요소가 하나밖에 없다면, 아래와 같이 계산이 수행되지 않고 첫 번째 요소가 그대로 반환되므로 초기값은 항상 제공해주는 것이 좋습니다.
🤓 indexOf(), lastIndexOf()
indexOf와 lastIndexOf 메소드를 사용하면 특정 요소가 배열의 몇 번째에 위치하는 지를 알아낼 수 있다.
indexOf는 배열의 왼쪽부터, lastIndexOf는 오른쪽부터 검색해서 처음 만나는 요소의 인덱스를 반환한다. 만약 일치하는 요소가 없다면, 두 메소드 모두 -1을 반환한다.
const arr = ['a', 'b', 'c', 'b', 'a'];
arr.indexOf('b'); // 1
arr.lastIndexOf('b'); // 3
arr.indexOf('z'); // -1
arr.lastIndexOf('z'); // -1indexOf, lastIndexOf 이 두 메소드 모두 두 번째 인수로 시작 인덱스를 받습니다.
시작 인덱스가 주어지면 해당 인덱스부터 검사를 시작합니다.
const arr = [1, 2, 3, 4, 5, 6];
arr.indexOf('b', 2); // 3
arr.lastIndexOf('b', 2); // 1🤓 find()
- find 메소드와 findIndex 메소드를 사용하면
특정 조건을 만족하는 요소를 찾을 수 있습니다.두 메소드 모두 predicate를 이용해왼쪽부터 검사해서처음 만나는 요소를 찾습니다. find 메소드는 요소 자체를 반환하며,findIndex는 요소의 인덱스를 반환한다는 차이점이 있습니다. 조건을 만족하는요소를 찾지 못하면, find는 undefined를,findIndex는 -1을 반환합니다.- forEach와 마찬가지로, find와 findIndex에 주어지는 predicate에는
(현재요소, 인덱스, 배열)의 세 인수가 넘겨집니다.
const names = ['Denton', 'Kathleen', 'Ebba', 'Bruce'];
names.find(item => item.length < 6); // 'Ebba'
names.findIndex(item => item.length < 6); // 2
names.find(item => item.length > 8); // undefined
names.findIndex(item => item.length > 8); // -1🤓 filter()
배열에서 원하는 요소만을 골라내어 새로운 배열을 생성할 수 있습니다.
filter 메소드에는 boolean을 리턴하는 함수를 주어야합니다.
진리값을 반환하는 함수를 predicate라고하며, filter에 주어지는 함수도 forEach와 같이 (현재요소, 인덱스, 배열)의 세 인수를 받습니다.
const arr = [1, 2, 3, 4, 5, 6];
// 배열에서 짝수만 골라내기
arr.filter(item => item % 2 === 0); // [2, 4, 6]
arr.every(element => element > 0); // true🤓 forEach()
배열의 각 요소에 대해 함수를 호출할 수 있습니다.
1. arrow function을 사용하여 더욱 간결하고 읽기 편한 코드가 되었습니다.
2. 메소드에 넘기는 함수에는 총 세 개의 인수가 들어가는데 현재 순회중인 배열의 요소, 인덱스 값, 순회중인 배열이 들어옵니다.
const arr = [1, 2, 3];
arr.forEach(item =>
console.log(`item 요소${item}에 대한 요소가 실행 중`)
); // item 요소1에 대한 요소가 실행 중
arr.forEach((item, index, array) =>
console.log(`${item} : index ${index}번째 요소에 대해 함수가 실행 중`)
); // 1 : index 1번째 요소에 대해 함수가 실행 중🚨 그래서 어떤것을 써야하나요?
for...of : 단순히 배열을 순회하기가 목적일 때, 간결하고도 속도적인 측면에서 유리합니다.
forEach : 배열을 순회하면서 배열의 인덱스가 필요한 경우
for : 코드의 실행 속도가 정말로 중요할 때
🤓 map()
배열의 각 요소에 함수를 적용해, 그 반환값을 요소로 갖는 새로운 배열을 만든다.
forEach와 비슷해 보이지만 새로운 배열을 만든다는 차이가 있다.
const arr = [1, 2, 3, 4, 5, 6];
const newArr = arr.map(item => item ** 2);
console.log(arr); // [1, 2, 3, 4, 5, 6]
console.log(newArr); // [1, 4, 9, 16, 25,3 6]map도 forEach와 같이 함수를 호출할 때 (현재 순회중인 배열의 요소, 인덱스 값, 순회중인 배열) 세 개의 인수를 넘긴다.
const map = mapArr.map(
(item, index, array) => item * index
);
console.log(`인수 3개를 넘겼을 때: ${map}`);
// 인수를 3개 넘겼을 때 반환 결과: 0, 2, 6, 12, 20, 30