11. Javascript 기초 (함수 표현식, 화살표 함수)

• 함수 선언문

  : 챕터 10에서 배웠던 아래 그림과 같은 방식을 함수 선언문이라고 함.
  

📌 함수 표현식

: 이름이 없는 함수를 만들고, 변수를 만들어 함수를 할당하는 방식.
: 이를 함수 표현식이라고하고, 사용 방식은 동일함.
: 실행하는 방식도 동작하는 방식도 동일함.

• 차이점은 무엇인가?

  : 호출할 수 있는 타이밍

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

  : Javascript는 위에서 아래로 한줄씩 읽으며 실행함.
  : 순차적으로 실행되고, 즉시 결과를 반환하는 언어를 인터프리터 언어라고 함.

• ex)

  : 아래와 같은 코드는 실행시 에러가 발생한다.
  : 순서대로 실행했을 때 num이라는 변수를 만나지 못했으므로 오류가 발생한다.

// 일반적인 함수선언문 코드
fuction sayHello(){
  console.log('Hello');
}
sayHello();

• 아래 코드는 왜 동작이 되었을까?(함수 선언문의 동작)

  : 아래와 같은 코드가 작동되는 이유는 Javascript 내부의 알고리즘 때문이다.
  : Javascript는 실행 전 초기화 단계에서 코드의 모든 선언문을 찾아 생성해 놓는다.
  : 사용할 수 있는 함수의 범위는 해당 코드보다 넓어진다. 이를 호이스팅(hoisting)이라고 함.
  : 코드 위치가 실제로 올라가는 것은 아님.

// 위 코드를 이렇게 바꾸어도 동작이 됨.
sayHello();

fuction sayHello(){
  console.log('Hello');
}

• 함수표현식의 동작

  : 함수 표현식은 javascript가 한줄씩 읽으면서 실행되고, 해당 코드에 도달해서야 비로소 생성됨.
  : 그러므로 이후에만 사용가능.

📌 그래서 뭐가 더 좋을까?(함수 선언문 vs 함수 표현식)

: 대부분의 상황에서는 무엇을 쓰든 상관이 없음. 에러가 발생하면 위로 옮기면 그만
: 신경쓰기 싫다고하면, 함수 선언문을 사용하면 됨. 더 자유롭고 편하게 코딩 가능함.

📌 화살표 함수(arrow function)

: 화살표 함수는 es6 버전 이후로 활발하게 사용되고 있음. (필수적으로 알고 있어야 함.)
: 화살표 함수는 지금까지 배운 함수를 보다 간결하게 작성할 수 있음.

• 함수를 화살표 함수로 바꾸는 방법

  : function이라는 단어가 사라지고, 대신 괄호 뒤쪽에 화살표가 생김.
  : 게다가 본 예제는 코드 본문이 1줄이고, return문이 있으므로 중괄호가 아닌 일반 괄호로 바꿀 수 있음.(그림3)
  
  : return문이 한줄이라면 괄호도 생략 가능.
  
  : 인수가 1개라면 괄호도 생략이 가능함.
  
  : 만약 인수가 없는 함수라면 괄호를 생략할 수 없음.
  
  : return문이 있다고하더라도 return 전에 여러 줄의 코드가 있을 경우 일반괄호를 사용할 수 없음.
  

위 내용은 유튜브 코딩앙마 채널의 내용을 정리한 것 입니다.
코딩앙마