함수

• 특정 작업을 처리하는 코드 묶음
• 코드를 묶어서 원하는 때에 사용 가능
• 아래처럼 다양한 방법으로 선언하고 사용할 수 있다.

// 함수 선언문 (declaration)
function func(){

}

// 함수 표현식 (expression) 
const func = function func(){

}

// 메서드: 객체 안에 속성 값으로 있는 함수
const obj = {
	prop: function () {},
}

// 생성자 함수: 특정 instance를 만들어 낼 수 있다.
function MyObj(){

}

// 화살표 함수 
const arrowFunc = () => {}

📌 hoisting

호이스팅(Hoisting): 끌어 올리다 라는 뜻 함수 안에 있는 변수나 함수 맨위로 끌어올린다는 것이다.

실제로 코드가 끌어올려지는 것은 아니며, 자바스크립트 Parser가 내부적으로 끌어올려서 처리한다.

# 함수 선언문 호이스팅

func(); // 안녕하세요

function func() {
    console.log('안녕하세요');
}

function func() {
    console.log('안녕못해');
}

func(); // 안녕못해

🚨 함수의 중복 선언이나 호이스팅 문제 발생
둘 다 정상 작동:
심지어 두 함수를 동시에 선언하고 맨 마지막에 호출하면 오류는 발생하지 않으며 마지막으로 선언된 '안녕못해'가 출력된다.

# 함수 표현식 호이스팅

func(); 

var func = function() {
    console.log('안녕하세요');
}

var func = function() {
    console.log('안녕하세요');
}

func();

func();

let func = function() {
    console.log('안녕하세요');
}

---

# 1

var func; // undefined

func(); // TypeError

var func = function() {
    console.log('안녕하세요');
}

var로 선언된 변수에 함수를 저장하고 호출하면 :

함수가 맨 위로 끌어올려지면서 선언된다.

함수를 변수에 저장하기 전에 호출하면 func는 아직 변수기 때문에 TypeError가 발생한다.

# 2

var func; // undefined

var func = function() {
    console.log('안녕하세요');
}

func(); // 안녕하세요

변수가 맨 위로 끌어올려져 선언된다.
변수에 함수가 할당 된 후에 호출 하기 때문에 정상 작동된다.

# 3

// 호이스팅 발생 안함

func(); // ReferenceError

let func = function() {
    console.log('안녕하세요');
}

let, const의 경우 hoisting이 발생하지 않는다

선언과 할당이 동시에 이뤄지기 때문에 선언이 되기 전에 함수를 호출하려고 해서 참조 오류가 발생한다.

변수나 함수의 표현식을 선언하는 경우 let, const 로 하는 것이 좋고
그 중에도 값이 바뀌면 error를 내는 const로 선언하는 것이 좋다