함수란 무엇인가?
함수는 어떤 기능을 수행하기 위한 블록{ }이다. 어떤 기능을 반복적으로 사용된다면 함수로 만든 후 여러번 호출해서 쓸 수 있다.
그렇다면 함수는 어떻게 만들까
일단 함수를 정의하는 방법은 함수 선언문, 함수 표현식, 화살표 함수가 있다.
나는 함수 선언문, 함수 표현식을 알아보려고 한다.
1. 함수 선언문
function funName(num1, num2) {
return num1 + num2
}
funName(1, 2) // 함수호출 return 값은 3
함수 선언문은 function 키워드 뒤에 함수이름을 정의해준다.
함수 이름 뒤에는 괄호()안에 매개변수를 넣어준다. 없을 경우에는 생략가능하다.
그 다음 중괄호{} 안에 함수를 호출했을 때 실행될 코드를 넣어준다.
2. 함수 표현식
const sum = function funcName(num1, num2) {
return num1 + num2
}
sum(1, 2)
함수 표현식은 변수에 함수를 할당하는 방식이다.
함수 표현식으로 함수를 만든 경우에는 함수를 담은 변수명으로 함수를 호출해준다.
함수 표현식의 경우 함수 이름을 생략할 수 있는데 이런 함수는 익명함수라고 한다.
const sum = function(num1, num2) { // 함수 이름 생략 -> 익명함수
return num1 + num2
}
sum(1, 2)
3. 함수 선언문과 함수 표현식 동작 방식
함수 선언문과 함수 표현식은 동작 방식에 차이가 있다. 자바스크립트 엔진이 변수/함수를 호이스팅할 때,
함수 선언문으로 정의한 함수는 선언, 초기화가 동시에 이뤄진다. 즉, 코드 상 함수를 선언하기 전에 해당 함수를 호출할 수 있다.
함수 표현식은 함수가 아닌 함수를 참조하는 변수가 호이스팅 된다. 함수 표현식은 실제 함수가 할당되는 시점에서 값이 들어오기 때문에
그 전에 함수를 호술하면 에러가 발생한다.
내가 듣고 있는 강의에서는 이런 동작 방식 차이때문에 함수 표현식을 더 선호한다고 했다.
다음에는 화살표 함수를 정리해야겠다.
'STUDY > JavaScript' 카테고리의 다른 글
[javascript] 배열1 - 얕은 복사, 깊은 복사 (0) | 2022.12.29 |
---|---|
[javascript] 함수3 - Rest 연산자 (0) | 2022.12.20 |
[javascript] 함수2 - 화살표 함수 (0) | 2022.12.17 |
[javascript] Set을 이용해서 중복 제거하기 (0) | 2022.01.06 |
[JavaScript] 객체 (0) | 2022.01.03 |
댓글