프론트엔드 개발일지 #15 - 콜백과 배열01 (forEhch, map, 화살표 함수,setTimeout/setInterval)

forEhch 메서드

배열 안의 아이템 각각에 대해 함수와 코드를 한 번씩 실행.
어떤 함수를 넣든 상관없이 함수가 아이템별로 한 번씩 호출되고 각각의 아이템이 함수에 자동으로 전달된다.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

function print(element) {
  console.log(element);
}
print(nimbers[0]) //1
// 이거 대신에 forEhch를 사용해보자
numbers.forEhch(print) //모든 요소 출력
//함수표현식을 넣는다면
numbers.forEhch(function (el) {
  console.log(el);
})
//모든 요소를 출력한다.
//이걸 for ~of 사용한다면
for (let el of numbers) {
  console.log(el);
}

//더 복잡하게 한다면,
numbers.forEhch(function (el) {
  if ( el % 2 === 0) {
    console.log(el);
  } //2의 배수들만 모두 출력이 된다.

이런식으로 사용 할 수 있다.
다음 예제는 데이터 구조와 영화의 배열인데 안에는 객체가 들어있다.

const movies = [
   {
       title: 'Amadeus',
       score: 99
   },
   {
       title: 'Stand By Me',
       score: 85
   },
   {
       title: 'Parasite',
       score: 95
   },
   {
       title: 'Alien',
       score: 90
   }
]
//출력하고싶은건 '영화제목 - 90/100'이다.
movies.forEhch(function (movie) {
 console.log(`${movie.title} - ${movie.score}/100`)
}

Map

콜백 함수를 수령해서 배열의 요소당 1번씩 실행한다는 점에서 forEhch와 비슷하다. 하지만 큰 차이점은 그 다음에 그 콜백의 반환 값을 이용해서 새로운 배열을 생성한다는 것**이다.
즉, 이 방법은 배열을 다른 상채로 매핑하는 것이다.

const texts = ['rofl', 'lol', 'omg', 'ttyl'];
const caps = sexts.map(function (t) {
  return t.toUpperCase();
})

texts; //  ["rofl", "lol", "omg", "ttyl"]
caps; // ["ROFL", "LOL", "OMG", "TTYL"]

만약에 아까 그 숫자 배열로 예시를 들자면, 모두 두배로 곱해서 새로운 배열을 생성 할 수 있다.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

const double = numbers.map(function(num) {
  return num * 2;
})

double; 
//[2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40]
//새로운 배열이 반환된다.

영화 코드를 예시를 들자면,

const movies = [
    {
        title: 'Amadeus',
        score: 99
    },
    {
        title: 'Stand By Me',
        score: 85
    },
    {
        title: 'Parasite',
        score: 95
    },
    {
        title: 'Alien',
        score: 90
    }
]

const title = movies.map (function (movie) {
  return movie.title;
})

title;
//["Amadeus", "Stand By Me", "Parasite", "Alien"]

원래 배열에 있던 데이터를 가져와서 Map을 통해 새로운 복제 배열에 넣을 때,
보통 변환한다. 데이터의 일부만 가져오거나 두배로 늘릴 때 사용한다. 하지만 원래 배열의 모든 요소를 변환하고 원래 배열을 기반으로 새로운 배열을 생성한다.

하지만 콜백은 예외다. 그 경우 요소마다 콜백을 실행하고 반환 값을 받게 된다. 그걸 받아서 새로운 배열에 집어넣고 반환되면 변수에 저장한다.

Map 실습

firstNames라는 이름의 변수를 정의하고 이를 기존 배열인 fullNames을 map 메서드를 사용해 변환한 결과에 할당하여 firstNames에 fullNames 배열에 있는 해리포터 등장인물의 이름(성을 제외한)만 포함되도록 하세요.

예:

console.log(firstNames); // ['Albus', 'Harry', 'Hermione', 'Ron', 'Rubeus', 'Minerva', 'Severus']

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;
});

내 풀이는 이렇다. 근데 이걸 화살표 함수로 표현 한다면,

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

이렇게도 코드를 적을 수 있다.

화살표 함수

const add = function(x,y) {
     return x + y;
  
//화살표 함수로 바꾸면,
const add = (x, y) => {return x + y;}

// 다른 예를 더 보자
const square = (x) => {return x * x;}
const square = x => {return x * x;}

//인수가 없는 함수의 화살표 함수
const rollDie = () => {return (Math.floor() * 6) + 1}

화살표 함수 연습

greet라는 이름의 화살표 함수 표현식을 작성하세요. 이 함수는 사람의 이름을 나타내는 단일 문자열 인수를 받아야 하며 아래와 같은 인사말 문자열을 반환해야 합니다.

greet("Hagrid") //"Hey Hagrid!"
greet("Luna") //"Hey Luna!"
반드시 화살표 함수 구문을 사용하세요!

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

• 화살표 함수의 반환

//암시적 반환
// 함수의 바디에 표현식이 하나만 있어야 한다.
const rollDie = () =>(
Math.floor(Math.random() * 6) + 1
)
//return이 없는데도 반환이 된다. 

const add = (a,b) => a + b

하지만 함수가 여러개인 경우에는 암시적 반환을 사용하지 않는다.

==> 화살표 함수 요약

const movies = [
    {
        title: 'Amadeus',
        score: 99
    },
    {
        title: 'Stand By Me',
        score: 85
    },
    {
        title: 'Parasite',
        score: 95
    },
    {
        title: 'Alien',
        score: 90
    }
]

//이 코드에 매핑을 하고 싶다고 한다면,
const newMovies = movies.map(function (movie) {
     return `${movie.title} - ${movie.score / 10}`
 })

//이걸 화살표 함수로 바꾸면
const newMovies = movies.map(movie => (
    `${movie.title} - ${movie.score / 10}`
))

setTimeout / setInterval

이 함수들에는 콜백 함수를 전달해줘야 하지만 그렇다고 배열 메서드는 아닌 함수들이다.
실행을 연기하고, 대기하고, 중단 시키거나 추후 날짜로 실행을 연기하거나 또는 기본적으로 작업 일정을 정한다.

• setTimeout

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

//이걸 JS로 변환한다면,
console.log("hello...")
setTimeout(() => {
     console.log("Are you still there?")
), 3000)

console.log("GOODBYE!!!")
//hello...와 GOODBYE!!!가 먼저 실행되고
//3초뒤에 Are you still there?가 실행된다.

• setInterval
  전달할 함수를 호출하는데 콜백을 매 특정 밀리 초마다 한다. 인터벌을 두고 반복한다

setInterval(() => 
      console.log(Math.random())
}, 2000)

//2초마다 함수를 실행한다
//이 함수를 멈추려면 clearInterval사용
const id = setInterval(() => 
      console.log(Math.random())
}, 2000);

clearInterval(id);

비동기 자바스크립트의 핵심적인 두가지이다.