* 화살표 함수를 외면하고 일반 함수만 하던 나..
(이전 글들 보면 화살표 함수 예제를 다 일반 함수로 바꿔서 씀..)
* 화살표 함수, 피할수 없다면 즐겨주겠어.
자바스크립트 함수 정의 방법
1. 일반 함수
2. 화살표 함수
1-1. 일반 함수 - 함수 선언식
함수 선언식이란,
함수 function키워드를 쓰고, 함수 이름을 넣어준 다음 함수 블록에 내용을 채워 넣으면 된다.
* 참고 자료 1 : MDN Web Docs - 함수 선언(function declaration)
function name([param[, param,[..., param]]]) { [statements] }name
함수 이름.
param
함수로 전달되는 인수(argument)의 이름. 인수의 최대 개수는 엔진마다 다름.
statements
함수의 몸통(body)을 구성하는 문(statement).
* 참고 자료 2 : 유튜브 별코딩 - 화살표 함수 기본편
function name () {
console.log("곰인간");
};
name(); // 곰인간함수 선언식으로 작성된 함수의 특징은
호이스팅이 된다.
name(); // 곰인간
function name () {
console.log("곰인간");
};함수 선언식으로 함수를 정의할 때는 함수 이름을 필수적으로 들어가기 때문에
함수 선언식으로는 익명 함수를 만들 수 가 없다.
1-2. 일반 함수 - 함수 표현식
함수 표현식이란,
함수 선언식과 문법적으로 비슷하지만, 함수 표현식 방법으로 정의하면, 익명 함수를 만들 수가 있다.
function 키워드를 사용하지만 선언식과 다르게 함수 이름을 생략 할 수 있다.
* 참고 자료 1 : MDN Web Docs - 함수 선언(function declaration)
var myFunction = function [name]([param1[, param2[, ..., paramN]]]) { statements };name
함수 이름. 함수가 이름 없는(anonymous) 함수인 경우, 생략될 수 있음. 이 함수 이름은 함수의 몸통 내에서만 사용할 수 있습니다.
paramN
함수로 전달되는 인수(argument) 의 이름.
statements
함수 몸통을 구성하는 문(statement).
* 참고 자료 2 : 유튜브 별코딩 - 화살표 함수 기본편
const name = function () {
console.log("곰인간");
};
name(); // 곰인간위 선언식과 비슷하게 보이지만,
name이라는 변수를 선언하고, 거기에 익명 함수를 할당했다.
선언식과는 다르게 호이스팅 되지 않는다.
2. 화살표 함수
화살표 함수는 ES6에서 등장한 함수를 정의하는 또다른 문법이다.
* 참고 자료 1 : MDN Web Docs - 화살표함수(Arrow Function)
화살표 함수는 기존에 함수 표현식을 훨씬 간결하게 작성 할 수 있는 장점이 있다.
(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// 다음과 동일함: => { return expression; }
// 매개변수가 하나뿐인 경우 괄호는 선택사항:
(singleParam) => { statements }
singleParam => { statements }
// 매개변수가 없는 함수는 괄호가 필요:
() => { statements }화살표 함수 기본 구문
* 참고 자료 2 : 유튜브 별코딩 - 화살표 함수 기본편
const name = () => {
console.log("곰인간");
}; // 함수를 name 변수에 할당
name(); // 곰인간
// 화살표 함수는 코드가 한 줄 밖에 없을 경우 중괄호와 return 키워드를 생략 가능하다.
const name = () => console.log("곰인간")
name(); // 곰인간화살표 함수는 이름이 없는 익명 함수이다.
// 함수 선언식
function add(a, b) {
return a + b;
}
add();
// 함수 선언식을 화살표 함수로 변형
const add = (a, b) => {
return a + b;
};
add();
// 화살표 함수는 코드가 한 줄 밖에 없을 경우 중괄호와 return 키워드를 생략 가능하다.
const add = (a, b) => a + b;
add();함수 선언식을 화살표 함수로 변형
// 1개의 매개변수 text를 받아서 console에 출력
function print(text) {
console.log(text);
}
print("곰인간");
// 화살표 함수
const print = (text) => console.log(text);
// 매개변수가 하나 뿐이면 매개변수를 감싸는 괄호를 생략 할 수 있다.
print("곰인간");
// 매개변수가 2개 이상이면 괄호를 생략 할 수 없다.
const print = (text1, text2) => console.log(text1);
print("곰인간");
// 매개변수가 없을 때도 괄호는 생략 할 수 없다.
const print = () => console.log("곰인간");
print("곰인간");매개변수에 따른 화살표 함수식 간결화
// 객체를 return 하는 함수
const getName = () => {
return { name: "곰인간" };
};
console.log(getName()); // { name: "곰인간" }
// 매개변수가 하나 뿐이니 괄호와 return을 생략하면 문법에 혼란이 온다. // undefiend가 출력
// 객체를 return 할 때는 소괄호로 감싸준다.
const getName = () => ({ name: "곰인간" })
console.log(getName()); // { name: "곰인간" }문법 이외에도 일반 함수와 화살표 함수
arguments와 가변함수 차이점이 있다.
일반 함수는 매개변수로 따로 명시해주지 않아도 arguments라는 변수를 암묵적으로 전달 받는다.
function name () {
console.log(arguments);
}
name("곰인간", "보통인간", "그냥인간");
/* Arguments(3) ['곰인간', '보통인간', '그냥인간', callee: ƒ, Symbol(Symbol.iterator): ƒ]
0: "곰인간"
1: "보통인간"
2: "그냥인간" */
// arguments변수는 함수가 전달 받은 인자를 담고 있는 배열형태의 객체이다.
function name () {
console.log(arguments[0]); //
}
name("곰인간", "보통인간", "그냥인간"); // 곰인간arguments변수는 인자의 갯수가 정해지지 않는 가변인자가 전달 되는 함수를 사용할 때 유용하다.
하지만,
화살표 함수는 일반 함수와 달리 arguments변수를 전달 받지 않는다.
const name = () => {
console.log(arguments);
}
name("곰인간", "보통인간", "그냥인간");
// Uncaught ReferenceError: arguments is not definedUncaught ReferenceError: arguments is not defined
자바스크립트는 arguments를 찾을 수 없다는 에러를 표시한다.
그렇다면 화살표 함수는 일반 함수처럼 가변인자를 처리 하지 못 할까?
const name = (...anyting) => console.log(anyting[0]);
name("곰인간", "보통인간", "그냥인간"); // 곰인간
/* 화살표 함수에 가변인자를 처리하려면 매개변수에
...(나머지 매개변수 구문)anyting(아무 매개변수)를 넣어서 출력한다. */화살표 함수도 위와 같이 매개변수에 아무 변수나 넣고 ...(나머지 매개변수 구문)을 넣으면 출력이 된다.
* 어렵습니다..어렵습니다..
그냥 쓰라고 하면 쓰겠는데 동작원리를 알려고 하니까 어렵습니다..
MDN Web Docs랑 유튜브 별코딩님 영상을 참고했습니다.
아주아주아주아주 많은 도움이 되었습니다.
하루죙일 돌려서 듣고, 돌려서 듣고, 돌리고, 돌리고~
중구난방 괴상망측하게 정리해봤습니다.
댓글