-
Notifications
You must be signed in to change notification settings - Fork 13
함수 표현식 과 함수 선언식
번역 : https://www.sitepoint.com/function-expressions-vs-declarations/
자바스크립트는 함수 생성 방식에 대해 2가지 방법이 있다. Funtion 선언 방법은 오랫동안 사용해 왔었지만 함수 표현식은 점차 쓰여져 가고 있다.
function funcDeclaration() {
return 'A function declaration';
}
var funcExpression = function () {
return 'A function expression';
}
var
문과 유사하게 function 선언들은 다른 코드의 위로 hoist 된다. Function 표현식은 hoist 되지 않는다. 그것은 그 함수들이 선언된 스코프 이후 지역변수의 사본을 보유하는 것을 가능하게 한다.
일반적으로 함수 선언과 함수 식은 서로 바꿔 사용할 수 있지만 함수식이 임시 함수 이름없이 코드를 더 쉽게 이해할 수있는 경우가 있습니다.
함수 표현식이 함수 선언보다 더 유용하게 사용되는 몇 가지 다른 방법이 있습니다.
- 클로저로서
- 다른 함수의 인자로서
- 함수 표현식의 즉시 실행으로서 (IIFE)
클로저는 함수가 실행되기 전에 함수에 매개 변수를 제공하려는 경우에 사용됩니다. 이것이 NodeList를 루프 할 때 어떻게 유익한 지 보여주는 좋은 예가 있습니다. 클로저를 사용하면 함수가 실행될 때 해당 정보를 더 이상 사용할 수없는 경우 인덱스와 같은 다른 정보를 유지할 수 있습니다.
function tabsHandler(index) {
return function tabClickEvent(evt) {
// Do stuff with tab.
// The index variable can be accessed from within here.
};
}
var tabs = document.querySelectorAll('.tab'),
i;
for (i = 0; i < tabs.length; i += 1) {
tabs[i].onclick = tabsHandler(i);
}
연결된 이벤트 핸들러는 나중에 루프가 완료된 후 실행되므로 for 루프의 적절한 값을 유지하려면 클로저가 필요합니다.
// Bad code, demonstrating why a closure is needed
var i;
for (i = 0; i < list.length; i += 1) {
document.querySelector('#item' + i).onclick = function doSomething(evt) {
// Do something with item i
// But, by the time this function executes, the value of i is always list.length
}
}
for 루프에서 doSomething () 함수를 추출하면 문제가 발생하는 이유를 더 쉽게 이해할 수 있습니다.
// Bad code, demonstrating why a closure is needed
var list = document.querySelectorAll('.item'),
i,
doSomething = function (evt) {
// Do something with item i.
// But, by the time this function executes, the value of i is not what it was in the loop.
};
for (i = 0; i < list.length; i += 1) {
item[i].onclick = doSomething;
}
여기의 해결책은 인덱스를 함수 인수로 외부 함수에 전달하여 해당 값을 내부 함수로 전달할 수 있도록하는 것입니다. 일반적으로 내부 반환 함수에 필요한 정보를 구성하는 데 사용되는 처리기 함수를 볼 수 있습니다.
// the following is good code, demonstrating the use of closure
var list = ['item1', 'item2', 'item3'],
i,
doSomethingHandler = function (itemIndex) {
return function doSomething(evt) {
// now this doSomething function can retain knowledge of
// the index variable via the itemIndex parameter,
// along with other variables that may be available too.
console.log('Doing something with ' + list[itemIndex]);
};
};
for (i = 0; i < list.length; i += 1) {
list[i].onclick = doSomethingHandler(i);
}
클로저의 다른 좋은 예와 도움이되는 방법은 다음에서 찾을 수 있습니다.closure examples FAQ
함수 표현식은 중간 임시 변수에 지정하지 않고 직접 함수에 전달할 수 있습니다.
익명 함수의 형태로 jQuery에서 자주 볼 수 있습니다. 예를 들면 다음과 같습니다.
$(document).ready(function () {
console.log('An anonymous function');
});
또한 forEach ()와 같은 메서드를 사용할 때 배열 표현식을 처리하는 데 함수식이 사용됩니다. 익명 함수가 이름을 가지지 못하지는 않습니다. 함수 표현식의 이름을 지정하여 함수가 수행해야하는 것을 표현하고 디버깅을 돕는 것이 좋습니다.
var productIds = ['12356', '13771', '15492'];
productIds.forEach(function showProduct(productId) {
...
});
IIFE는 함수와 변수가 전역 범위에 영향을 미치지 않도록 도와줍니다. 모든 속성은 익명의 함수로 범위가 지정됩니다. 이는 코드가 원치 않는 또는 원하지 않는 부작용을 다른 곳에서가지는 것을 방지하는 데 사용되는 일반적인 디자인 패턴입니다.
또한 섹션을 유지하기 쉽도록 코드 블록을 포함하는 모듈 패턴으로 사용됩니다. JavaScript 클로저, 콜백 및 IIFE 이해하기에서 ( Demystifying JavaScript closures, callbacks and IIFEs ) 이것에 대해 자세히 살펴 봅니다.
IIFE의 간단한 예는 다음과 같습니다.
(function () {
// code in here
}());
모듈로 사용하면 코드에 대한 유지 관리가 쉽습니다.
var myModule = (function () {
var privateMethod = function () {
console.log('A private method');
},
someMethod = function () {
console.log('A public method');
},
anotherMethod = function () {
console.log('Another public method');
};
return {
someMethod: someMethod,
anotherMethod: anotherMethod
};
}());
지금까지 보았 듯이 함수 표현식은 함수 선언으로는 얻을 수없는 많은 것을 제공하지는 않지만 함수 선언을 사용하면 더 명확하고 읽기 쉬운 코드가 될 수 있습니다. 이들이 광범위하게 사용되면 모든 개발자의 도구 상자에 필수 요소가됩니다. 위에서 언급하지 않은 흥미로운 방식으로 코드에서 함수 표현식을 사용합니까? 댓글을 달아서 알려주세요.
일부 의역이 들어간 경우도 있으므로 해당 원문의 내용과 조금 다를 수 있습니다.
문제가 될 소지가 있다거나 혹은 수정이 필요한 사항이 있다면 있다면 issues 보내주세요.
기술문서
- 호출스택
- 원시자료형
- 값타입과 참조타입
- 명시적 변환, 암시적 변환, Nominal, 구조화, 덕 타이핑
- == vs === vs typeof
- 함수 범위, 블록 범위, 렉시컬(lexical) 범위
- 식(expression) vs 문(statement)
- IIFF, Modules, Namespaces
- 메세지큐와 이벤트루프
- setTimeout, setInterval, requestAnimationFrame
- 자바스크립트 엔진
- 비트 연산자, 형식화 배열, 버퍼(배열)
- DOM과 Layout Trees
- 팩토리와 클래스
- this, call, apply, bind
- new, 생성자, instanceof, 인스턴스
- 프로토타입의 상속과 체인
- Object.create와 Object.assign
- map, reduce, filter
- 순수함수, 부수효과, 상태변이
- Closure
- 고차함수
- 재귀
- 컬렉션과 생성기
- Promise
- async, await
- 자료구조
- 함수 성능과 빅 오 표기법
- 알고리즘
- 상속, 다형성, 코드의 재사용성
- 설계패턴
- 부분 어플리케이션, 커링, Compose, Pipe
- 클린코드