[Javascript] 자바스크립트의 함수
in Study on Web & Frontend
자바스크립트의 함수
화살표 함수
const double = function (x) {
return x * 2
}
const doubleArrow1 = (x) => x * 2
const doubleArrow2 = (x) => {
return x * 2
}
console.log(double);
console.log(doubleArrow1);
console.log(doubleArrow2);
화살표 함수란, 위와 같이 함수를 축약해서 나타낼 수 있는 기능이다.
위의 세 가지 코드의 결과는 모두 같다.
즉, x에다가 8을 넣으면
16
16
16
으로 결과가 모두 같다.
const doubleArrow = (x, y) => x * y
위와 같이 입력 변수를 여러개 받을 수도 있으며,
const Object = x => ({
name:'Wookey',
age:'28'
})
객체를 소괄호로 감싸서 객체 데이터도 화살표 함수로 나타낼 수 있다.
핵심은 function과 같은 문법을 축약해준다는 것이다.
그러나, 중간에 로직이 필요하고, 반환 값이 필요하다면 중괄호안에 함수를 적고 return 값을 적어주자.
즉시실행함수 (IIFE)
(function () {
console.log(7 * 2)
}());
(function () {
console.log(7 * 2)
})();
일회용 함수라고 생각하면 편하다.
함수에 이름을 짓지 않고 스크립트에서 그 자리에서 즉시 사용하는 함수이다.
호이스팅
함수선언부가 유효범위의 최상단으로 끌어올려지는 현상을 말한다.
double()
const double = function() {
console.log(7 * 2)
}
# 결과 : TypeError
위와 같이 함수를 상수, 변수 형태로 선언하기 전에 함수를 호출할 경우 에러가 발생하지만,
double()
function double() {
console.log(7 * 2)
}
# 결과 : 14
위와 같이 함수 선언을 진행한다면 에러없이 작동한다.
즉, 스크립트의 최상단에서 함수가 무엇이 있는지 집합을 시킨다음에 스크립트를 진행한다. 그래서 double()을 함수선언문의 위에 적어도 에러가 발생하지 않는다고 설명하고 싶다.
var 변수와 let 변수의 차이 또한 호이스팅의 차이에서 나타난다.
참고링크 : 코딩알려주는누나
console.log(a);
var a = 7;
# 결과 : undefined
console.log(a);
let a = 7;
# 결과 : error
var는 호이스팅이 유효하지만, let은 그렇지 않다.
따라서, 변수 선언 시에는 var보다는 let이 더 많이 선호된다.
타이머 함수
setTimeout(함수, 시간): 일정 시간 후 함수 실행
setInterval(함수, 시간) : 시간 간격마다 함수 실행
clearTimeout(): 설정된 Timeout 함수를 종료
clearInterval(): 설정된 Interval 함수를 종료
타이머 함수의 종료는 위와 같다.
setTimeout 함수
// 코드 예시
setTimeout(function () {
console.log('hello world!');
}, 3000)
// 3000ms 뒤에 실행 (즉, 3초 뒤에 실행)
setTimeout(() => {
console.log('hello world!');
}, 3000)
// 화살표 함수로도 적용 가능!
clearTimeout 함수
// 코드 예시
const timer = setTimeout(() => {
console.log('hello world!');
}, 3000)
const h1E1 = document.querySelector('h1');
h1E1.addEventListner('click', () => {
clearTimeout(timer)
})
기존의 setTimeout 함수를 const 형태로 선언하고, 이를 통해 clearTimeout(const) 형태로 적용할 수 있다.
위의 코드는 html에 h1요소를 클릭하면 작동하도록 코드가 짜여진 형태이다.
setInterval, clearInterval 함수
// 코드 예시
const timer = setInterval(() => {
console.log('hello world!');
}, 3000)
const h1E1 = document.querySelector('h1');
h1E1.addEventListner('click', () => {
clearInterval(timer)
})
3초에 한번씩 hello world!가 출력된다. 이는 h1을 클릭할 때 까지 계속 적용된다.
콜백
콜백이란, 함수의 인수로 사용되는 함수를 가리킨다.
function timeout() {
setTimeout(() => {
console.log('Hello!')
}, 3000)
}
timeout()
이렇게 하면 3초 뒤에 timeout()이 출력되며 Hello!가 출력된다.
function timeout() {
setTimeout(() => {
console.log('Hello!')
}, 3000)
}
timeout()
console.log('Done!');
하지만 이 코드를 실행한 결과는
Done!
Hello!
이다.
왜냐하면 timeout()이 실행되는 3초 이내에 console.log(‘Done!’)이 실행되어 위와 같이 출력되는 것이다.
그렇다면, Hello!를 먼저 출력하고 싶다면?
function timeout() {
setTimeout(() => {
console.log('Hello!')
console.log('Done!');
}, 3000)
}
timeout()
위와 같은 방법도 있겠지만, 여기서 활용할 수 있는 방법이 콜백이다.
function timeout(cb) {
setTimeout(() => {
console.log('Hello!')
cb()
}, 3000)
}
timeout(() => {
console.log('Done!')
})
위와 같은 형태로 작성할 수 있다.
3초 뒤에 실행되는 timeout()함수 내에서 cb()위의 내용 들을 먼저 처리하고 그 다음에 나머지 내용을 처리하는 식이다.
주로 콜백할 내용이 처리할 스크립트가 많을 때 사용한다.
