05-02. 콜백과 배열

1. forEach

기본적으로 forEach는 배열 안의 아이템 각각에 대해 함수와 코드를 한 번씩 실행한다.

그래서 어떤 함수를 넣든 상관없이 함수가 아이템별로 한 번씩 호출되고

각각의 아이템이 함수에 자동으로 전달된다.

예시)

const numbers = [1,2,3,4,5,6,7,8,9]

numbers.forEach(function (el) {
    console.log(el)
})

 

 

 

---

++ 여러번 말했듯이 최근에는 for of가 더 간단해 많이들 사용하고 있다.

2. MAP

배열을 다른 상태로 매핑하는 것이다.

예를 들어 데이터의 일부만 가져오거나 그걸 두배로 늘릴때 사용한다.

 

const fullNames = [{first: 'A', last: 'b'}, {first: 'c', last: 'd'}, {first: 'e', last: 'f'}, {first: 'g', last: 'h'}, 
{first: 'i', last: 'j'}, {first: 'k', last: 'l'}];

const firstNames = fullNames.map(function(name){
    return name.first;
})

 

3. 화살표 함수

기존의 함수나 표현식보다 더 간결하다.

인터넷 익스플로러에선 실행이 되지 않는다.

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

 

- 암시적 반환

값이 한개일때 중괄호 대신 괄호를 사용해서 return 키워드를 없앤다.

{ } 와 return 없이 반환되게 할수 있다.

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

 

 

4. setTimeout 과 setlnTerval

-setTimeout

 

3초후에 출력하기

다른 언어 

print "hello..."
pause(3000)
print "are you still there?"

 javascript

console.log("hello....")
setTimeout(() => {
    console.log("... are you still there?")
}, 3000)

 

-setInterval

 

페이지가 열린동안 작업을 계속 작동 시킨다.

 

3초마다 주사위값 돌리기

const id = setInterval(()=>{
    console.log(Math.floor(Math.random() * 6) + 1)
} ,3000);

 

 

종료 구문 clearInterval(이름)

 

 

 

5.filter

필터링할 아이템들이 있을때 사용한다.

const item = [1,2,3,4,5,6,7,8,9,10,11,12,13,14]

item.filter(n => {
    return n < 10
})

 

 

6.Reduce

배열을 가져다가 점차 줄여가면서 마지막에 하나의 값만 남겨놓는것이다.

const prices = [2, 3, 4, 6, 7]


const total = prices.reduce((total, price) => {
    return total + price
}
)