자바스크립트 기초 강좌 11- 함수 표현식, 화살표 함수(arrow function)

함수 선언문: 어디서든 호출 가능

function sayHello(){

   console.log('Hello');

}

sayHello();    → 선언문 맨 위에 위치해도 똑같이 동작함.  

javascript는 위에서 아래로 순차적으로 실행되며, 즉시 결과를 반환하는 프로그래밍 언어=인터프리터 언어(Interpreted language) 

호이스팅: 실행 전 코드의 모든 함수 선언문을 저장해서 생성해놓음. → 이로 인해 선언문의 위치에 상관없이 동일하게 실행.

 

vs 함수 표현식

let sayHello = function(){

     console.log('Hello');

}

sayHello();          → 함수 표현식은 함수를 한 줄씩 읽어내려가므로 그 이후에 선언될 때만 사용가능.

함수 선언문을 사용하는 게 더 자유롭고 편함.

 

------------------------------------------------------------------------------------------------------------------------------------------------

화살표 함수

let add = function(num1, num2){

   return num1 + num2; 

}

let add =              (num1, num2) =>{

    return num1 + num2; 

}

let add =               (num1, num2) =>(                    return문을 중괄호 빼고 괄호로 표현가능

               num1 + num2;

)

let add =(num1, num2) => num1 + num2;             return문이 한 줄이면 괄호빼 한줄로 표현가능

*인수가 하나면 괄호 생략 가능

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

*인수가 없는 함수는 괄호 생략 불가능

let showError = () => {

     alert('error!');

}

*return문 전에 여러줄의 구문이 있을 경우, 일반 괄호 사용x

1)잘못된 예

let add = function(num1, num2){

     const result = num1 + num2;

     return result;

}

2)올바른 예

 let add = (num1, num2) => {

      const result = num1 + num2;

      result result;

}

 

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

//화살표 함수
const sayHello = (name) => {
  const msg = `Hello, ${name}`;
  console.log(msg);
};

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

//화살표 함수
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;