Slyeee

해당 객체의 CSS에  cursor:pointer 를 적용하면 끝!!

렉시컬 스코핑(lexical scoping)

많이들 헷갈리는 개념인데 스코프는 함수를 호출할 때가 아니라 선언할 때 생깁니다. 호출이 아니라 선언요! 정적 스코프라고도 불립니다. 다음 코드에서 console이 어떻게 찍힐 지 예상해보세요.

쉽죠? nero입니다. log를 호출하기 전에 name을 'nero'로 바꿨거든요. 그럼 다음은요? 문제를 살짝 바꿨습니다.

똑같이 nero 아니냐고요? 땡! zero입니다. 스코프는 함수를 선언할 때 생긴다고 했죠? log 안의 name은 wrapper 안의 지역변수 name이 아니라, 전역변수 name을 가리키고 있는 겁니다. 이런 것을 lexical scoping이라고 합니다. 한글로는 어떻게 번역해야 할지 모르겠네요. 직역하면 어휘적 범위인데 좀 어색하죠? 정적 스코프가 더 나아 보이네요.

lexical scoping이 좀 이해하기 힘들기 때문에 다시 설명드리겠습니다. 함수를 처음 선언하는 순간, 함수 내부의 변수는 자기 스코프로부터 가장 가까운 곳(상위 범위에서)에 있는 변수를 계속 참조하게 됩니다. 위의 예시에서는 log 함수 안의 name 변수는 선언 시 가장 가까운 전역변수 name을 참조하게 됩니다. 그래서 wrapper 안에서 log를 호출해도 지역변수 name='nero'를 참조하는 게 아니라 그대로 전역변수 name의 값인 zero가 나오는 겁니다.

무슨 짓을 해도 log 함수가 한 번 선언된 이상, 전역변수를 가리키게 되어있는 name 변수가 다른 걸 가리키게 할 수 없습니다. 유일한 방법은 아까처럼 전역변수를 다른 값으로 바꾸는 겁니다. 다음 시간에 실행 컨텍스트에 대해서 배울텐데 그 때 정확한 원리를 설명드리겠습니다.

전역변수를 만드는 일은 지양하라고 했는데, 그 이유는 변수가 섞일 수 있기 때문입니다. 자바스크립트 앱을 만들면서 혼자만 개발하는 게 아니라, 여러 명과 협동도 하고, 다른 사람의 라이브러리(자바스크립트 코드 모음)를 사용하는 일도 많습니다. 그런데 전역변수를 사용하다보면, 우연의 일치로 인해 같은 변수 이름을 사용해서 이전에 있던 변수를 덮어쓰는 불상사가 발생할 수 있습니다. (특히 $나 _같은 유니크한 변수들은 경쟁이 치열합니다)

간단한 해결 방법은 전역 변수 대신 한 번 함수 안에 넣어 지역변수로 만드는 겁니다. 아니면 객체 안의 속성으로 만들 수도 있습니다.

위 처럼 하면 obj.x, obj.y(); 이렇게 접근해야 하기 때문에 다른 사람과 섞일 염려가 없죠. obj를 통째로 덮어쓰지 않는 이상은요. 전역변수를 하나로 최소화해서 변수가 겹칠 우려도 최소화하는 거죠.

이런 방법을 네임스페이스를 만든다고 표현합니다. obj라는 고유 네임스페이스를 만들어서 겹치지 않게 하는 거죠. 대부분의 라이브러리가 네임스페이스를 사용하고 있죠. naver는 jindo, facebook은 FB, jquery는 jQuery(또는 $)같이요.

하지만, 위 방법의 단점은 누군가 고의적으로 x와 y를 바꿀 수 있습니다. 코드 밑에 스크립트를 추가해서요. obj를 통째로 바꾸지 않더라도 밑에 obj.x = 'hacked';라고 한 줄 추가만 하면 obj.y();를 했을 시 local 대신 hacked가 alert됩니다. 그것을 방지하려면

조금 복잡하지만 위와 같이 하면 됩니다. another(); 하는 순간 return에 의해 {y: function () {alert(x)}};가 newScope에 저장됩니다. 이제 newScope라는 네임스페이스를 통해서 y에 접근할 수 있습니다. x는 접근할 수 없죠. 위처럼 함수로 감싼 후 return을 통해 공개할 변수(y)만 공개하고 비공개할 변수(x)는 비공개하는 방법을 취할 수 있습니다. 즉, return하는 변수는 공개 변수고, 다른 것은 비공개 변수인거죠.

위의 코드를 간략하게 바꾸면

위와 같이 쓸 수 있습니다. another같은 변수를 한 번 거치는 대신, newScope에 바로 집어넣은거죠. 처음보는 게 나왔는데요. (function() {})();구문입니다. IIFE(즉시 호출 함수 표현식)이라고도 하고, 모듈 패턴이라고도 하는데, 함수를 선언하자마자 바로 실행시켜버리는 거죠. 함수를 function() {}로 선언하면서 동시에 ()를 붙이니까 즉시 실행됩니다. 이 구문이 라이브러리를 만들 때 기본입니다. 많은 라이브러리가 이 구문을 활용하고 있습니다. 비공개 변수가 없는 자바스크립트에 비공개 변수 기능을 만들어주기 때문이죠. 이 패턴은 꼭 기억하고 있어야합니다!

위의 패턴의 원리를 알려면 실행 컨텍스트에 대해 알아야 합니다. 다음 시간에는 제일 중요한 개념인 실행 컨텍스트와 그것을 활용한 클로저에 대해 알아보겠습니다.

출처 : https://www.zerocho.com/category/Javascript/post/5740531574288ebc5f2ba97e