화살표 함수 **() ⇒ {}**
() ⇒ {} vs function () {}
화살표 함수는 일부 내용들을 생략해서 축약형으로 함수를 최소화할 수 있다.
화살표 함수 사용시 {}를 사용하게 되는데, 이때 객체 데이터를 나타내는 기호와 겹치게 된다.
() ⇒ ({ })형태로 사용하면 객체 데이터도 사용할 수 있다!
// 일반함수
const double = function (x) {
return x * 2
}
console.log('double: ', double(7))
// 화살표 함수
const doubleArrow = (x) => {
return x * 2
}
// 화살표 함수 축약형
const doubleArrow = x => x * 2 // 14
const doubleArrow = (x,y) => x * y * 2 // {}생략 가능
const doubleArrow = x => '123' // 123
const doubleArrow = x => false // false
const doubleArrow = x => 1234 //1234
const doubleArrow = x => null //null
const doubleArrow = x => [1, 2, 3] // [1, 2, 3]
console.log('doubleArrow', doubleArrow(7))
-
객체데이터 {}
객체데이터의 기호는 {}로, 화살표 함수의 사용 기호와 동일하다.
그냥 사용하게 되면 객체데이터로 인식하지 못한다.const doubleArrow = (x,y) => { name: 'Heropy'} //undefined (블록으로 인식한다)-
해결방법
객체데이터를 나타내고 싶을 때 밖에 () 사용한다.
원하던 객체 데이터가 잘 나오는 것을 볼 수 있다.const doubleArrow = (x,y) => ({ name: 'Heropy'}) // name: 'Heropy'
-
즉시실행함수 IIFE
Immediately-Invoked Function Expression
함수를 사용하는데 한번만 사용하고 더이상 사용할 일이 없다면, 굳이 이름을 만들어서 아래에 호출할 필요가 없다. 이럴 때, 즉시실행함수를 사용한다.
const a = 7
// 일반함수
function double() {
console.log(a * 2)
}
double();
-
소괄호 이중 사용 (함수)()
// 즉시실행함수 - 소괄호 이중 사용 (함수)() (function () { console.log(a * 2) })(); -
소괄호 사이에 소괄호 (함수()) => 권장
(function () { console.log(a * 2) }());
호이스팅 (Hoisting)
함수 선언부가 유효범위 최상단으로 끌어올려지는 현상
- 함수 표현
const a = 7 const double = function () { console.log(a * 2) } double() // 14 --------------------- double() const double = function () { console.log(a * 2) } // TypeError함수 표현을 사용했을 때는
함수(double())를 먼저 호출하는 것이 불가능하다. - 함수 선언
const a = 7 double() function double() { console.log(a * 2) } // 14우리가 만든 함수 선언부가 유효범위 최상단으로 끌어졌기에 오류 발생하지 않는다. 이것이 호이스팅이다.
-
호이스팅이 유용할 때
만든 복잡한 함수를 위에서 선언하게 되면 실행하기 전에 굉장히 많은 로직을 거쳐서 실행된다. 그렇기에 해석하기가 비교적 좋지 않다.자바스크립트 호이스팅 현상을 사용하여 해석을 용이하게 한다.
만들어진 함수 선언부는 전체 코드 최하단에 작성한다. 실행하고자 하는 로직은 상단에 작성한다.
이렇게 하면 어떤 것이 실행되는지 해석하기가 용이하고 함수의 이름으로 기능을 유츄할 수 있다.
타이머 함수
-
setTimeout(함수, 시간)
일정 시간 후 함수 실행
시간단위는 ms. 1000ms -> 1초setTimeout(function () { console.log('SOHA') }, 3000) // 3000 -> 3초 // 3초뒤 SOHA 출력 setTimeout(() => { console.log('SOHA') }, 3000) // 3초뒤 SOHA 출력 -
clearTimeout()
설정된 Timeout 함수를 종료Hello world! 클릭시 timer 종료하기
<html> <head> <script defer src="./main.js"></script> </head> <body> <h1>Hello world!</h1> <ul></ul> </body> </html>const timer = setTimeout(function () { console.log('SOHA') }, 3000) const h1El = document.querySelector('h1') h1El.addEventListner('click', () => { clearTimeout(timer) }) // Hello world! 클릭 -> 3초가 지나도 아무것도 뜨지 않음 // 기존에는 3초뒤에 SOHA 출력해야 됨 -
setInterval(함수, 시간)
시간 간격마다 함수 실행const timer = setInterval(function () { console.log('SOHA') }, 3000) // 3초마다 SOHA 출력 -
clearInterval()
설정된 Interval 함수를 종료Hello world! 클릭시 출력 종료하기
<html> <head> <script defer src="./main.js"></script> </head> <body> <h1>Hello world!</h1> <ul></ul> </body> </html>const timer = setInterval(function () { console.log('SOHA') }, 3000) const h1El = document.querySelector('h1') h1El.addEventListner('click', () => { clearInterval(timer) }) // 3초마다 SOHA 출력 // Hello world! 클릭하면 출력이 종료 됨
콜백 (Callback)
함수의 인수로 사용되는 함수이다.
setTimeout(함수, 시간)에서 인수로 함수가 사용이 되는데 이 함수를 콜백이라고 부른다.
function timeout() {
setTimeout(() => {
console.log('SOHA')
}, 3000)
}
timeout()
// 3초뒤 SOHA 출력
console.log('Done')
// Done 출력 후 SOHA 출력
SOHA 출력 후 Done 출력하기 -> 콜백
단, timeout 함수는 건들지 않는다.
function timeout(callback) {
setTimeout(() => {
console.log('SOHA')
callback()
}, 3000)
}
// 콜백 함수
// 인수로 화살표 함수 넣어줌
timeout(() => {
console.log('Done')
})
// SOHA 출력 후 Done 출력
- timeout 함수 인수로 화살표 함수를 넣어 Done 출력을 넣는다.
- timeout함수의 내부에서 해당 인수를 받아줄 매개변수로 callback을 넣어준다.
-
매개변수를 실행을 보장하고 싶은 장소에 함수 호출하듯이 넣는다.
함수 내부에서 매개변수를 부를 때 함수 호출하듯이 사용하는 이유!
timeout 함수의 인수로 사용된 것은 콜백 함수이다.
timeout 함수 내부에서 매개변수 이름은 callback으로 지어주었지만 실제로 사용할때, 해당 매개변수는 함수이기에 함수를 호출하는 것처럼 사용한다. - 즉, timeout이라는 전체함수에 내가 실행을 보장하고 싶은 곳에서 하나의 함수를 실행할 수 있다.
활용
특정한 실행 위치를 보장해주는 방법으로 활용할 수 있다.
Comments