05-2. 함수 고급

• 콜백 함수 : 매개변수로 전달하는 함수

// 함수 선언
function callThreeTimes (callback) {
    for (let i = 0; i < 3; i++) {
        callback(i) // -> callback 이라는 매개변수는 함수이므로 호출 가능
    }
}

function print (i) {
    console.log(`${i}번째 함수 호출`)
}

// 함수 호출
callThreeTimes(print)

 

- 콜백 함수를 사용하는 forEach() 

 

배열이 갖고 있는 함수(메소드)로써 단순하게 배열 내부의 요소를 사용해서 콜백 함수를 호출한다.

function (value, index, array) {}

// 배열의 forEach() 메소드
const numbers = [273, 52, 103, 32, 57]

numbers.forEach(function (value, index, array) {
    console.log(`${index}번째 요소 : ${value}`)
})

- 콜백 함수를 사용하는 map()

 

콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수이다.

// 배열을 선언
let numbers = [273, 52, 103, 32, 57]

// 배열의 모든 값을 제곱
numbers = numbers.map(function (value, index, array) {
    return value * value
})

// 출력
numbers.forEach(console.log)

- 콜백 함수를 사용하는 filter()

 

콜백 함수에서 리턴하는 값이 true 인 것들만 모아서 새로운 배열을 만드는 함수이다.

const numbers = [0,1,2,3,4,5]
const evenNumbers = numbers.filter(function (value) {
    return value % 2 === 0
})

console.log(`원래 배열 : ${numbers}`)
console.log(`짝수 배열 : ${evenNumbers}`)

• 화살표 함수 : 익명 함수를 간단하게 사용하기 위한 목적으로 만들어진 함수 생성 문법, () => {} 형태로 함수를 만들고, 리턴값만을 가지는 함수라면 () => 값 형태로 사용할 수 있음

(매개변수) => {

}

// 간편하게 사용
(매개변수) => 리턴값

const array = [0,1,2,3,4,5,6,7,8]

console.log(array.map((value) => value * value))

- 배열의 메소드와 화살표 함수

// 배열 선언
let numbers = [0,1,2,3,4,5,6,7,8,9]

// 배열의 메소드를 연속적으으로 사용
numbers
        .filter((value) => value % 2 === 0) //배열의 값 중 짝수만 가져오기
        .map((value) => value * value) // 가져온 값 제곱
        .forEach((value) => { // 인덱스만큼 반복해서 끝까지 값 가져오기
            console.log(value)
        })
        
        
        // 메소드 체이닝 : 어떤 메소드가 리턴하는 값을 기반으로 해서 함수를 줄줄이 사용하는 것(6~8)

• 타이머 함수 : 특정 시간마다 또는 특정 시간 이후에 콜백 함수를 호출할 수 있는 함수, 시간과 관련된 처리 가능

- 타이머 걸기

setTimeout(함수, 시간) // 특정 시간 후에 함수를 한 번 호출
setInterval(함수, 시간) // 특정 시간마다 함수를 호출

// 1초후 실행
setTimeout(() => {
    console.log('1초 후에 실행')
}, 1 * 1000)

// 1초마다 실행
let count = 1
setInterval(() => {
    console.log(`1초마다 실행(${count}번째)`)
    count++
}, 1 * 1000)

1초마다 n번째 실행

- 타이머 취소하기

clearTimeout(타이머_ID) // setTimeout() 함수로 설정한 타이머를 제거
clearInterval(타이머_ID) // setInterval() 함수로 설정한 타이머를 제거

// 타이머 ID : setTimeout() 함수와 setInterval() 함수를 호출할 때 리턴값으로 나오는 숫자

let id
let count = 1
id = setInterval(() => {
    console.log(`1초마다 실행됩니다(${count}번째)`)
    count++
}, 1 * 1000)

setTimeout(() => {
    console.log('타이머를 종료합니다.')
    clearTimeout(id)
}, 5 * 1000)

1번째 부터 5번째까지 5초간 실행 후 타이머 종료

• 즉시 호출 함수 : 변수의 이름 충돌을 막기 위해서 코드를 안전하게 사용하는 방법

(function () {})()

//스코프(scope) : 변수가 존재하는 범위

//섀도잉(shadowing) : 블록이 다른 경우 내부 변수가 외부 변수를 가리키는 현상

• 엄격모드 : 자바스크립트의 문법 오류를 더 발생시켜 실수를 줄일 수 있는 방법. 'use strict' 라는 문자열을 블록 가장 위쪽에 배치해서 사용

'use strict'
문장
문장

'use strict'
data = 10
console.log(data)

// 일반적인(엄격 모드X) 자바스크립트 코드에서는 문제없이 실행되지만, 'use strict' 엄격 모드에서는
// data라는 변수를 let 키워드 등으로 선언하지 않고 사용하게되면 오류가 발생한다.

• 익명 함수 : 순차적인 코드 실행에서 코드가 해당 줄을 읽을 때 생성

// 변수를 선언
let 익명함수

// 익명 함수를 2번 생성
익명함수 = function () {
    console.log('1번째 익명 함수입니다.')
}
익명함수 = function () {
    console.log('2번째 익명 함수입니다.')
}

// 익명 함수 호출
익명함수()

• 선언적 함수 : 순차적인 코드가 실행이 일어나기 전에 생성

선언적함수() // -> 선언적 함수를 생성하는 코드 앞에 입력

// 선언적 함수를 2번 생성
function 선언적함수 () {
    console.log('1번째 선언적 함수')
}
function 선언적함수 () {
    console.log('2번째 선언적 함수')
}

- 선언적 함수와 익명 함수의 조합

// 익명 함수를 생성
함수 = function () {
    console.log('익명 함수 입니다.')
}

// 선언적 함수를 생성 후 할당
function 함수 () {
    console.log('선언적 함수 입니다.')
}

// 함수 호출
함수()

순차적으로 코드를 읽는 '익명 함수' 가 호출됨

결론 : 안전하게 사용할 수 있는 익명 함수를 더 선호

// + var 쓰지말고 let, const 써라라

============================================================================================

출처 : 혼자 공부하는 자바스크립트

============================================================================================

내배캠4기 노드트랙 사전캠프 '혼공스' 5일차...

 

예정되로면 ch10 까지 했어야했는데

 

무슨일이냐

 

ch5... 겨우 권장진도량까지 나갔다... 그것도 힘들게

 

원래 계획은 오늘 ch6 객체를 마무리하려고했는데, 오늘만 본다면 반망했다...

 

주말에 푹 쉬려고했는데, 자격없는거 같다...

 

토요일 일요일동안 ch6 객체는 꼭 마무리해야겠다.