목록 45

[You don't know JS] Part2 - 부록b. 스코프와 렉시컬 this

부록 B.1 동적 스코프 렉시컬 스코프는 엔진이 변수를 찾는 검색 방식과 위치에 대한 규칙이다. 개발자가 코드를 짤때 스코프가 결정된다. (eval, with 사용 없다는 가정 하에...) 동적 스코프는 런타임때 동적으로 결정하는 모델이다. function foo() { console.log(a); // 2 } function bar() { var a = 3; foo(); } var a = 2; bar(); javascript는 렉시컬스코프이기 때문에 foo에서 a는 RHS 참조를 했을때 렉시컬 스코프를 이용해 2를 가져온다. 동적 스코프는 콜스텍을 거슬러 올라가면서 찾기때문에 bar에 있는 3을참조한다. 차이점은 다음과 같다. 렉시컬 스코프는 코드 작성시에, 동적 스코프는 실행중 결정된다. 렉시컬 스코..

개발/Javascript 2020.09.06

[You don't know JS] Part2 - 부록a. 다양한 환경의 자바스크립트

실제 서비스 환경에서 실행되는 자바스크립트 코드는 예상과 다르게 동작할 수 있다. 거의 항상 호스팅 환경의 콘텍스트에서 실행되기 때문인데, 다른 코드와 함께 실행하거나, 다른 유형의 엔진에서 실행되었을때 발생한다. 부록 A.1 ECMAScript 자바스크립트의 공식 명칭은 ECMAScript 이다. 브라우저환경이 아닌 node.js 나 Rhino 등의 환경에선 다음을 주의하자 0123와 같은 8진수 리터럴은 느슨한 모드에서 사용할 수 있다. window.escape() / window.unescape()를 이용하여 문자열 % 로 구분된 16진수 이스케이프 시퀀스 역변환이 가능하다. String.prototype.substr은 String.prototype.substring 과 유사하지만 두번째 인자에 인..

개발/Javascript 2020.09.06

[You don't know JS] Part2 - 5장.

스코트 클로저 요약 클로저란 함수가 속한 렉시컬 스코프를 기억하며 함수가 렉시컬 스코프 밖에서 실행될 때에도 이 스코프에 접근할 수 있게 하는 기능을 뜻함 5.1 깨달음 ... 5.2 핵심 클로저 예제1 function foo() { var a = 2; function bar() { console.log(a); } bar(); } foo(); 위 예제는 단순 렉시컬 스코프 규칙에 따라 RHS 참조를 통해 a를 불러와 출력해줄 뿐이다. 클로저의 규칙중 일부이므로 클로저라고 할 순 있다. bar() 는 foo() 스코프에 대한 클로저를 가진다. 스코프가 bar는 foo안에 중첩되어 있기 때문 클로저 예제2 function foo() { var a = 2; function bar() { console.log(..

개발/Javascript 2020.09.06

[You don't know JS] Part2 - 4장. 호이스팅

호이스팅 선언문이 스코프의 어디에 있는지에 따라 스코프에 변수가 추가되는 과정의 차이가 있다. 4.1 닭이 먼저냐 달걀이 먼저냐 Javascript 코드가 위에서부터 한줄한줄 실행되지 않는다. 코드 예제 1 a = 2; var a; console.log(a); // 2 원본 코드 var a; a = 2; console.log(a); // 2 컴파일 결과 코드 예제 2 console.log(a); // undefined var a = 2; 원본 코드 var a; console.log(a); a = 2; 컴파일 결과 위 두가지 예제를 이해 했는가? 4.2 컴파일러는 두번 공격한다. 컴파일 과정에서 선언문을 찾아 적절한 스코프와 연결한다. 렉시컬 스코프의 핵심이다. var a = 2;는 사실 아래 두개로 나뉜..

개발/Javascript 2020.09.06

[You don't know JS] Part2 - 2장. 함수 vs 블록 스코프

변수나 함수는 규칙에 맞게 스코프에 포함되게 된다. 스코프의 종류는 2가지인데, 각각 함수 기반 스코프와 블록 기반 스코프이다. 각각을 알아보자 3.1 함수 기반 스코프 일반적으로 javascript 는 대부분 함수 기반의 스코프를 따른다. function foo(a) { var b = 2; function bar() { // do something...; } var c = 3; } 3.2 일반 스코프에 숨기 3.2.1 충돌 회피 function foo() { function bar(a) { i = 3; console.log(a + i) } for (var i = 0; i < 10; i++) { bar(i * 2); } } foo(); 글로벌 네임스페이스 모듈 관리 3.3 스코프 역할을 하는 함수 3.4..

개발/Javascript 2020.09.06

[You don't know JS] Part2 - 2장. 렉시컬 스코프

스코프의 동작 방식에 따라 두가지로 나뉜다. 렉시컬 스코프 동적 스코프 렉시컬 스코프는 일반적으로 많은 프로그래밍 언어들이 사용하고 있음 동적 스코프는 Bash Scripting 이나 Perl의 일부 모드에서 지원함 function foo() { console.log(a); } function bar = { var a = 3; foo(); } var a = 2; bar(); // 레시컬인 경우: 2, 동적 스코프인 경우 3; 2.1 렉스타임 렉싱: 컴파일러의 첫 단계로, 토크나이징을 한다. 소스코드 문자열을 분석해 상태 유지 파싱의 결과로 생성된 토큰에 의미를 부여 렉시컬 스코프는 개발자가 코드를 짤 때 변수와 스코프 블록을 어디서 작성하는거에 따라서 렉서가 코드를 처리할 떄 확정됨. function f..

개발/Javascript 2020.09.06

[You don't know JS] Part2 - 1장. 스코프란 무엇인가

Ch1. 스코프란 무엇인가 프로그램의 기본 페러다임중 하나는 어떻게 변수를 저장하는지, 어떻게 저장된 값을 불러오는지 이다. 이런 기능은 프로그램에 상태를 부여하게 되고, 다양한 작업을 가능하게 해준다. 스코프란 어떻게 변수를 생성하는지, 그리고 어떻게 변수값을 불러오는지 정한 규칙이다. 1.1 컴파일러 이론 자바스크립트는 인터프리터 언어이다. 하지만 컴파일 과정을 수행한다. 실제 코드를 수행하기전에 3단계를 거치는 컴파일레이션을 한다 다른 언어와 다르게 자바스크립트의 컴파일 과정은 시간이 매우 짧다. 따라서 최적화 하는데 소요되는 시간도 짧게때문에 엄청난 최적화가 이루어지진 못한다. 이를 극복하기 위해서 엔진은 Lazy Compile 이나 hot recompile 같은 JITs를 사용한다. 1. Tok..

개발/Javascript 2020.09.06

[You don't know JS] Part1 - 5장. 문법

Ch5. 문법 자바스크립트에는 혼란과 오해를 살만한 많은 트릭과 묘수로 가득차있다. 어떤것들이 있는지 살펴보고 올바르게 코드를 짤 수 있도록 하자. 5.1 문(Statement) 과 표현식(expression) Statement와 expression이 비슷해 보인다면 주의하자. 이 둘은 완전 다르다. 1 --- var a = 3 * 6; 2 --- var b = a; 3 --- b; 위의 코드에서 expression은 다음과 같다. 3 * 6 b = a b 마찬가지로 statement 는 다음과 같다. var a = 3 * 6; ⇒ 선언문 var b = a; ⇒ 할당문 b; ⇒ 표현식 문 그래서 문장과 표현식의 정확한 정의란 무엇인가? a && b 에서 b는 문장인가 표현식인가? foo(1, 2); 는 ..

개발/Javascript 2020.09.06

[You don't know JS] Part1 - 4장. 강제변환

Ch4. 강제변환 4.1 값 변환 타입 케스팅 값이 다른 타입의 값으로 바뀔 때 명시적이면 타입 케스팅 코드에서 의도적으로 타입을 변화시킨 것 강제 변환 값이 다른 타입의 값으로 바뀔 때 암시적이면 강제 현 환 다른 작업 도중 불분명한 사이드 이펙트로 생긴것 var a = 42; var b = a + ""; // 암시적 var c = String(a); // 명시적 위 코드로 암시적과 명시적은 어느정도 이해가 되었을 것이고, 문제는 어떻게 동작하느냐 인데, 다음을 보자 동작에 대한 내용은 안나오는듯...? 모지;; 찾아야되나 Javascript에선 강제변환을 하면 Number, String, Boolean 같은 원시값중 하나가 되며, 함수나 객체는 변환될 일이 없다. 박싱은 원시값을 해당 객체로 감싼건데..

개발/Javascript 2020.09.06