본문 바로가기

Web

 (104)
webpack.config.js var webpack = require('webpack'); module.exports = { entry: [ "./app.js" ], output: { path: __dirname + '/static', filename: "bundle.js" }, module: { loaders: [ { test: /\.js?$/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] }, exclude: /node_modules/ } ] }, plugins: [ ] };
렉시컬 환경(Lexical Environment) 렉시컬 환경 - 함수가 사용할 함수, 변수를 렉시컬 환경에 설정 - 함수가 구조적, 독립적 환경에서 실행하기 위한 메커니즘 제공 - 초기화 단계에서 해석한 - 모든 함수/변수를 {key:value} 형태로 저장 - 함수/변수 이름을 key에 설정하고 값을 value에 설정 - 따라서 함수/변수를 key로 식별할 수 있음 렉시컬 환경 구성 렉시컬 환경은 - function, with, try-catch에서 생성 렉시컬 환경 구성 형태 렉시컬 환경(LE) = { ... 환경 레코드(ER: Environment Record): {...}, ... 외부 렉시컬 환경 참조(OLER: Outer Lexical Environment Reference): {...} } - 환경 레코드에 함수 안의 함수, 변수 기록 -..
실행 콘텍스트 - Execution Contexts - 함수의 실행 영역 - 함수 코드를 실행하고 - 실행 결과를 저장 실행 콘텍스트 = { 렉시컬 환경 컴포넌트 = { 환경 레코드 : {}, 외부 렉시컬 환경 참조 : {[[scope]]} }, 변수 환경 컴포넌트 = { 환경 레코드 : {}, 외부 렉시컬 환경 참조 : {[[scope]]} }, this 바인딩 컴포넌트 = {} }
클로저(closure) 클로저(closure)는 내부함수와 밀접한 관계를 가지고 있는 주제다. 내부함수는 외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다. 이러한 메커니즘을 클로저라고 한다. var a = 1; function freeAdder(b) { return function(c) { return a + b + c; } } var add2 = freeAdder(2); add2(3); // 6 - [[scope]] 참조하여 내부함수에서 외부함수 변수 사용
바인딩(Binding) 바인딩 - 구조적으로 결속된 상태로 만드는 것 - 대상 : 오브젝트와 프로퍼티 이름 get = { qty: value, price: value } 바인딩 목적 - 스코프 결정 - 오브젝트에서 이름 식별 바인딩 시점 정적 바인딩(Lexical Binding) - 초기화 단계에서 바인딩 - 변수, 함수 표현식에 초기값 설정 : undefined - 함수선언문 : Function 오브젝트 생성 - 대부분의 함수가 정적 바인딩 동적 바인딩(Dynamic Binding) : 사용 권장하지 않음(보안문제,엔진부하 등) - 실행 단계에서 바인딩 - eval 함수, with 문(for-in문으로 대체하여 사용 권장) 바인딩 시점이 중요한 이유 - 바인딩할 때 스코프가 결정되기 때문 - 정적 바인딩은 [[Scope]]
글로벌 오브젝트 글로벌 오브젝트- 빌트인 오브젝트 중에 하나- 전체 프로그램을 통해 하나만 존재 - 전체 프로그램 : 모든 에 작성한 코드- 첫번째 에서 한 번만 생성- new 연산자 사용 불가 글로벌 스코프- 전체를 통해 하나만 존재하므로 - 스코프도 하나 - 글로벌 스코프이므로 모든 프로그램에서 사용 가능 - 최상위 스코프 - 검색한 프로퍼티가 없으면 undefiend 반환 - 스코프 설정 - Function 오브젝트의 [[Scope]]에 설정 글로벌 함수함수 구분- 글로벌 함수 : 전역 함수- 로컬(Local) 함수 : 지역 함수 글로벌 함수- 글로벌 오브젝트에 작성한 함수'use strict'; 사용 권장strict 모드일때 : var를 사용하지 않고 함수를 선언하면 에러- 글로벌, 지역에 관계없이 var 키워드..
스코프(Scope) 스코프(Scope)- 함수가 실행될 때 영향을 받는 범위 split()의 스코프- split()은 String 오브젝트의 scope- Number 오브젝트에서 split()은 스코프가 달라 사용불가 사용목적- 범위제한, 신속한 검색/접근- 같은 프로퍼티 이름 사용 가능- String의 indexOf(), Array의 indexOf() 스코프 설정 시점- Function 오브젝트를 생성할 때- 함수를 호출할 때 설정하지 않음- 따라서 function 안의 코드에 대해서는 구조를 만들지 않음- 밖에서 안으로 들어가면서 스코프 구조 형성 스코프 체인- 스코프가 상하 구조로 연결된 개념/구조- ES3에서 채용ES5에서 scope chain 용어 폐지- 렉시컬 환경 사용
Arguments 오브젝트 parameter 수가 고정일때- parameter 사용 parameter 수가 유동적일때- arguments[] 사용 length 프로퍼티- Array-like : 0부터 인덱스를 key로 사용하고 length를 가짐{0:1, 1:2, 2:3, length:3} 해석단계1. 함수 호출2. 파라미터 할당3. arguments 오브젝트 생성

티스토리툴바