자바스크립트 클로저 자바스크립트 객체에는 기본적으로 은닉화 개념이 없다.let wallet = { money: 1, count: function() { this.money++; console.log(this.money); } }; wallet.count(); wallet.count(); wallet.count(); /** 외부에서 접근 가능 */ wallet.money = 10000; wallet.count(); wallet.count(); wallet.count(); 결과(자바스크립트 코딩 컨벤션(_money)으로 경고할 수 있지만, 의미 x) 앞서 포스팅한 스코프 개념, 함수도 객체다라는 개념을 활용해 은닉화가 가능한데,이를 클로저라 한다. 함수를 객체로 볼 수 있기 때문에 아래와 같은 사용이 가능하다.function .. 자바스크립트 this 바인딩 function Hello() { console.log(this); }; const testObj = { name: 'test' }; Hello(); /** 1. 일반적인 경우 : undefined or Window ---> '호출'한 객체 */ testObj.hello = Hello; testObj.hello(); /** 1. 일반적인 경우 : testObj 객체 ---> '호출'한 객체 */ new Hello(); /** 2. 생성자로 쓰이는 경우 : Hello 객체 ---> 생설될 객체의 Prototype 객체 */1. 일반적인 경우, 해당 함수를 호출한 객체에,2. 생성자 호출의 경우, 생성될 객체의 Prototype 객체에 바인딩 된다. 자바스크립트 스코프 체인 쉽게 이해할 수 있는 예제 var val = 1; function func1() { console.log(val); } function func2() { var val = 100; func1(); } func2();100이 출력될 것 같지만, func1, func2는 모두 동일한 수준의 scope를 가지기 때문에출력결과는 1이고, scope는 모두 전역 객체만 가지고 있다. 반대로 아래와 같은 경우는var val = 1; function func2() { var val = 100; function func1() { console.log(val); } func1(); } func2();100이 출력되고, func1이 func2 scope를 하나 더 가지고 있는 것을 확인할 수 있다.(전역 객체를 뒤지기 전에, func2를 먼저 확인) 자바스크립트 생성자 함수 패턴(생성자 강제) 참고) 자바스크립트 객체 생성방법 new Object() vs 객체 리터럴({}) vs 생성자 함수 위 글에서 생성자 함수의 오류 가능성에 대해 이야기 했는데,이를 방지하기 위한 패턴이 있다. 간단히 아래 사실을 이용해 강제한다. this가 무엇을 가리키다?- new를 붙여 함수 사용시 : 함수 객체 자신- 그냥 사용시: window let Human = function(name) { if (!(this instanceof Human)) return new Human(name ? name : 0); this.name = name ? name : 0; }; /** 아래와 같이 new를 안붙여도 생성자로 사용된다 */ let human = Human('hoon'); console.log(human); 쪼금 .. 자바스크립트 객체 생성방법 new Object() vs 객체 리터럴({}) vs 생성자 함수 1. new Object()/** * 1. new Object() 생성자 사용 * @type {Object} */ let Human = new Object(); Human.name = 'alba'; Human.sex = 'female';2. 객체 리터럴({})let Human2 = { name: 'john', sex: 'male' }; 1, 2 방식은 내부적으로 같다.하지만 자바스크립트에서는 객체 리터럴({}) 방식을 권고한다. A. 가독성 B. 빠르다(다수의 객체를 동일하게 생성해놓고 시간을 비교해보면 다르다) C. new Object()는 오버라이딩이 가능하므로 위험/** Object가 fucntion이 아니라 1이 되어버렸다. */ Object = 1; let a = new Object(); 3. .. var, let, const 차이 1. var/** * 몇번이고 '재선언' 가능 -> 혼란 야기 */ var a = 3; var a = 4; var a = 6; /** * 아래와 같은 경우.. */ for (var i = 0; i 에러 */ let a = 3; let a = 4; let a = 6; /** * '재할당'은 가능 */ a = 5; a = 6; /** * 아래와 같은 경우.. */ for (let i = 0; i < 10; i++) {} console.log(i); 3. const/** * '재선언' 불가 */ const a = 3; const a = 4; const a = 6; /** * '재할당'도.. 자바스크립트 arguments(매개변수의 갯수에 따른 처리가 필요할 때) 모든 함수의 프로토타입인 Function에는 arguments라는 유사배열객체가 존재한다.(cf. 유사배열객체: length 프로퍼티를 가진 일반 객체, 기본 배열 메서드는 사용할 수 없다) 이를 활용해 매개변수의 갯수에 따른 처리가 필요한 함수를 구현 가능let func = function(a, b, c) { console.log(arguments); }; func(1, 2, 3); 자바스크립즉시 실행함수 (function(num) { console.log(num); })(5);let func = (function(num) { console.log(num); })(5);(역시 함수이므로 변수에 할당 가능) ----> 초기화에 사용 사용하는 가장 큰 이유- 전역변수의 충돌을 방지(ex. 여러 라이브러리를 동시에 사용할 때)let a = 5; (function() { a = 5; })(1000); console.log(a);a는 여전히 5다.(function($) { /** * 이제 이 안에서만 jQuery오브젝트를 $로 사용한다. * 타 라이브러리에서 사용되는 $과는 구별된다. */ ... })(jQuery); 이전 1 2 3 4 5 6 7 ··· 25 다음
