전체 글44 즉시실행함수, Closure 자동으로 함수를 실행 즉시 실행 함수 표현(IIFE) 임 (function(){ //dosomething })(); 위와 같이 사용할 수 있다. 클로저 var outFoo = function(){ var x = 'access'; return function inFoo(){ return x; } } var foo = outfoo(); console.log(foo()); // access 안쪽에 있는 함수가 x를 바깥쪽 함수에 접근한다. 중첩된 함수는 외부 범위에서 선언한 변수에도 접근 가능하다. 2019. 12. 24. this의 참조 실행 콘텍스트의 this 바인딩 컴포넌트에 바인딩되어 객체를 참조 console.log(foo() === window.foo()); //true 기본적으로 this는 전역 객체를 참조한다. 만약 어떠한 객체를 참조하고 있다면 this는 그 객체를 참조하게 된다. function foo(){ console.log(this); } foo()// window const obj = { foo: foo }; obj.foo() // obj 또한 this는 객체 속성의 내부함수로 this가 있다면 그 this는 window를 가리키게 된다. 콜백 함수의 this도 window 객체를 가리킨다. 내부 함수 const obj = { foo: function(){ console.log(this); // obj functi.. 2019. 12. 24. prototype 자바스크립트는 prototype 기반 언어라고 한다. 내가 공부한 것은 prototype을 통해 object 객체를 복사해서 새로운 객체를 생성하고 그 객체는 다른 어떤 객체의 원형이 되어 prototype으로 접근할 수 있다는 것이다. 일단 예를 들어보자 var Foo = function(){}; 위와 같이 Foo라는 새로운 object를 정의하면 동시에 Foo Prototype Object 생성된다. 그렇게 되면 여기서 new를 통해 생성된 객체는 Foo의 prototype을 사용할 수 있게 된다. var Foo = function(){}; var foo = new Foo(); 아래와 같은 결과를 확인할 수 있다 __proto__때문에 객체의 prototype과 연결되는 연결고리가 되어 사용할 수 있.. 2019. 12. 23. Execution Context var point = 100; var Foo =function(){ this.point = 1; this.setPoint = function(point){ this.point = point }; this.getPoint = function(){ // return this.point; return point; }; } console.log(foo.getPoint()) // 100 출력 생성시점은 실행 가능한 코드를 만났을 때이다. 상태 컴포넌트의 3가지 유형 1. 정적 환경 컴포넌트 2. 변수 환경 컴포넌트 3. this 바인딩 컴포넌트 정적 환경 컴포넌트는 실행 컨택스트에서 함수 안의 함수와 변수들을 기록한 것이다. 변수 환경 컴포넌트는 초기값 복원을 할 때 사용하는 것으로 정적 환경 변수와 같은 레벨로.. 2019. 12. 23. Argument 처리 형태 arguments 객체가 파라미터를 { key: value } 형태로 저장 function foo(){ return arguments }; console.log(foo(1,2,3)); // 0: 1 ,1: 2, 2: 3, length: 3 결과에서 보이듯이 배열의 형태를 하면서 array 형식으로 반환해준다. 이것은 정확이 배열이 아니며 array-like가 된다. 그렇기에 array의 내장 함수를 사용하지 못한다. 하지만 function foo(){ let newArr = Array.prototype.slice.call(arguments); return newArr; }; console.log(foo(1,2,3)); // (3) [1, 2, 3] 위와 같이 배열로 만들어 사용할 수도 있다. array-.. 2019. 12. 22. 호이스팅 함수 앞에서 함수를 호출하는 것을 호이 스팅이라고 한다. 함수 선언문은 초기화 단계에서 함수 오브젝트를 생성하기 때문에 어디에서도 호출할 수 있다. let foo = hoistingFn(); console.log(foo); // Hoisting function hoistingFn(){ return "Hoisting"; } 이것은 function과도 같은 것인데 처음에 선언문을 찾고 그것을 object화 시키며 등록한다 그다음 foo 변수를 초기화하고 마지막으로 실행 함수를 실행시킨다. 그렇기 때문에 오류 발생하지 않고 해석할 수 있는 것이다. let foo = hoistingFn(); console.log(foo); // Hoisting function hoistingFn(){ return "Hoisti.. 2019. 12. 20. function function 오브젝트의 저장 형태는 { key : value } 형태로 저장된다. function foo(){} // {foo : {..}} 의 형태로 저장 위와 같이 인식을 하기 때문에 js에서는 오버 로딩이 이 없다 함수가 실행될 환경을 알아야 맞춰서 실행할 수 있기에 함수 실행 환경 인식이 필요하다 function 키워드를 만나 object를 만나는 시점이 실행 환경 설정 시점이다. 여기서 실행 영역을 설정하게 된다. (단 한 번만 스코프만 만들면 된다.) 함수 코드의 해석 순서. 함수 안에 함수 선언문을 해석한다. 변수를 초기화한다. 코드를 실행한다. 함수 정의 형태 함수 표현식 var foo = function(){} 함수 선언식 function foo(){} 함수를 해석할 때 변수를 초기화.. 2019. 12. 20. 스코프 결정 시점 과 함수레벨스코프 함수 키워드를 만나게 되는 시점에서 스코프가 결정이 된다. 함수가 호출되는 시점에 함수 안의 영역에 있는 함수와 변수를 정적으로 사용할 수 있게 된다. 하지만 함수에서 var를 사용하지 않고 변수를 선언하게 된다면 이것은 전역 변수가 된다. var result = 1; function foo(){ result =2; } foo(); console.log(result); //result 2 이런 것을 방지하기 위해서 es5에서는 위해 use strict를 사용 (전역 변수 생성 시 선언을 해야 한다) "use strict" result = 1; //에러 발생 Uncaught ReferenceError: result is not defined , es6에서는 let, const 키워드를 사용한다 var fo.. 2019. 12. 20. 이전 1 2 3 4 5 다음
