1. 함수 선언
function sum(x, y)
{
return x + y
}2. 함수 표현
익명함수를 변수에 저장하는 방식
const sum = function (x, y) {
return x + y
}호이스팅이라는 것을 곧 배울 것인데 이 때, 함수의 선언과 표현이 다르게 동작하니 기억해두는 것이 좋다.
3. arguments
그리고 함수에서는 arguments라는 것을 활용할 수 있다.
ex.
function sum() {
console.log(arguments)
return arguments[0] + arguments[1]
}
console.log(sum(1,2))
브라우저의 콘솔에 출력되는 내용은 위와 같다.
arguments의 관한 내용이 처음 출력되고
그 다음 arguments[0]과 [1]에 각각 1,2가 저장되어 있으므로 함수 내에서 이를 활용할 수 있다.
(매개변수의 개수가 가변일 때 활용 가능, 단, 일반적으로는 매개변수를 지정해서 사용하는 것이 맞다.)
ex.
function sum() {
x = 0
len = arguments.length
for(i = 0; i < len; i++)
{
x += arguments[i]
}
return x
}
console.log(sum(1,2,3,4,5))콘솔에는 15가 출력된다.
4. 화살표 함수
const double = function (x) {
return x * 2
}
console.log('double: ', double(7))
const doubleArrow = x => x * 2
console.log('doubleArrow: ', doubleArrow(7))doubleArrow 와 double 은 같은 기능을 하는 함수이다.
화살표함수는 이렇게 내용을 축약해서 나타낼 수 있다.
이 때 매개변수가 여러개이면
const doubleArrow = (x, y) => (x + y) * 2
console.log('doubleArrow: ', doubleArrow(7, 4))이런 식으로 괄호를 이용할 수 있다.
그리고 화살표 함수에서 내용이 길어져서 중괄호를 사용하게 되면 안에 return할 내용에 대해서 return문을 사용해주어야 한다.
const doubleArrow = (x, y) => {
return (x + y) * 2
}
console.log('doubleArrow: ', doubleArrow(7, 5))
이 때 화살표함수가 반환하는 값으로는 문자열, 배열 등등 이것저것 값이 들어갈 수 있으나, 화살표함수에서 return문을 사용하지 않고 리턴값을 축약하여 나타낼 때 object함수를 리턴하기 위해 중괄호를 쓴다면, 이는 블록을 뜻하는 중괄호가 중복된다.
그래서 둘 중 하나로 인식되는 것을 정해야하는데 중괄호로 인식되게 JS는 설계되어 있다.
그럼 객체데이터는 축약형으로 리턴할 수 없을까?
가능하다. 단, 중괄호를 소괄호로 감싸서 나타내야한다.
ex.
const doubleArrow = (x, y) => ({x : y})
console.log('doubleArrow: ', doubleArrow(7, 5))콘솔에 출력되는 내용:
5. IIFE
즉시실행함수
IIFE : Immediately-Invoked Function Expression
(즉시 작동하는 함수 표현)
invoke : 불러오다, 작동시키다
ex.
const a = 7;
(function () {
console.log(a + 2)
})()익명함수 앞에는 앞의 문장이 끝났다는 정보인 세미콜론이 반드시 필요하다.
작성한 함수를 괄호로 묶어줘서 변수에 할당된 것처럼 사용할 수 있다.
이는 다음과 같이 사용할 수도 있다.
const a = 7;
(function () {
console.log(a + 2)
}())이 때는 소괄호로 안의 내용들을 하나로 묶었다고 볼 수 있다.
6. 호이스팅
함수 선언부가 유효범위 최상단으로 끌어올려지는 현상
함수 선언을 작성하면 브라우저가 동작할 때 함수 선언부는 최상단으로 올라가서 만들어지게 된다.
(그럼 읽을 때는 함수 선언부터 먼저 찾고 나서 컴파일을 시작하겠군)
함수 표현 같은 경우에는 적용되지 않는 개념이다.
7. 타이머 함수
setTimeout(함수, 시간): 일정 시간 후 함수 실행
setInterval(함수, 시간): 시간 간격마다 함수 실행
clearTimeout() : 설정된 Timeout 함수를 종료
cleatInterval() : 설정된 Interval 함수를 종료
이 때 시간 매개변수에서 사용되는 단위는 ms이다.
(1000ms는 1초이다.)
ex.
setTimeout(() => console.log('Hello JS'), 3000)ex.
const timer = setTimeout(() => console.log('Hello JS'), 3000)
const h1El = document.querySelector('h1')
h1El.addEventListener('click', () => {
clearTimeout(timer)
})이렇게 작성하면 해당 h1태그를 클릭하면 'Hello JS' 가 출력되지 않는 것을 볼 수 있다.
const timer = setInterval(() => console.log('Hello JS'), 3000)
const h1El = document.querySelector('h1')
h1El.addEventListener('click', () => {
clearInterval(timer)
})이렇게 하면 3초마다 Hello Js가 콘솔에 출력이 되지만 해당 h1태그를 클릭하면 더 이상 출력이 되지 않는다.
8. 콜백
콜백은 함수의 인수로 사용되는 다른 함수를 의미한다.
예시로 setTimeout(함수, 시간) 에서 인수로 사용되는 함수가 있다.
function timeout() {
setTimeout(() => console.log('Hello Java'), 3000)
}
timeout()
console.log('Done')위와 같이 작성을 하면
콘솔에서는 이렇게 timeout함수를 호출한 후에 timeout함수가 종료되지 않더라도 바로 다음 코드를 호출하는 것을 볼 수 있다.
이 떄 timeout함수가 종료된 후 done함수를 호출하고 싶다면 어떻게 해야할까?
ex.
function timeout(cb) {
setTimeout(() => {
console.log('Hello Java')
cb()
}, 3000)
}
timeout(() => console.log('Done'))이렇게 cb함수 즉, 콜백함수를 통해서 모든 처리 이후에 원하는 내용을 출력해줄 수 있었다.
즉, 정리하면 콜백함수란 함수의 인자로 사용되는 함수라는 간단한 개념이지만 이 콜백함수를 이용하여 특정 함수의 실행 위치를 보장해줄 수 있었다.
