2024.05.10 3차 스터디
오늘의 스터디 주제는? 함수!
React 라이브러리 강의를 보면서 강사님과 함께 코드를 작성하는데 버벅였다. Javascript에서는 주로 함수 선언문을 쓰고 호출하는 방식이었는데 지금은 표현식에 화살표 함수 표현식까지 사용한다. 일단 이번에는 함수 차이에 대해서라도 먼저 확실하게 알고자 기록한다!!
1. 함수 선언문
두 수를 더하는 간단한 함수 선언문을 만들어보자
function add(a, b) {
return a+b;
};위 선언문이 의미하는 것은 아래와 같다.
- function > 함수 선언을 의미
- add > 함수의 이름
- (a, b) > a와 b라는 매개변수
- return a+b > a와 b를 더한 결과 반환을 의미
만든 함수 선언문에 매개변수를 넣어 콘솔에 찍어보자
console.log(add(2, 5)) //7함수 이름을 사용하여 호출하고 매개변수로 2와 5를 넣어주면 콘솔에는 두 값을 더한 7이 찍힌다.
1-1. 함수 선언문의 구성
이렇듯 함수 선언문은 아래와 같은 구성으로 이루어져 있다.
- 함수의 이름
- 함수의 매개변수(괄호로 묶고 쉼표로 구분)
- 함수를 정의하는 { } 중괄호로 묶기
1-2. 함수 선언문의 특징
1. 문법
function 키워드를 사용하여 함수를 선언합니다.
2. 함수 이름
함수 선언문은 반드시 함수 이름이 있어야 합니다.
3. 호출
선언된 함수는 스크립트에서 어디서든 호출할 수 있습니다. 함수 선언 전에도 호출할 수 있습니다.
4. 호이스팅
스크립트의 시작 시점에서 함수가 메모리에 로드되므로, 함수 선언 전에도 호출할 수 있습니다.
* 선언문은 호이스팅 가능
선언문에서는 함수 선언과 호출이 따로 이루어지는데 호출이 함수 선언보다 먼저 이루어져도 작동이 된다는 뜻이다.
2. 함수 표현식
함수 선언문은 표현식으로 바꿀 수 있다.
위에서 만든 선언문을 표현식으로 바꾸어보자
선언문
function add(a, b) {
return a+b;
};표현식
const add = function(a, b) {
return a + b;
};어떤 점이 달라졌나요?
선언문에서 함수에 붙여준 add란 이름이 없어지고 그게 변수명으로 할당된 것이 보입니다.
이 표현식 함수는 add라는 변수에 할당된 익명 함수입니다.
선언문처럼 이 표현식에도 매개변수를 넣어 콘솔에 찍어보자
console.log(add(2, 5)) //7변수명을 사용하여 호출하고 매개변수로 2와 5를 넣어주면 콘솔에는 두 값을 더한 7이 찍힌다.
2-1. 함수 표현식의 구성
함수 표현식은 선언문과 비슷하지만 다른 구성으로 이루어져 있다.
- 변수 할당(let, const 또는 var)
- 함수의 매개변수(괄호로 묶고 쉼표로 구분)
- 함수를 정의하는 {}중괄호로 묶기
2-2. 함수 표현식의 특징
문법
함수를 변수에 할당하여 표현합니다.
함수 이름
함수 표현식은 이름이 있을 수도 있고 없을 수도 있습니다.
호출
함수 표현식은 할당된 변수를 통해만 호출할 수 있습니다. 변수가 선언된 후에만 호출할 수 있습니다.
호이스팅
변수의 선언은 호이스팅 되지만, 할당된 함수는 호이스팅 되지 않습니다. 따라서 함수 표현식은 변수가 선언된 후에만 호출할 수 있습니다.
* 표현식은 호이스팅 불가능
표현식에서는 변수에 함수를 할당하는 방식이기 때문에 호출이 함수 선언보다 먼저 이루어질 수 없다.
3. 선언문, 표현식의 차이점 요약
함수 이름
함수 선언문은 반드시 함수 이름이 있어야 하지만, 함수 표현식은 선택적으로 함수 이름을 가질 수 있습니다.
호출 가능 여부
함수 선언문은 어디서든 호출할 수 있지만, 함수 표현식은 변수가 선언된 이후에만 호출할 수 있습니다.
호이스팅
함수 선언문은 함수 전체가 호이스팅 되지만, 함수 표현식은 변수만이 호이스팅 됩니다.
