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

1. 함수 선언문

function sayHello(){
	console.log("hi")
}

2. 함수 표현식

함수를 변수에 할당해 주는 것으로 함수 선언문과 문법만 다르고 동작방식, 실행방식도 동일하다.

let hi = function(){
  console.log("hi")
}

가. 선언문과의 차이점

그렇다면 왜 함수 표현식을 쓸까??

호출하는 타이밍이 다르기 때문이다.

함수 선언문은 어디서든 호출이 가능하다.

sayHello()
// "hi"
function sayHello(){
	console.log("hi")
}
sayHello()
// "hi"

선언문 위에서 호출하든 아래에서 호출하든 동일하게 호출이 된다.

자바스크립트는 순차적으로 실행되고 즉시 결과를 반환하는 인터프리터 언어인데 어떻게 이게 가능할까?

자바스크립튼 실행전 초기화 단계에서 모든 함수 선언문을 찾아서 생성해둔다.

그래서

function sayHello(){
	console.log("hi")
}

이부분이 눈으로 보이는 범위이지만 실제로는 더 넓은 범위까지 확장되며 이를 호이스팅이라고 한다.

반면 함수 표현식은 코드에 도달하면 생성이 된다.

sayHello()
// 에러
const sayHello = function(){
	console.log("hi")
}
sayHello()
// "hi"

3. 화살표 함수

보다 간결하게 작성하는 함수 표현식

let hi = function(){
  console.log("hi")
}

===
    
let hi = () => {
  console.log("hi")
}

위의 함수는 동일함

가. 화살표 함수 특징

리턴문이 있으면 {}를 생략할 수 있다.

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

근데 리턴문이 한줄이면 그 ()마저도 생략할 수 있다.

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

인수가 하나라면 앞에 소괄호를 생략할 수 있다.

let hi = (name) => `hello + ${name}`
===
let hi = name => `hello + ${name}`

인수가 없으면 생략 불가능