[ Javascript ] 자바스크립트 함수 선언식 과 함수 표현식 차이점

자바스크립트 함수 선언식

---

 

함수 선언문 (Function Declaration):

함수 선언문은 자바스크립트에서 함수를 정의하는 가장 기본적인 방법 중 하나입니다.
함수 선언문은 반드시 함수의 이름이 필요합니다. 

함수 선언문은 호이스팅 (hoisting)이 발생합니다. 호이스팅은 코드가 실행되기 전에 함수 선언문이 해당 스코프의 최상단으로 끌어올려지는 현상을 의미합니다.

따라서 함수 선언문은 선언 이전에도 호출할 수 있습니다. 측, 위치는 중요하지 않아 어디서나 사용 가능합니다.

 

sayHello();

function sayHello() {
   console.log("Hello");
}

 

 

 

 

또는 함수 선언문은 함수의 스코프 내에서만 유효합니다. 따라서 함수 선언문으로 정의한 함수는 해당 함수 내부 블록에서만 호출할 수 있습니다. 

함수 선언문의 반환 값: 함수 선언문은 명시적인 return문이 없을 경우 undefined를 반환합니다.

 

/* return 없음 => undefined */

function greet() {
  console.log("Hello!");
}

const result = greet();
console.log(result); 
// Output :undefined


function add(a, b) {
  return a + b;
}

const result = add(2, 3);
console.log(result); 
// Output: 5

 

 

 

 

 

---

 

 

자바스크립트 함수 표현식

---

함수표현식 (Function Expression) :

- 함수 표현식은 자바스크립트에서 함수를 정의하는 다른 방법으로, 함수를 변수에 할당하여 사용하는 방식입니다. 함수는 값으로 취급되며, 변수를 통해 함수를 참조하거나 호출할 수 있습니다.

- 호이스팅 : 함수 표현식은 변수에 함수를 할당하는 시점까지는 사용할 수 없습니다. 함수 항당은 다음 시점에서 사용해면 오류 뜹니다. 

 /* TypeError: sayHello is not a function */
sayHello();

const sayHello = function() {
  console.log("Hello!");
};

sayHello(); //사용 가능

 

함수 선언문과 달리 함수 이름이 선택 사항입니다.

함수 표현식은 함수에 이름을 붙이지 않아도 됩니다. 함수의 이름이 있어도 되고 없어도 됩니다.
함수의 이름이 없는 경우, 해당 함수를 익명 함수(Anonymous Function)라고 합니다.

/* 함수 이름 없이 사용 */

const getSum = function() {
  console.log("Without Function Name ");
}

getSum(); //불러오기


/* 함수 이름 정하기 */

const withName = function sayHiFunc() {
  console.log("With Function Name ");
}

withName(); //불러오기
sayHiFunc(); //오류