Section 22: 콜백과 배열

1. 이 섹션에서는 무엇을 배울까?

• 새로운 화살표 함수 문법
• 배열의 메서드를 이해한다.
  • forEach
  • map
  • filter
  • find
  • reduce
  • some
  • every

 

2. forEach 메서드

• 배열의 요소를 하나씩 순회하는 메서드

예제 1

const numbers = [1, 2, 3, 4, 5];

function print(element) {
    console.log(element);
}

numbers.forEach(print);

// for... of와 같은 결과를 확인할 수 있다.
numbers.forEach(function (el) {
    console.log(el);
})

예제 2

const movies = [
    {
        title: '신세계',
        score: 8.7
    },
    {
        title: '극한직업',
        score: 8.3
    },
    {
        title: '타짜',
        score: 9.6
    },
    {
        title: '엑시트',
        score: 8.85
    },
    {
        title: '설국열차',
        score: 9.1
    },
]

movies.forEach(function(movie) {
    console.log(`${movie['title']} - 평점: ${movie['score']}/10`);
})

// 신세계 - 평점: 8.7/10
// 극한직업 - 평점: 8.3/10
// 타짜 - 평점: 9.6/10
// 엑시트 - 평점: 8.85/10
// 설국열차 - 평점: 9.1/10

 

3. Map 메서드

• 배열의 요소를 순회하며 요소의 값을 변경하여 새로운 배열을 만든다.

const numbers = [1, 2, 3, 4, 5];
// 원본 배열 자체가 변경되지는 않는다.
const doubles = numbers.map(function(num) {
    return num * 2;
})

console.log(doubles); // [2, 4, 6, 8, 10]

 

4. 화살표 함수 개요

• 기존의 함수 표현식 보다 더 간결하다.
• function 키워드 없이 함수를 선언할 수 있다.

예제 

// 일반적인 함수 표현식
const sum = function(a, b) {
    console.log(a + b);
}

sum(1, 2); // 3

// function 키워드를 생략한 화살표 함수
const calSum = (a, b) => {
	return console.log(a + b);
}

calSum(1, 2); // 3

 

5. 화살표 함수의 반환

• 특정 상황에서 return 키워드 조차 생략 가능하다.
• 암시적 반환 코드에서는 하나의 반환 코드만 존재하여야 한다.

예제 1

// 화살표 함수의 암시적 반환
const sum = (a, b) => (
	// return 키워드 생략, 중괄호 -> 소괄호
	console.log(a + b);
)

sum(1, 2); // 3

예제 2

// return 키워드마저 생략 가능하다.
const calSum = (a, b) => console.log(a + b);

calSum(1, 2); // 3

 

 

 

6. 화살표 함수 요약

예제 1

// 화살표 함수를 사용하지 않은 코드

const movies = [
    {
        title: '신세계',
        score: 8.7
    },
    {
        title: '극한직업',
        score: 8.3
    },
    {
        title: '타짜',
        score: 9.6
    },
    {
        title: '엑시트',
        score: 8.85
    },
    {
        title: '설국열차',
        score: 9.1
    },
]

const newMovies = movies.map(function(movie) {
    return `${movie.title} - ${movie.score * 10}`;
});

// ['신세계 - 87', '극한직업 - 83', '타짜 - 96', '엑시트 - 88.5', '설국열차 - 91']

예제 2

// 화살표 함수와 암시적 반환을 사용한 코드

const movies = [
    {
        title: '신세계',
        score: 8.7
    },
    {
        title: '극한직업',
        score: 8.3
    },
    {
        title: '타짜',
        score: 9.6
    },
    {
        title: '엑시트',
        score: 8.85
    },
    {
        title: '설국열차',
        score: 9.1
    },
]

// map 내부의 소괄호도 생략 가능하다.
const newMovies = movies.map(movie => (
        `${movie.title} - ${movie.score * 10}`
));
// ['신세계 - 87', '극한직업 - 83', '타짜 - 96', '엑시트 - 88.5', '설국열차 - 91']

 

7. setTimeout과 setInterval

• 비동기처리되는 시간과 관련된 함수이다.
• setTimeout에는 두개의 인자(콜백함수, 지연시간ms)가 필요하다.

setTimeout 예제

console.log('프로그램 실행');

// 3초(3000ms) 뒤에 콜백함수가 실행된다.
setTimeout(() => {
    console.log('똑똑똑 계세요~?');
}, 3000);

console.log('프로그램 종료');
// 프로그램 실행
// 프로그램 종료
// 
// 똑똑똑 계세요~?

setInterval 예제

// 1초 마다 '😝'가 출력되는 코드
const stop = setInterval(() => {
    console.log('😝');
}, 1000);

// setInterval()를 중지시키는 함수
clearInterval(stop);

 

8. Filter 메서드

• 배열의 요소를 필터링하거나 부분 집합을 모아 새로운 배열을 생성한다.

예제

const numbers = [1, 2, 3, 4, 5];

// 배열의 요소를 순회하며 조건에 대해 참인 요소만 새로운 배열에 삽입한다.
const smallNums = numbers.filter(num => num < 4);

console.log(smallNums); // [1, 2, 3]

 

9. Some과 every 메서드

• 불리언 메서드로 조건을 거쳐 참이나 거짓만을 반환한다.

every 메서드 예제

// 모든 요소가 조건에 충족하면 참을 반환한다.
let result = exams.every((score) => score > 60);
result // true

// 요소 중 62가 70보다 작기 때문에 거짓을 반환한다.
result = exams.every((score) => score > 70);
result // false

 some 메서드 예제

const exams = [87, 95, 96, 90, 77, 73, 88, 62];

// 요소 중 하나라도 조건에 충족하면 true를 반환한다.
let result = exams.some((score) => score > 95);
result // true

// 99를 넘는 요소가 하나도 없으므로 false를 반환한다.
result = exams.some((score) => score > 99);
result // false

 

10. 악명 높은 Reduce 메서드

• 배열의 각 요소의 결과를 계산하고 단일 값을 반환하는 메서드이다.
• 두개의 매개변수를 갖는다.

예제 1

const scores = [87, 95, 96, 90, 77, 73, 88, 62];

// 첫번째 매개변수는 결과 값이 할당된다. 첫 순회에서는  첫번째 요소 값을 가진다.
// 두번째 매개변수는 두번째 요소부터 순차적으로 순회한다.
const total = scores.reduce((total, score) => 
    // 해당 코드를 반복한다.
    total + score
);

total // 668

// 첫번째 매개변수에 초기값 주기
total = scores.reduce((total, score) => total + score, 100);

// 첫 순회부터 total은 이미 100을 가지고 있어 결과 값은 100 + 668이 된다.
total // 768

예제 2

const scores = [87, 95, 96, 90, 77, 73, 88, 62];
// 최소 점수를 구하는 코드
const minPrice = scores.reduce((min, score) => {
    if(min > score) {
        return score;
    } 
    return min;
});

min // 62

 

11. 화살표 함수와 'this'

• object의 property에 있는 화살표 함수는 this를 window object로 인식한다.
• propety의 정규 함수 내부의 화살표 함수는 this를 함수 범위 내에 있는 object로 인식한다.

// 정규 표현 함수와 화살표 함수가 가르키는 this가 다름을 인지하자.
const puppy = {
    nickname: '삐삐',
    age: 2,
    // 화살표 함수의 경우 this는 상위 객체인 window를 가르킨다.
    bow: function() {
        return `${this.nickname} 으르릉!`;
    },
    callPuppy () {
        setTimeout(()=>{
            console.log(this.bow()); 
        },2000)
    }
};

puppy.bow(); // '삐삐 으르릉!'
puppy.callPuppy(); // '삐삐 으르릉!'