[JavaScript] 일반함수와 화살표함수

일반함수

- function 키워드를 사용하여 정의하는 함수

- 함수 선언식이나 함수 표현식으로 함수를 정의할 수 있다.

 

화살표함수

- 자바스크립트 ES6 버전에서 등장한 문법으로, 함수를 정의할 때 사용하는 또 다른 문법이다.

- 기존의 함수 표현식을 훨씬 더 간결한 문법으로 작성할 수 있게 해준다.

- function 키워드를 지우고, 소괄호와 중괄호 사이에 화살표를 넣어준다.

- 화살표함수를 만들어주고, 함수를 변수에 할당한다.

- 변수를 함수의 이름처럼 사용하여 함수를 호출할 수 있다.

const main = () => {
	console.log("hello");
}

main();

 

함수 선언식

- 자바스크립트에서 함수를 선언하는 가장 기본적인 방식

- function 키워드와 함수 이름을 쓰고, 함수 블럭 안에 실행할 코드를 작성한다.

function main(){
	console.log("hello");
}

main();

- 호이스팅(함수의 선언을 코드의 최상단으로 끌어올리는 것)이 가능하다.

- 함수를 선언하기 전에 호출할 수 있다.

main();

function main(){
	console.log("hello");
}

- 함수의 이름을 필수적으로 적어야 하기 때문에 익명함수를 만들 수 없다.

 

함수 표현식

- 함수 선언식과 달리, 익명함수를 만들 수 있다.

- 익명함수를 선언함과 동시에 함수를 main이라는 변수에 할당한다.

- 변수를 함수의 이름처럼 사용하여 함수를 호출할 수 있다.

- 함수를 하나의 표현식 안에서 정의하는 것

const main = function() {
	console.log("hello");
}

main();

- 함수 선언식과 달리, 호이스팅이 불가능하다.

main();

const main = function() {
	console.log("hello");
}

// 결과: Uncaught ReferenceError: Cannot access 'main' before initialization

 

일반함수를 화살표함수로 바꾸기

- function 키워드와 함수 이름을 지우고, 변수에 함수를 할당한 후 소괄호와 중괄호 사이에 화살표를 넣어준다.
- 블럭 안에 코드가 1줄밖에 없을 때는 중괄호와 return 키워드 생략 가능

- 화살표함수의 매개변수가 1개밖에 없을 때, 매개변수를 감싸는 소괄호 생략 가능

- 화살표함수의 매개변수가 2개 이상이거나 없는 경우에는, 매개변수를 감싸는 소괄호 생략 불가

// 일반함수
function add(a,b) {
	return a+b;
}
// 화살표함수
const add = (a,b) => return a+b;

// 일반함수
function print(text) {
	console.log(text)
}
// 화살표함수
const print = text => console.log(text);

// 일반함수
fucntion print() {
	console.log("hi");
}
// 화살표함수
const print = () => console.log("hi");

- 객체를 return할 때 중괄호와 return 키워드를 생략하면 문법에 혼란이 오므로, 객체를 소괄호로 감싸준다.

const getObject = () => {
	return { name: "rigood" };
}

const getObject = () => ({ name : "rigood" });

 

일반함수와 화살표함수의 차이점: arguments와 가변인자

- 일반함수는 매개변수를 따로 명시하지 않아도 arguments라는 변수를 암묵적으로 전달받는다.

- arguments란, 함수가 전달받은 인자를 담고있는 배열 형태의 객체 (배열은 아님!)

- 인자의 개수가 정해지지 않은 가변인자가 전달되는 함수를 쓸 때 유용하게 사용할 수 있다.

 function main() {
 	console.log(arguments)
 }
 
 main(1,2,3)

 

- 화살표함수는 arguments라는 변수를 전달받지 못한다.

 

 

- 화살표함수에서 가변인자를 처리하려면, 매개변수에 스프레드 연산자(...)와 변수를 넣으면 된다.

 

 

 

 

출처

별코딩 https://youtu.be/mfaQOlc73pU