JS 기초 | 함수 선언문, 함수 표현식, 화살표 함수

🚀 오늘의 학습 목표

• 함수 선언문과 표현식의 차이점 알기
• 화살표 함수 이해
  
  

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

12-1. 함수 선언문

어디에서든 호출 가능하다.

function sayHello(){
  console.log('hello');
}

sayHello();	// "hello"

자바스트립트는 위에서 아래 순서로 순차적으로 실행되고 즉시 결과가 반환되는 언어이다. 이를 인터프리트 언어(Interpreted language) 라고 한다.

함수 선언문을 이용할 경우 sayHello(); 코드가 함수 선언보다 앞에 있어도 호출이 가능하다.

sayHello(); // "hello"

function sayHello(){
  console.log('hello');
}

❓왜 그럴까?

이는 자바스크립트의 내부 알고리즘 때문이다.
자바스키립트의 경우 초기화 단계에서 코드의 모든 함수 선언문을 찾아서 생성해 놓는다.
이를 호이스팅 이라고 한다. (함수의 위치가 바뀌는 것은 아님!)

12-2. 함수 표현식

코드에 도달하면 생성된다.

let sayHello = function () {
  console.log('hello');
}
sayHello(); 	// "hello"

함수 선언문과 다르게 함수 표현식은 순서에 따라 함수가 실행되어 아래와 같이 함수 선언 전에 호출을 하면 에러 메시지가 나온다.

sayHello(); //Uncaught ReferenceError: Cannot access 'sayHello' before 

let sayHello = function () {
  console.log('hello');
}

대부분 상황에서는 어떻게 쓰든 상관 없다.
에러가 발생시 위로 옮기면 되기 때문이다.
하지만 신경 쓰기 싫다면 더 자유롭고 편하게 함수 선언문을 사용하면 된다.

12-3. 화살표 함수 (arrow function)

예제로 오늘 배운 함수 표현식이 있다.

let add = function (num1, num2){
  return num1 + num2;
}

화살표 함수는 function 을 없애고 () 옆에 => (화살표) 를 입력하여 사용한다.

let add = (num1, num2) => {
  return num1 + num2;
}

return문은 코드 블록{}를 괄호()로 바꿔 쓸 수 있다.

let add = (num1, num2) => ( num1 + num2 )

return문이 한 줄이라면 괄호()도 생략이 가능하다.

let add = (num1, num2) => num1 + num2

단, return문이라고 할지라도 코드블록 {} 안에 여러 줄의 함수가 있다면 괄호 () 사용은 불가하다.

let add = (num1, num2) => {
  const result = num1 + num2;
  return result;
}

인수 또한 하나라면 괄호()를 생략할 수 있다.

let sayHello = num => `Hello, ${name}`;

단, 인수가 없는 함수일 경우 괄호()는 생략할 수 없다.

 let showError = () => {
 	alert*'error!';
 }

---

🔍 함수 선언문, 함수 표현식을 화살표 함수로 바꿔 보기

1.

1. 함수 선언문

function showError() { 
  console.log('error');
}

2. 함수 표현식

let showError = function (){ 
  console.log('error');
}

3. 화살표 함수

let showError = () => { 
  console.log('error');
}

2.

1. 함수 선언문

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

2. 함수 표현식

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

3. 화살표 함수

const sayHello = (name) => {
  const msg = `hello, ${name}`;
  console.log(msg);
}

3. 인수가 2개 있고, 리턴문이 있는 예제

1. 함수 선언문

function add (num1, num2){
  const result = num1 + num2;
  return result;
}

2. 함수 표현식

const add = function (num1, num2){
  const result = num1 + num2;
  return result;
}

3. 화살표 함수

const add = (num1, num2) => {
  const result = num1 + num2;
  return result;
}

추가로 여기에서 리턴문을 한 줄로 만들어 보자.

const add = (num1, num2) => {
  return num1 + num2;
}

리턴이 한 줄로 바뀌었으니 코드블록 {} 을 괄호 ()로 바꿔 주자.

const add = (num1, num2) => (num1 + num2);

이는 아래와 같이 더욱 간결하게 바꿀 수 있다.

const add = (num1, num2) => num1 + num2;

---

✏️ 정리

함수 표현식 보다는 함수 선언문이 더욱 자유로우며, 화살표 함수는 ES6 이후 굉장히 활발하게 사용되고 있기 때문에 필수적으로 알아야 하며, 익숙해지는 것이 중요하다.