.map() 및 JavaScript 배열 메소드 (1)

 

 

 

 

 

 

.map() 과 .every() 는 모두 배열을 다룰때 사용된다는 점과, 사용방법이 같다는 공통점을 가지고 있지만

사용 목적에 대한 차이점이 있다.

 

.map() 은

배열의 각 요소에 식을 적용하고, 적용된 요소들로 새로운 배열을 생성한다.

 

.every() 는

배열의 각 요소들이 조건에 맞는지 검사하고, true와 false를 반환한다.

 

 

 

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map((num) => num * num);

// squaredNumbers: [1, 4, 9, 16, 25]

.map()은 for문 처럼 배열의 각 요소들을 하나씩 꺼내 식에 대입해 결과값을 얻고,

얻은 결과값들을 모아 새 배열을 생성한다. (기존 배열과 길이가 같음)

 

 

 

 

const numbers = [2, 4, 6, 8, 10];
const allEven = numbers.every((num) => num % 2 === 0);

// allEven: true

.every() 도 배열의 각 요소들을 하나씩 꺼내 식에 대입해 결과값을 얻고,

모든 결과가 참일 경우 true를, 하나라도 참이 아닐 경우 false를 반환한다.

 

 

 

그렇다면 .... !! ~

.every() 예시에 .map()을 적용하면 어떻게 될까!!

 

const numbers = [2, 4, 6, 8, 10];
const allEven = numbers.map(num => num % 2 === 0);

// allEven: [true, true, true, true, true]

.map() 은 배열의 요소를 하나씩 꺼내 식에 대입하고, 결과값들을 모아 새로운 배열을 만들어내므로

boolean으로 이루어진 배열을 반환한다.

 

 

numbers[]에 2가 아닌 3이 있었다면

const numbers = [3, 4, 6, 8, 10];
const allEven = numbers.map(num => num % 2 === 0);

// allEven: [false, true, true, true, true]

allEvent: [false, true, true, true, true]

였을것이다!

 

 

 

그렇다면.. !~...!

.map() 예시에 .every()를 적용하면 어떻게 될까.

 

 

두구두구....

 

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.every(num => num * num);

// squaredNumbers: true

true를 반환한다

 

왜일까!

 

JavaScript에서 0은 false로, 0을 제외한 모든 숫자(음수, 양수)는 true로 평가된다.

 

배열의 각 요소들에 식을 적용했을때

[1, 4, 9, 16, 25] 라는 결과값이 나올 수 있고 이들을 boolean값으로 평가해보면

[true, true, true, true, true] 이다.

 

따라서 배열의 모든 값들이 true이므로 위 식은 true를 반환한다.

 

 

 

 

그럼 false를 반환받고 싶다면 어떻게 하면 될까

const numbers = [0, 2, 3, 4, 5];
const squaredNumbers = numbers.every(num => num * num);

// squaredNumbers: false

0의 boolean값이 false이므로 제곱해서 0이 나오는 숫자인, 0을 배열에 넣어주면 된다.

그렇게 하면 배열의 모든 값이 true가 아니게 되므로 위 식은 false를 반환한다.

 

 

 

그럼 .every() 와 반대로

배열중 단 하나라도 참이면 true를 반환하는 매서드는 없나요 !!!

 

있읍니다.

 

 

.some() 인데 다음 글에 이어서 설명하겠음!