본문 바로가기

Web/Javascript

 (29)
클로저(CLOSURE) Lexical environment 선언 당시의 환경에 대한 정보를 담는 객체(구성 환경) '이 함수는 이러이러한 것들로 구성되어 있다' 같은 정보 클로저(CLOSURE) 함수 내부에서 생성한 데이터와 그 유효범위로 인해 발생하는 특수한 현상 / 상태 외부에 정보를 제공할 수 있는 유일한 수단은 Return 함수내부에서 다시 함수를 return 한다고 해도 최초 선언시에 생성된 스코프와 환경정보는 변하지 않고 최초 선언시의 정보를 유지한다. 스코프(유효범위)는 정의될 때 결정된다. 그렇기 때문에 정의됐을 때 당시에 들고있던 정보를 그대로 유지할 수 있는 것이다. 클로저의 이점 접근 권한 제어 지역변수 보호 데이터 보존 및 활용 function a() { var x = 1; return function b..
CALL, APPLY, BIND 메소드 call, apply, bind 메소드 func.call(thisArg[, arg1[, arg2[, ...]]]) func.apply(thisArg, [argsArray]) func.bind(tihsArg[, arg1[, arg2[, ...]]]) 첫번째 인자는 this가 될 대상을 지정 두번째 인자부터는 매개변수가 된다. call 과 apply의 차이는 두번째부터 쭉 나열해서 매개변수를 받느냐 아니면 두번째 인자 하나에 배열로 합쳐서 하나의 인자로 받느냐의 차이일 뿐이다. call과 apply는 즉시 호출하는 명령이다. 반면 bind는 새로운 함수를 생성 할 뿐 호출을 하지는 않는다. function a(x, y, z) { console.log(this, x, y, z); } var b = { c: '..
THIS this 전역공간에서 : window / global함수 내부에서 : window / global ( 함수는 전역객체의 메소드 )메소드 호출시 : 메소드 호출 주체 ( 메소드명 앞 )callback에서 : 기본적으로는 함수내부에서와 동일제어권을 가진 함수가 callback의 this를 명시한 경우 그에 따른다개발자가 this를 바인딩한 채로 callback을 넘기면 그에 따른다.생성자함수에서 : 인스턴스
함수 호이스팅 끌어올린다. 변수 '선언' 함수 '선언' - 호이스팅 전 console.log( a() ); console.log( b() ); console.log( c() ); function a() { // 함수 선언문 return 'a'; } var b = function bb() { // 기명 함수표현식 return 'bb'; } var c = function() { // (익명) 함수표현식 return 'c'; } - 호이스팅 후 function a() { return 'a'; } var b; var c; console.log( a() ); console.log( b() ); console.log( c() ); b = function bb() { return 'bb'; } c = function() ..
DATA TYPES 자바스크립트의 데이터타입은 크게 두가지로 분류된다. 기본형(Primitive Type) : Number, String, Boolean, null, undefined 등 참조형(Reference Type) : Object (Array, Function, RegExp) 등 기본형은 값을 그대로 할당하고 참조형은 값이 저장된 주소값을 할당(참조)한다. - 기본형 var a; a = 10; var b = 'abc';변수명 a b ... ... 주소 @313 @314 주소 ... 313 314 ... 데이터 10 'abc' - 참조형 var obj = { a: 1, b: 'b' }; var obj2 = obj; obj2.a = 10; // 같은주소를 참조하고 있는 obj.a 의 값도 바뀌게된다 변수명 obj ob..
Object.assign() Object를 할당하면 프로퍼티가 연동 됨 한 쪽의 프로퍼티 값을 바꾸면 다른 곳도 바뀜 연동되지 않게 하려면 별도 처리 필요 Object.assign()으로 복사, 연동 방지 Object.assign(target, ...sources) 객체 복제하기 var obj = { a: 1 }; var copy = Object.assign({}, obj); console.log(copy); // { a: 1 } 객체 병합하기 var o1 = { a: 1 }; var o2 = { b: 2 }; var o3 = { c: 3 }; var obj = Object.assign(o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 } console.log(o1); // { a: 1,..
형 변환 묵시적 형변환 // number to string var tmp = 100; tmp = tmp + ""; alert(typeof tmp);// string // string to number var tmp = "100"; tmp = tmp * 1; alert(typeof tmp);// number 명시적 형변환 Number(), String() // number to string var tmp = 100; alert(typeof tmp);// number tmp = String(tmp); alert(typeof tmp);// string // string to number var tmp = "100"; alert(typeof tmp);// string tmp = Number(tmp); alert(type..
렉시컬 환경(Lexical Environment) 렉시컬 환경 - 함수가 사용할 함수, 변수를 렉시컬 환경에 설정 - 함수가 구조적, 독립적 환경에서 실행하기 위한 메커니즘 제공 - 초기화 단계에서 해석한 - 모든 함수/변수를 {key:value} 형태로 저장 - 함수/변수 이름을 key에 설정하고 값을 value에 설정 - 따라서 함수/변수를 key로 식별할 수 있음 렉시컬 환경 구성 렉시컬 환경은 - function, with, try-catch에서 생성 렉시컬 환경 구성 형태 렉시컬 환경(LE) = { ... 환경 레코드(ER: Environment Record): {...}, ... 외부 렉시컬 환경 참조(OLER: Outer Lexical Environment Reference): {...} } - 환경 레코드에 함수 안의 함수, 변수 기록 -..

티스토리툴바