안녕하세요. Tay 입니다.
한 서적에서는 함수 선언 3가지 방식 중에 함수 표현식만 사용할 것을 권장하고 있습니다.
이번 글에서는 그 이유와 ES6에서 추가된 화살표 함수에 대해서 배우도록 하겠습니다.
함수 호이스팅(Hoisting)
함수 생성 동작의 차이를 확인할 수 있다.
1) index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<!-- <script src="function.js"></script> -->
<script src="hoisting.js"></script>
</body>
</html>
2) hoisting.js
console.log(statAdd(3, 5));
function statAdd(x, y) {
return x + y;
}
console.log(statAdd(3, 4));- 첫번째 콘솔에서 선언 전의 statAdd 를 호출한다.
- 함수 선언문으로 statAdd 함수를 선언했다.
- 선언된 statAdd 함수를 호출한다.
결과 :
첫번째 콘솔에서 정의되지 않은 함수 statAdd 를 사용했음에도 호출이 가능했다.
※ 함수 선언문 형태로 정의한 함수의 유효 범위는 코드의 맨 처음부터 시작한다. 이것을 함수 호이스팅 이라고 부른다.
이번에는 함수 표현식으로 함수를 생성해봤다.
- hoisting.js
console.log(expAdd(3, 3));
let expAdd = function(x, y) {
return x + y;
};
console.log(expAdd(3, 2));- 첫번째 콘솔에서 정의되지않은 expAdd 함수를 호출한다.
- 함수 표현식으로 expAdd 를 정의했다.
- 두번째 콘솔에서 expAdd 를 호출한다.
결과 :
함수 표현식 방식에서는 호이스팅이 발생하지 않는다.
함수를 생성하기 전이므로 위의 에러가 발생됐다.
첫번째 콘솔을 주석 처리하니, 일전의 에러가 사라졌다.
에로우 함수화살표(Arrow) 함수
함수 표현식에서 살짝 변형된 형태이다. (함수 표현식처럼 호이스팅이 발생되지 않는다.)
ES6 에서 새롭게 추가 된 함수이다.
1) index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<!-- <script src="function.js"></script> -->
<!-- <script src="hoisting.js"></script> -->
<script src="arrow.js"></script>
</body>
</html>2) arrow.js
var addVar = function(x, y) {
return x + y;
};
let addLet = (x, y) => x + y;
console.log(addLet(1, 2));- ES6에서 새롭게 추가 된 화살표 함수 이다.
- function 을 생략하고, 매개변수는 ( ) 안에 선언한다.
- 실행 될 코드는 => 다음에 작성하고, 한줄인 경우는 return 을 생략하여 작성할 수 있다.
예시 2)
let factorial = n => {
if (n <= 1) {
return 1;
}
return n * factorial(n - 1);
};
console.log(factorial(5));- 매개 변수가 하나인 경우 ( ) 생략 가능하다.
- 실행 될 코드는 => 뒤에 { } 안에 작성하면 된다.
예시 1, 2 번 모두 정상적으로 작동 되는 것을 확인 할 수 있다.
정리
함수 선언 방법 3가지 중에서는 함수 표현식으로 작성하고, 화살표 형식으로 변경하여 사용하자!
이 글은 개인 공부목적으로 작성되었습니다.
정보가 잘못 되거나 궁금한 사항은 댓글로 부탁드립니다!! 읽어주셔서 감사합니다.
'JavaScript > Basic-Javascript' 카테고리의 다른 글
| 자바스크립트 정리하며 배우기[18] - 함수의 프로토타입(prototype property)과 constructor (0) | 2020.01.31 |
|---|---|
| 자바스크립트 정리하며 배우기[17] - 일급객체 함수 활용 방법 (0) | 2020.01.28 |
| 자바스크립트 정리하며 배우기[15] - 함수(function) 생성방법 3가지 (0) | 2020.01.22 |
| 자바스크립트 정리하며 배우기[14] - 연산자(Operators) (0) | 2020.01.21 |
| 자바스크립트 정리하며 배우기[13] - 배열(array) length 와 배열 메소드 push , pop, delete 요소 삭제 (0) | 2020.01.08 |
