[Javascript] 함수란? 함수 표현식과 함수 선언식, 호이스팅까지!

오늘은 함수에 대해 간단히 알아보겠습니다! 🛵

1. 함수

함수란 어떠한 기능을 수행하거나 계산을 수행하는 코드의 집합

좀 더 쉽게 설명하면 유사한 동작을 하는 코드를 함수를 이용해 담아두고 여러번 호출을 해서 중복없이 깔끔하게 사용할 수 있습니다!

2. 함수 정의

자바스크립트에서 함수를 정의하는 방법으로는 함수 표현식 과 함수 선언문 이 있습니다.

2-1. 함수 표현식

함수 표현식은 정의한 function에 별도의 변수를 할당하는 것입니다.

const sum = function () { // 변수명 sum이 곧 함수명
	let result = 10 + 10;
};

sum(); // 함수 실행

2-2. 함수 선언문

변수 선언을 let이나 const로 시작해야하는 것처럼 함수 선언을 function 으로 시작합니다.

function sum() {
	let result = 10 + 10;
};

sum(); // 함수 실행

일반적으로는 함수 선언문을 많이 사용합니다.

❗ 함수 선언문은 호이스팅 의 영향을 받습니다!
호이스팅이란? 코드를 구현한 위치와 관계없이 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려지는 것을 뜻합니다.

📝 예제

sum() // sum() 함수를 호출한 이 위치에서는 아직 함수가 정의되지 않았음에도 불구하고 해석할때는 호이스팅의 영향을 받아 선언된 것처럼 해석된다.

function sum() {
	let result = 10 + 10; 
}

다시 말해 작성은 이렇게 적었지만 실제 해석되는 순서는 아래와 같습니다. ⤵

function sum() { // 함수가 정의된 후
	let result = 10 + 10; 
}

sum() // 함수 호출

호이스팅은 예측하기 어려운 동작들이 수행되므로 가급적 함수와 변수는 코드 상단부에서 선언하는 습관을 길러야겠다! 🤙