자바스크립트 - 함수 호스팅, 화살표 함수

자바스크립트 함수

자바스크립트에서 함수는 특정 작업을 수행하는 코드 블록이다. 

함수를 사용하면 코드의 재사용성과 가독성을 높일 수 있다. 

 

일반적으로는 functon 키워드를 사용하여 선언할 수 있다.

function add(a, b) {
    return a + b;
}

console.log(add(2, 3));

 

* 함수는 선언하기 전에 호출할 수 있다. (함수 선언식은 호이스팅이 되기 때문이다.)

* 선언된 함수는 해당 스코프 어디에서든 사용할 수 있다.

* 호이스팅이란? 자바스크립트가 코드 실행 전에 함수 선언과 변수 선언을 최상위로 끌어올리는 것을 의미한다.

그래서 함수 선언식으로 작성된 함수는 코드의 어디서든 호출이 가능하다. 

* 함수가 전역 스코프에서 선언되었다 -> 코드 전체에서 사용 가능

* 함수가 특정 함수나 특정 블록에서 선언되었다 -> 해당 범위 안에서만 사용 가능

 

console.log(add(2, 3));

function add(a, b) {
    return a + b;
}

 

이렇게 함수를 선언 전에 먼저 호출할 수 있다. 

 

---

함수는 변수에도 할당할 수 있다. 

함수를 변수처럼 사용하여 함수에 이름을 붙이지 않을 때 유용하다. 

 

const multiply = function(a, b) {
    return a * b;
};

console.log(multiply(2, 3));

 

함수 주요 특징 

- 매개변수: 함수에 전달할 입력 값

- 반환값: 함수가 작업을 수행하고 반환하는 결과값

- 호출: 함수를 사용할 때는 반드시 함수이름() 형태로 호출해야 한다.

---

화살표 함수

화살표 함수는 ES6 이후에 추가된 함수 표현식이다. 

function 키워드 없이 간단하게 함수를 작성할 수 있다. 

상위 스코프의 this를 고정적으로 사용한다.

* 화살표 함수는 자신만의 this를 가지지 않고, 정의된 위치(상위 스코프)의 this값을 사용한다.

 

1. 매개변수가 있는 화살표 함수

const greet = (name) => `Hello, ${name}!`;
console.log(greet("Alice"));

 

* 백틱(₩)으로 정의한 문자열은 템플릿 문자열로, 문자열 내 변수 삽입이 가능하다. (${ } 구문)

 

2. 매개변수가 없는 화살표 함수

const greetEveryone = () => "Hello, everyone!";
console.log(greetEveryone());

 

3. return 사용할 때

const add = (a, b) => {
    const sum = a + b;
    return sum;
};
console.log(add(5, 3));