함수 구조

function name(parameter) {
//함수본문
return //출력값
}

• 호출 : name()
• 매개변수(parameter)가 있는 경우 : name(argument)

함수 선언문, 표현식, 화살표 함수

1. 함수 선언문

function getRectangleArea(width, height) {
let rectangleArea = width * height;
return rectangleArea
}

2. 함수 표현식

let getRectangleArea = function(width, height) {
let rectangleArea = width * height;
return rectangleArea
}

3. 화살표 함수

let getRectangleArea = (width, height) => {
let rectangleArea = width * height;
return rectangleArea
}

*함수 본문이 한줄일 경우 중괄호와 return 생략 가능

let getRectangleArea = (width, height) => width * height;

4. 함수 선언문 VS 함수 표현식

1) 자바스크립트 엔진이 언제 함수를 생성하는 가

• 함수 선언문 : 스크립트를 실행하기 전 준비단계에서 전역에 선언된 함수 선언문을 찾아 함수 생성되기 때문에 선언문이 정의되기 전 호출 가능(호이스팅)

sayHello("Somin");
// hello, Somin.

function sayHello(name) {
console.log( `hello, ${name}.`);
}

sayHello("Somin"); 
// hello, Somin.

• 함수 표현식 : 실제 실행 흐름이 해당 함수에 도달했을 때 함수 생성되기 때문에 실행 흐름이 함수에 도달했을 때 호출 가능

sayHello("Somin");
// Error : sayHello is not defined

let sayHello = function (name) {
console.log( `hello, ${name}.`);
}

sayHello("Somin");
// hello, Somin.

2) 코드 블록 내에 위치한 함수를 선언된 블록 밖에서 호출할 수 있는 가

(1) 함수 선언문

let age = 26;

if (age > 18){
  function sayWelcome() {
    alert("Welcome");
  }
}

sayWelcome(); // Error

• 함수가 선언된 코드 블록 안에서만 유효하기에 에러 발생
  *블록 내에선 어디서든 접근이 가능하지만 블록 밖에서는 함수에 접근할 수 없음

(2) 함수 표현식

let age = 26;
let sayWelcome

if (age > 18){
  sayWelcome = function() {
    alert("Welcome");
  }
}

sayWelcome(); // "Welcome"

• 블록 밖에 선언한 변수에 함수표현식으로 만든 함수를 할당하면 가능

References

1. 함수 선언문 및 함수 표현식