본 강의는 자바스크립트의 기초를 대충 안다고 가정하고 시작하는 조금 심도 깊은 포스팅이다.
완전 처음부터 배우고 싶다면 다른 블로그나 책의 글을 참조하기를 바란다.
특별한 추가 설명이 없다면 nodejs가 아닌 브라우저에서 사용하는 js를 의미한다.
참고:
모든 중급 언어에서는 함수가 다 존재한다.
실제로 존재하지 않는 언어가 있을수도 있다면 아직까지 필자는 본적없다.
아 물론 프로시저나 메소드도 함수에 포함한다는 전제하에서 말이다.
그러니까 당연히 자바스크립트에서도 함수를 선언할 수 있다.
선언할수 있는데 문제는 함수를 선언할 수 있는 방법이 무려 4가지나 된다는 것이다.
일단 왠 4가지 방법이나 있느냐라는데에 대한 대답은... 사실 필자도 모른다.
다만 이 4가지 방법들이 모두 독특한 특징이 있다. 여러분들은 이 특징을 잘 이해하고 사용하면 좋을것 같지만
아직 모든 특징을 언급하진 않겠다. 포스팅이 너무 길어질것 같기도하고...
그래서 이번에는 사용하는 방법에 대해서만 알려드리도록 하겠다.
1. function 지시자로 함수 정의 - 함수 선언식
function functionDeclaration(args) {
console.log(`function expression : ${args}`);
};
익히 아시다시피 가장 유명한 형태이다.
이 방식은 다른 언어에서도 볼 수 있는 단순한 형태로서 여러분에게 가장 익숙할 것이다.
이 방식의 가장 큰 특징은 호이스팅이 적용된다는 것이다.
아래의 나머지 모든 방식은 호이스팅이 적용되지 않는다.
호이스팅에 대해선 지금은 설명하지 않고 다음에 설명하도록 하겠다.
2.함수 리터럴로 함수 정의 - 함수 표현식(일반 함수 사용)
var functionExpressionNormal = function (args) {
console.log(`function declaration normal : ${args}`);
};
이 때 부터 특이한 방식을 사용한다.
익명함수를 사용한 방식으로 파이썬 등의 언어에서 사용하는 방식이다. 사실 굳이 익명 함수는 아니라도 상관없다.
이 방식을 사용하는 경우도 많은데 위의 상황과 구별되는 점은 호이스팅이 적용되지 않는다.
이는 아래의 2개의 방식역시 호이스팅이 적용되지 않는다.
3.함수 리터럴로 함수 정의 - 함수 표현식(화살표 함수 사용)
var functionExpressionArrow = (args) => {
console.log(`function declaration arrow : ${args}`);
};
이 방식은 위의 방식과의 차이점은 일반 익명함수가 람다식으로 사용했다는 점이다.
여러분들은 2번과 3번이 동일하다고 생각할 수 있는데 이 둘은 어마어마어마어마하게 차이점이 있다.
둘은 절대 동일하지 않다. 이는 호이스팅의 문제는 아니고 this와 연관되어 있다.
this에 대해서 따로 포스팅을 하겠지만 간단히 2번사례와 3번의 차이점은 2번은 this가 바꿀 수있고 3번은 this를 바꿀 수 없다.
또한 2번은 생성자로 사용할 수 있고 3번은 생성자로 사용할 수 없다.
이 역시 추후에 자세히 다뤄보겠다.
4.Function 생성자로 함수 정의
var functionConstructor = new Function('args', `console.log(\`function constructor : \${args}\`);`);
자바스크립트는 아예 Function함수를 제공한다. 이를 통해서 함수를 즉석에서 만들어낼 수 있다.
이 방식의 장점은 문자열을 함수로 전환할 빌미를 제공해준다는 점이다. 이로서 훨씬 유연하 코딩이 가능하게끔 해준다.
물론 이 방식은 자주 쓰이지는 않을 것이다.
이 방식은 2번과 유사한면이 있다. 3번과는 달리 이렇게 생성된 함수는 생성자로 쓰일 수 있다.
단 2번과의 차이점이 있는데 2번은 생성자를 생성할 때 각각의 함수를 기반으로 만들지만 4번의 경우에는 Object의 생성자로 작동하게 된다.
이 설명역시... 추후에 또 하기로 하겠다.
전체 예제 코드를 보자.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function functionDeclaration(args) {
console.log(`function expression : ${args}`);
};
var functionExpressionNormal = function (args) {
console.log(`function declaration normal : ${args}`);
};
var functionExpressionArrow = (args) => {
console.log(`function declaration arrow : ${args}`);
};
var functionConstructor = new Function('args', `console.log(\`function constructor : \${args}\`);`);
var param = 'test';
functionDeclaration(param);
functionExpressionNormal(param);
functionExpressionArrow(param);
functionConstructor(param);
</script>
</body>
</html>
이 코드를 한번 테스트 해보도록 하자.
제대로 동작하는걸 확인할 수 있다.
'Programming > JavaScript' 카테고리의 다른 글
| [JavaScript-06]this - 기본편 (0) | 2018.12.05 |
|---|---|
| [JavaScript-05]객체와 class, 그리고 상속 (0) | 2018.12.04 |
| [JavaScript-04]객체와 프로토타입 (0) | 2018.12.04 |
| [JavaScript-03]변수(var, let, const)와 scope (0) | 2018.12.04 |
| [JavaScript-02]Scope와 Hoisting (2) | 2018.12.03 |