'프론트앤드/JavaScript' 카테고리의 글 목록

When learning JavaScript, with all the attention given to variables, functions, 'if' statements, loops and event handlers, often little is done to educate you on how you might cleanly organise your code into a cohesive, structurally-sound whole.

자바 스크립트를 배우면서 변수, 함수, if 문, 반복 문 그리고 이벤트 핸들러에 관심을 갖다 보면, 아마도 당신은 깔끔하게 당신의 코드가 전체적으로 응집도가 있고 , 아주 구조적으로 구성해야 하는지에 대해서 교육을 받게 됩니다. ,

Let's take the following code for example:

다음과 같은 코드를 예로 들어 봅시다.

var foo = 'Hello';
var bar = 'World!';

function baz(){
return foo + ' ' + bar;
}

console.log(baz());

This style of code looks quite normal, works fine and doesn't cause any problems. At least for now.

이 코드 스타일은 아주 평범합니다, 작동도 아주 잘되고 어떤 문제를 일으키지는 않습니다. 적어도 지금은 말이죠.

This style of code, when implemented in a large application, can start to become an unwieldy mess. The global namespace becomes littered with functions and variables, all tenuously linked to each other through a combination of rudimentary comments and potentially unspoken developer knowledge.

이 코드의 스타일로 거대한 어플리케이션에 구현되면 거추장스러운 상태로 되기 시작합니다. 이 전역 네임스페이스는

The first step on the journey to beautiful, modular JavaScript is to learn the art of the self-executing anonymous function.


(function(){

							console.log('Hello World!');
})();

Let's look at this carefully. This code is made up of two key parts.

자 주위 깊게 보세요, 이 코드는 2가지 핵심적인 부분이 있습니다.

First is the anonymous function:

첫째는 익명 함수 입니다.


(function(){

							//Normal code goes here
})

The really interesting part is what happens when we add this right at the end:

정말로 흥미로운 것은 우리가 아래 코드를 끝에 추가할 때 어떤 일이 일어난다는 것이다.

();

Those two little brackets cause everything contained in the preceding parentheses to be executed immediately. What's useful here is that JavaScript has function level scoping. All variables and functions defined within the anonymous function aren't available to the code outside of it, effectively using closure to seal itself from the outside world.

두개의 소괄호는 이전 괄호에 포함된 모든 것을 즉시 실행되게 한다. 이것의 유용 함은 자바스크립트에서 이 함수 수준 범위를 가진다는 것에 있다.

익명 함수 이내의 모든 변수, 함수들은 익명 함수 밖에 코드에 접근할 수 없고, 이것은 효과적으로 외부 영역으로부터 익명 함수를 감싸서 막는 것이다.

Let's apply this design patten to our gloriously inane example code.

우리의 아주 화려하게 초라한 예제 코드에 디자인 패턴을 적용해보자.



(function(){

							var foo = 'Hello';

											var bar = 'World!'


													function baz(){

																return foo + ' ' + bar;

																					}
})();

//These all throw exceptions:
console.log(foo);
console.log(bar);
console.log(baz());

The last three lines throw exceptions because currently nothing is accessible outside the anonymous function. To allow access to a variable or function, we need to expose it to the global 'window' object.

현재 어떤 것도 익명 함수 내부에는 접근할 수 없기 때문에 밑에서 3번쨰 라인에서 에러가 난다. 변수 또는 함수를 접근을 허용하기 위해서는, 우리는 글로벌 window 객체에 익명 함수를 노출하는 것이 필요한다.



(function(){

							var foo = 'Hello';

											var bar = 'World!'


													function baz(){

																return foo + ' ' + bar;

																					}


																						window.baz = baz; //Assign 'baz' to the global variable 'baz'...
})();

console.log(baz()); //...and now this works.

//It's important to note that these still won't work:
console.log(foo);
console.log(bar);

One of the major benefits of this pattern, as seen on the last two lines of the previous example, is that you can limit access to variables and functions within your closure, essentially making them private and only choosing to expose an API of your choice to the global scope.

이 패턴의 주된 이점 중에 하나는 , 위 예제에서 밑에서 2번째 라인을 보면 , 당신의 클로져 내부의 변수, 함수들에 대한 접근을 제한시킬 수 있고 , 기본적으로 Private 하면서 , 오직 global 영역에 당신의 선택에 의한 API들을 노출시키는 것을 선택할 수 있다.

제이쿼리에서도 볼 수 있었던 것처럼, 이 디자인 패턴의 하나의 일반적인 흐름은 공통적으로 공통적으로 객체를 사용하여 넘기는 것이다. 우리가 참조한 WINDOW 는 우리 코드에서 , 익명함수의 파라미터로 넘겨보자.



(function(window){

							var foo = 'Hello';

											var bar = 'World!'


													function baz(){

																return foo + ' ' + bar;

																					}


																						//In this context, 'window' refers to the parameter

																							window.baz = baz;
})(window); //Pass in a reference to the global window object

When minifying your code, this design pattern will yield great results. All references to 'window' in your code can be renamed to 'a', for example:

당신의 코드를 축소할 때 , 이 디자인 패턴은 아주 좋은 결과를 가져온다. 당신의 코드에서 Window에 대한 모든 참조들은 아래 예처럼 a로 새롭게 이름을 바꿀 수 있다..

(function(a){

							console.log(a === window); //Returns 'true'
})(window);

Normally you'll want to pass in a few objects. A technique you can see used within jQuery itself is to reference an extra parameter that isn't defined when the anonymous function is executed, in effect creating an alias for 'undefined':

일반적으로 당신은 몇 개의 객체를 넘기는 원한다. 제이쿼리 자체에서 사용한 기술을 보면, 익명 함수가 실행될 때 효과적으로 undefined의 alias 로 만들면서 여분의 파라미터를 참조하는 것이다.


(function(window, document, $, undefined){

													var foo;

																console.log(foo === undefined); //Returns 'true'
})(window, document, jQuery);

You may have noticed that the previous example also aliased 'jQuery' to '$', allowing it to play nicely with other frameworks without having to use jQuery in noConflict mode.

It's worth pointing out that the parameter names are purely for convention. The following code would work equally as well and serves as a great illustration of what's really going on in this design pattern:

불 충돌 모드를 사용하지 않고도 또 다른 프레임워크들과 문제 없이 동작하도록 해주는 이전 예시에서 jQuery 또는 $ 로 rename 했다는 것을 알아차릴 수 있다.

이것은


(function(mark, loves, drinking, coffee){
    mark.open('http://www.google.com'); //window

																			loves.getElementById('menu'); //document

																										drinking('#menu').hide(); //jQuery

																																	var foo;

																																				console.log(foo === coffee); //undefined
})(window, document, jQuery);