본문 바로가기

Javascript

(20)
[JavaScript] ECMAScript 자바스크립트 프로그램은 거의 항상 호스팅 환경의 콘텍스트에서 실행되므로 예측하기 어려운 부분이 어느정도 있다. 예를 들어, 작성한 코드를 다른 소스 코드와 함께 실행하거나, (브라우저 이외의) 다른 유형의 자바스크립트 엔진에서 실행하면 예상과 다르게 작동할 수 있다. 이번 내용은 이 문제를 간략하게 다루고자 한다. ECMAScript 자바스크립트의 공식적인 언어 명칭이 ECMAScript(ECMA는 표준 관리 주체 기관을 뜻함)라는 사실은 잘 알려져 있지 않다. 자바스크립트는 ECMAScript 언어의 상품명으로 통용되며, 더 정확하게는 명세의 브라우저 구현체이다. (필자도 이번에 알았다..=.=) 아래의 내용은 주요 호환성 차이를 열거한 내용이다. * 0123(10진수의 83)와 같은 8진수 리터럴은 ..
[JavaScript] 모듈, module 일반적으로 자바스크립트의 패턴을 모아둔 것을 모듈(module)이라고 부른다. 가장 흔한 모듈 패턴 구현 방법은 모듈 노출(Revealing Module)이고, 아래의 예시는 이것의 변형이다. 예시 ) function module() { var something = "cool"; var another = [1, 2, 3]; function doSomething() { console.log(something); } function doAnoter() { console.log(another.join(" | ")); } return { doSomething: doSomething, doAnother: doAnoter }; } var test = module(); test.doSomething(); // coo..
[JavaScript] 스코프 클로저, Scope Closure 클로저는 새롭게 문법과 패턴을 배워야할 특별한 도구가 아닌 그저 인식하고 받아들이면된다. 이는 자바스크립트의 모든 곳에 존재하며, 렉시컬 스코프에 의존해 코드를 작성한 결과로 그냥 발생한다. 그러므로 이 글을 통해 클로저의 전반을 파악하고, 목적에 따라 확인하고 받아들이고, 이용할 수 있도록 작성할 것이다. 예시 ) function test1() { var a = 2; function test2() { console.log(a); // 2 } test2(); } test1(); 위 예시와 같이 test2()는 렉시컬 스코프 검색 규칙(RHS 참조 검색)을 통해 바깥 스코프의 변수 a에 접근할 수 있다. 즉, test2()는 test1() 스코프에 대한 클로저를 가진다. 달리 말하면 test2()는 tes..
[JavaScript] 호이스팅, Hoisting 하나의 스코프 안에서 선언된 변수는 바로 그 스코프에 속하고 마찬가지로 하나의 블록 안에서 선언된 변수는 바로 그 블록에 속하게 된다. 하지만, 선언문이 스코프의 어디에 있는지에 따라 스코프에 변수가 추가되는 과정이 미묘한 차이가 있다. 예시 ) /* * 스코프 위에 선언된 변수인 경우 */ a = 2; var a; console.log(a); // 2 /* * 스코프 아래에 선언된 변수인 경우 */ console.log(b); // undefined var b = 2; 위의 예시를 설명하기에 앞서 자바스크립트 컴파일러를 돌아볼 필요가 있다. 자바스크립트 엔진이 코드를 인터프리팅하기 전에 컴파일 한다는 사실을 기억해보자. 컴파일레이션 단계 중에는 모든 선언문을 찾아 적절한 스코프에 연결해주는 과정이 있었..
[JavaScript] 함수/블록 기반 스코프 함수 기반 스코프 function test(a) { var b = 2; function sub() {...} var c = 3; } sub(); // fail console.log(a, b, c); // fail 선언문이 스코프의 어디에 있는지는 중요하지 않다. 스코프 안에 있는 모든 변수와 함수는 그 스코프 버블에 속한다. a, b, c, sub 모두 test()의 스코프 버블에 속하므로 test() 바깥에서는 이들에게 접근할 수 없다. 따라서 호출된 확인자가 글로벌 스코프에는 없기 때문에 ReferenceError 오류를 발생시킨다. 함수 스코프는 모든 변수가 함수에 속하고함수 전체에 걸쳐 사용되며 재사용 된다. 일반 스코프에 숨기 1 ) 함수를 선언하고 그안에 코드를 넣는다. 2 ) 작성한 코드에서..
[JavaScript] 렉시컬 스코프, Lexical Scope / 동적 스코프, Dynamic Scope ⌗ 스코프, Scope 특정 상소에 변수를 저장하고 나중에 그 변수를 찾는데는 잘 정의된 규칙이 필요하는데 이를 스코프(Scope)라고 한다. 변수를 검색하는 이유는 변수에 값을 대입(LHS 참조)하거나 변수의 값을 얻어오기(RHS 참조) 위해서다. 스코프는 두가지 방식으로 작동하는데, 1 ) 렉시컬 스코프, Lexical Scope : 다른 방식보다 훨씬 더 일반적이고 다수의 프로그래밍 언어가 사용하는 방식 2 ) 동적 스코프, Dynamic Scope : Bash Scripting이나 Perl 의 일부 모드와 같은 몇몇 언어에서 사용하는 방식 렉시컬 스코프, Lexical Scope 일반적인 언어의 컴파일러는 첫 단계로 토크나이징 또는 렉싱이라 불리는 작업을 시작하여, 렉싱 처리 과정에서 소스 코드 ..
[JavaScript] 스코프, Scope ⌗ 스코프, Scope 특정 상소에 변수를 저장하고 나중에 그 변수를 찾는데는 잘 정의된 규칙이 필요하는데 이를 스코프(Scope)라고 한다. 변수를 검색하는 이유는 변수에 값을 대입(LHS 참조)하거나 변수의 값을 얻어오기(RHS 참조) 위해서다. 자바스크립트는 일반적으로 '동적' 또는 '인터프리터' 언어로 분류하나, 사실은 '컴파일러 언어'다. 물론 자바스크립트가 전통적인 많은 컴파일러 언어처럼 코드를 미리 컴파일하거나, 컴파일한 결과를 분산 시스템에서 이용할 수 있는 것은 아니다. 전통적인 컴파일러 언어의 처리과정에서는 프로그램을 이루는 소스 코드가 실행되기 전에 보통 3단계를 거치는데, 이를 '컴파일레이션, Compilation'이라고 한다. 1 ) 토크나이징, Tokenizing / 렉싱, Le..
[JavaScript] 연산자 우선순위 연산자를 하나만 사용하는 경우도 있지만 여러가지를 복합적으로 사용하게 되는 경우도 발생한다. 따라서 연산자에도 우선 순위를 매겨 연산자의 실행 순서를 결정하고, 우선 순위가 높은 연산자가 먼저 실행된다. 특히, 우결합성이 있는 조건 연산자( ? : )와 우선순위가 헷갈리는 논리 AND, OR 연산자( &&, || )는 주의하여 사용하자. 공식 문서에 나와있는 연산자 우선 순위는 다음과 같고, 이를 전부 외울 수는 없다. 일반적으로 사람이 논리적으로 생각하는 방식 대로 우선 순위가 매겨져 있으나, 애매한 경우에는 괄호를 사용하여 해결하면 된다. 우선 순위 연산자 유형 결합성 연산자 21 그룹 없음 ( … ) 20 멤버 접근 좌결합성 … . … 계산된 멤버 접근 좌결합성 … [ … ] new (매개변수 리스..

❥ CHATI Github