함수를 사용하는 이유
1. 코드의 재사용
2. 유지보수의 편의성
3. 코드의 신뢰성
4. 코드의 가독성 향상
자바스크립트의 함수 => 객체 타입의 값 => 따라서 함수 리터럴로 생성 가능
=> 함수 리터럴 : "function 키워드, 함수 이름, 매개 변수 목록, 함수 몸체"로 구성
함수를 정의하는 방법
=> 함수를 정의한다는 면에서는 동일, 미묘한 차이가 존재
1. 함수 선언문
2. 함수 표현식
3. Function 생성자 함수
4. 화살표 함수
1. 함수 선언문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
"use strict"
function add(x, y) {
return x + y;
}
console.log (add(1, 2));
</script>
</head>
<body>
<h2>연습중</h2>
</body>
</html>
함수 선언문은 함수 이름을 생략할 수 없다.
표현식이 아닌 문이기 때문에 변수에 할당이 불가능하다.
자바스크립트 엔진은 생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당한다. 즉, 함수 선언문으로 생성한 함수를 호출하는 것은 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출하는 것이다.
2. 함수 표현식
자바스크립트의 함수는 일급 객체이기 때문에 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다. 이러한 함수 정의 방식을 함수 표현식이라고 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
"use strict"
let add = function(x, y) {
return x + y;
}
console.log (add(1, 2));
</script>
</head>
<body>
<h2>연습중</h2>
</body>
</html>
함수 리터럴의 함수 이름은 생략 가능하다. 이러한 함수를 익명 함수라고 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
"use strict"
// 기명함수
let add = function foo(x, y) {
return x + y;
}
console.log (add(1, 2));
console.log (foo(1, 2));
</script>
</head>
<body>
<h2>연습중</h2>
</body>
</html>
함수 객체를 가리키는 식별자로 호출하는 것이 아닌, 함수 이름으로 함수를 호출했을 때
"Uncaught ReferenceError: foo is not defined" 에러가 발생한다.
함수 이름은 함수 몸체 내부에서만 유효한 식별자이다.
함수 선언문으로 함수를 정의하면 런타임 이전에 함수 객체가 먼저 생성된다. 자바스크립트 엔진은 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고 생성된 함수 객체를 할당한다.
코드가 한 줄씩 순차적으로 실행되기 시작하는 런타임에는 이미 함수 객체가 생성되어 있고 함수 이름과 동일한 식별자에 할당까지 완료된 상태이다. 따라서 함수 선언문 이전에 함수를 참조할 수 있으며 호출할 수도 있다.
함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작한다. 이것을 함수 호이스팅이라고 한다.
3. Function 생성자 함수
자바스크립트가 기본 제공하는 빌트인 함수인 Function 생성자 함수에 매개변수 목록과 함수 몸체를 문자열로 전달하면서 new 연산자와 함께 호출하면 함수 객체를 생성해서 반환한다.
생성자 함수(constructor function) : 객체를 생성하는 함수
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
"use strict"
let add = new Function('x', 'y', "return x + y");
console.log (add(1, 2));
</script>
</head>
<body>
<h2>연습중</h2>
</body>
</html>
Function 생성자 함수로 함수를 생성하는 방식은 일반적이지 않으며, 바람직하지 않다.
4. 화살표 함수
ES6에서 도입된 화살표 함수는 function 키워드 대신 화살표(fat arrow) "=>"를 사용해 좀 더 간략한 방법으로 함수를 선언할 수 있다. 화살표 함수는 항상 익명 함수로 정의한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
"use strict"
/* let add = function (x, y) {
return x + y;
} */
let add = (x, y) => {
return x + y;
}
console.log (add(1, 2));
</script>
</head>
<body>
<h2>연습중</h2>
</body>
</html>
화살표 함수는 생성자 함수로 사용할 수 없고, 기존 함수와 this 바인딩 방식이 다르다.
prototype 프로퍼티가 없으며 arguments 객체를 생성하지 않는다.