함수선언식

함수를 선언과 동시에 실행

// 함수호출
function tt1(a, b) {
  let tt2 = (a * b) / 2;
  return tt2
}
// 콘솔출력
console.log(tt1(1, 4))

함수를 먼저 선언하는 방식으로 호이스팅의 영향을 받는다

함수표현식

변수를 먼저 선언하고 그 변수에 함수를 할당하는 방식

// 변수 tt1 선언 후 함수 호출
const tt1 = function(a, b) {
  let tt2 = (a * b) / 2;
  return tt2;
}
// 콘솔출력
console.log(tt1(1, 4));

변수를 먼저 선언하는 방식으로 const사용 / 호이스팅의 영향을 받지 않음

화살표함수

함수표현식의 function을 생략하고 보다 간결하게 작성가능

// 변수선언 후 function => 로 대체
const tt1 = (a, b) => {
  let tt2 = (a * b) / 2;
  return tt2;
}
// 콘솔출력
console.log(tt1(1, 4))

화살표함수는 익명으로만 사용이 가능,
함수 내부의 내용이 return값만 존재한다면 중괄호와 return을 생략가능
인자를 하나만 받을 경우 에도 매개변수의 괄호 생략가능 ( 다만 인자가 없다면 생략 불가 )

// ex1)
const tt1 = (a, b) => (a * b) / 2;
console.log(tt1(1, 4))

// ex2)
const tt1 = a => a / 2;
console.log(tt1(4))

호이스팅

호이스팅(Hoisting)의 개념
함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.

호이스팅은 무엇인가

자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.
자바스크립트는 함수 실행전 전체를 한번 체크후
함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다.
유효 범위: 함수 블록 {} 안에서 유효
즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다.
실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 내부적으로 끌어올려서 처리하는 것이다.
실제 메모리에서는 변화가 없다.
호이스팅의 대상
var 변수 선언과 함수선언문에서만 호이스팅이 일어난다.
var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.
let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.