JS forEach,MAP, Arrow

forEach

forEach는 함수를 인수로 받아들여 배열안의 아이템 각각에 대해 함수와 코드를 한 번씩 실행한다.

const nums = [1, 2, 3, 4, 5, 6];

nums.forEach(function (n) {

    console.log(n * n)

});

 

해당 내용은 forEach에게 nums의 배열을 전달하고 배열 안의 항목들을 곱해준다.

이것은 마치 const forEach = function() 과 같은 느낌이다.

위에서 function안의 n은 const nums와 같다.

MAP

map은 forEach 와 비슷하게 변수의 배열을 function으로 받아 한번씩 실행시킨다.

하지만 다른점을 다른 상태로 그 배열을 받아서 새로운 배열을 생성한다. 즉, 매핑한다.

const texts = ['my', 'name', 'is', 'kim']

const caps = texts.map(function (t) {

    return t.toUpperCase();

})

 

위 함수는 texts를 실행하면 소문자로, caps를 실행하면 대문자로 배열이 나온다.

 

const fullNames = [{ first: 'Albus', last: 'Dumbledore' }, { first: 'Harry', last: 'Potter' }, { first: 'Hermione', last: 'Granger' }, { first: 'Ron', last: 'Weasley' }, { first: 'Rubeus', last: 'Hagrid' }, { first: 'Minerva', last: 'McGonagall' }, { first: 'Severus', last: 'Snape' }];

const firstNames = fullNames.map(function (name) {

    return name.first;

})

 

위 코드는 fullNames에 있는 배열의 프로퍼티의 key값중 first를 map으로 추출해 firstNames라는 배열로 저장한다.

const firstNames 코드의 naem은 fullNames를 뜻해서 return name.first는 return fullNames.first 와 같고

이 코드의 뜻은 map의 기능으로 fullNames의 first 키값의 value들을 저장하라는 뜻이다.

 

const firstNames = fullNames.map(name => name.first);

 

Arrow

 

const greet = (name) => {

    return `Hey ${name}!`;

}

 

const greet = name => `Hey ${name}!`

 

위 코드는 greet("jun") 이라고 치면 Hey jun! 이 return되는 코드이다.

 

arrow를 이용한 잠시적 반환은

 

const rollDie = function () {

    return Math.floor(Math.random() * 6) + 1

}

 

위 코드와

 

const rollDie = () => (

    Math.floor(Math.random() * 6) + 1

)

const rollDie2 = () => {

    return Math.floor(Math.random() * 6) + 1

}

 

위 두개의 코드는 같은데, 두개중 위의 코드는 return을 생략해도 => 다음에 ( ) 로 묶어서 return을 잠시적으로 반환해

아래코드의 return을 쓰고 { }로 묶은것 보다 더 편하게 사용할 수 있게 해준다.

 

또 하나는 

 

const rollDie = () => Math.floor(Math.random() * 6) + 1

 

괄호 없이 이렇게 작성해도 똑같다.

 

활용해서

 

const isEven = num => num % 2 === 0

 

이렇게 isEven(num) 이 ture인지 false인지 확인도 가능하다.

 

const isEven = function (num) {

    return num % 2 === 0;

}

 

이건 arrow를 사용하지 않았을때의 코드다. 

 

간단하게 위 코드에서 function 을 => 로 바꾸고 (num)에서 ()를 없애서 num만 남긴다음 둘을 바꾸면 

arrow가 사용된다,