자바스크립트의 일반함수, 익명함수, 람다함수, 화살표함수를 이해하고 넘어가려 한다.
함수의 형태
//일반함수
function 함수명(){
함수내용
}
//익명함수
function(){
함수내용
}일반함수와 익명함수의 차이는 함수명이 있느냐 없느냐의 차이를 가지고 있다.
익명함수는 메모리를 따로 차지하지 않기 때문에 재사용하기보다는 일회용으로 많이 사용이 되는 편이다. 따라서 익명함수를 사용할 때에는 변수에 담아서 사용하는 형태를 갖추고 있다.
const 변수 = function(){
함수내용
}▲위와 같이 익명함수를 변수에 저장하는 방식을 리터럴 방식이라고 한다.
리터럴 방식은 변수를 선언함과 동시에 그 값을 저장해주는 방식이라고 생각하면 된다.
익명함수는 리터럴 방식으로 변수에 담겨 작성될 때,
호이스팅 시 위로 올라가지 않고 익명함수를 저장한 변수만 올라가게 된다.
따라서 아래의 상황에서는 에러가 발생하게 된다.
익명함수();
var 익명함수 = function(){
console.log('익명함수를 담은 변수를 상단에서 호출하면 어떻게 될까');
}
익명함수();첫번쨰 줄 익명함수()에서 에러가 뜬다.
ReferenceError: Cannot access '익명함수' before initialization
일반함수를 선언하면 함수 자체가 호이스팅 되어서 함수가 선언되기 이전 줄에서도 해당 함수를 부를 수 있는데
익명함수는 그게 불가능하다.
따라서 익명함수는 한 번 사용하고 쓰지 않을 함수에 한해서 사용하는 것이 좋다.
(일회성 함수로 사용될 불필요한 메모리를 줄일 수 있기 때문이다)
💡참고사항
일반함수와 익명함수 모두 함수 안에서
this를 호출하면window가 뜨게 된다.
특정한 다른 함수(ex. eventListener 등) 안에서 function이 새롭게 작성되면this값을 다시 재정의한다.
만약 재정의하고 싶지 않다면(상위의this값을 가지고 오고 싶다면) 화살표 함수로 교체하는 것이 좋다.
화살표 함수(=람다함수)
//일반함수
function 일반함수(){
console.log('일반함수');
}
//화살표함수
var 화살표함수 = () => {
console.log('화살표함수');
}화살표 함수는 짧아서 사용하기가 간편하다.
화살표 함수에는 별도로 함수명을 쓰지 않기 때문에 익명함수라고도 한다.
화살표 함수는 효율적인 메모리 관리가 가능하다는 익명함수의 특징을 포함하고 있다.
화살표 함수가 한 줄일 경우에는 아래와 같이 더 짧게 선언하는 것도 가능하다.
var 화살표함수 = () => console.log('화살표함수');화살표 함수에서의 this
아래 예시를 통해서 이해도를 높여보자.
var target = '전역변수';
function 일반함수(){
console.log(this.target);
}
var 오브젝트 = {
target: '지역변수',
action: 일반함수,
}
오브젝트.action(); //결과값은?위 코드의 결과값은 '지역변수' 이다.
오브젝트 내에서 this를 부르면 this를 포함하고 있는(감싸고 있는) 부모 요소를 가리키게 된다.
결국 this.target 은 오브젝트.target 과 동일한 표현이 된다.
var target = '전역변수';
var 화살표함수 = () => {
console.log(this.target)
};
var 오브젝트 = {
target: '지역변수',
action: 화살표함수,
}
오브젝트.action(); //결과값은?위의 결과 값은 '전역변수'인데,
화살표 함수의 경우 내부의 this는 선언이 된 시점에서 this를 호출한다.
따라서 target 변수는 밖에서 받아온 this(=window)라는 전역 설정한 값이 들어오게 되는 것이다.
이렇게 예시를 들어가면서 공부하니까 확실히 이해가 빠르게 된다.
this값을 선언할 때마다 화살표 함수/일반함수/익명함수 별로 어떻게 관리를 해야하는지 좀 헷갈렸었는데 정리가 되는 기분이다.
참고:: [javascript] 쉽게 이해하는 화살표 함수와 람다 함수 (익명함수) - HAN_PY 티스토리 블로그
