javascript

7 Useful Array Methods

, , , , , , , , , ,

Array method

유용한 배열의 7가지 메소드에 대해 설명드리겠습니다.

every

배열의 every method는 배열의 모든 원소를 반복하여 하나라도 조건이 맞지 않는다면 즉시 반복을 멈추고 false를 반환합니다. 모든 조건에 맞아야만 true를 반환합니다.

1
2
3
4
const randomNums = [2, 4, 5, 6, 8, 10];
randomNums.every(num => num % 2 === 0); // false
const evenNums = [2, 4, 6, 8, 10];
evenNums.every(num => num % 2 === 0); // true

위 코드처럼 홀수인지 체크하는 함수를 every method내에서 사용한다면 randomNums 배열은 중간에 홀수인 숫자가 포함되어있기 때문에 3번의 반복 후 바로 false를 반환하고 반복이 종료됩니다. 하지만 evenNums배열은 모든 요소가 짝수로 이루어져있기 때문에 끝까지 반복 후 true를 반환합니다.

filter

배열의 filter method는 배열의 모든 요소를 반복하면서 조건에 맞는 요소는 남기고 조건에 맞지 않는 요소는 없애 배열을 반환합니다.

1
2
const orderNums = [1, 2, 3, 4, 5, 6, 7, 8];
const evenNums = orderNums.filter(num => num % 2 === 0); // [ 2, 4, 6, 8 ]

위 코드처럼 짝수만으로 이루어진 배열을 만드려면 짝수인지 체크 후 새로운 변수에 담으면 evenNums과 같이 짝수 배열을 반환합니다.

find

배열의 find method는 배열의 요소를 반복하면서 조건에 맞는 첫번째 요소의 값만 반환합니다.

1
2
3
const randomNums = [2, 9, 20, 40, 27];
randomNums.find(num => num > 20); // 40
randomNums.find(num => num > 50); // undefined

위 코드를 보면 randomNums배열에서 20보다 큰 수를 순서대로 반복하며 체크 후 조건에 맞는 40을 반환합니다. 40이 20보다 큰 첫번째 요소이기 때문에 40을 반환하고 반복은 바로 종료됩니다. 만약 배열의 모든 요소가 조건에 맞지 않는다면 undefined를 반환합니다.

findIndex

배열의 findIndex method는 배열의 요소를 반복하면서 조건에 만족하는 첫번째 요소의 index를 즉시 반환 후 반복은 종료됩니다. 모든 배열의 요소가 조건에 만족하지 않는다면 -1을 반환합니다.

1
2
3
const randomNums = [2, 9, 20, 40, 27];
randomNums.findIndex(num => num === 20); // 2
randomNums.findIndex(num => num === 5); // -1

위 코드를 보면 20과 같은 수는 2번째 index에 존재하여 2를 반환하지만 5와 같은수는 존재하지 않기때문에 -1을 반환합니다.

forEach

배열의 forEach method는 배열의 모든 요소를 반복합니다. 모든 요소를 반복하지만 아무것도 반환하지 않기때문에 단순 반복용으로 사용합니다.

1
2
const greetings = ["안녕하세요.", "Good morning.", "Guten Morgen", "おはようございます", "早上好"];
greetings.forEach(g => console.log(g));

forEach는 배열 내 모든 요소를 반복하지만 undefined를 반환합니다. 만약 모든 배열을 순회해야 하지만 배열을 변경해야하지 않는다면 forEach 함수를 사용하면 좋습니다.

map

배열의 map method는 배열의 모든 각각의 요소에 대해 호출한 결과 값을 배열로 반환합니다.

1
2
3
4
5
6
7
const peoples = [
  {name: "Kim", age: 25},
  {name: "Lee", age: 31},
  {name: "Park", age: 23},
  {name: "Choi", age: 30},
];
const ages = peoples.map(p => p.age);

위 코드와 같이 age만 배열에 추가 할 수 있습니다.

some

배열의 some method는 배열의 요소 중 주어진 조건에 하나라도 맞으면 반복이 종료되고 true를 반환합니다. 모든 배열의 요소들이 조건에 충족하지 않는다면 false를 반환합니다.

1
2
3
4
5
6
7
8
const peoples = [
  {name: "Kim", age: 25},
  {name: "Lee", age: 31},
  {name: "Park", age: 23},
  {name: "Choi", age: 30},
];
peoples.some(p => p.age >= 30) // true
peoples.some(p => p.age >= 35) // false

위 코드에서 사람들의 나이가 30이상인 사람은 1번째 인덱스에 존재하여 반복이 종료되고 true를 반환하지만 35이상인 사람은 존재하지 않기때문에 모든 배열을 반복한 후 false를 반환합니다.

공유하기