SlideShare a Scribd company logo
+
다시보는 JavaScript
reiphiel@gmail.com
이 문서는 아직 완성되지 않았습니다. 내용이
추가되거나 수정될 수 있으니 참고 레벨로만
사용하시기 바랍니다.
+
변수 유효범위(Scope)
 대부분의 메이저 언어는 중괄호 블럭구분자로 하여 블럭단위로
변수의 유효범위가 결정된다.
 Javascript는 변수가 선언된 함수블럭을 변수의 유효범위로
가지고 내부에 중첩된 중괄호는 함수의 유효범위에 영향을
미치지 않는다.
 함수 외부의 전역컨텍스트는 일종의 함수처럼 동작함으로서
위의 규칙을 만족시킨다.(windows객체)
 Javascript 1.7이상부터 let이라는 키워드로 변수 유효범위
블럭을 지정할 수 있다.
 Javascript에서 catch블럭은 예외적으로 블럭 구분자 단위의
변수 유효범위가 적용된다.
+
변수 호이스팅(hoisting)
 JavaScript에서 어떤 변수를 정의할때 변수의 선언부는
암묵적으로 변수의 유효범위(함수)의 최상단으로 끌어
올려지고(hoisting) 변수의 초기화 부분은 선언된 위치에 그대로
위치한다.
 변수를 동일한 유효범위내에서 재선언할 경우 하나의 변수처럼
처리된다.
 var키워드를 변수 정의시에 지정하지 않을 경우 전역
컨텍스트레벨까지 호이스팅 된다.
+
변수 호이스팅 생각해보기
function myFunc(myVar) {
console.log(myVar);
if (true){
var myVar = “Hello world”;
}
for(var i = 0; i < 10; ++i) {
some action……
}
for(var i = 0; i < 10; ++i) {
some action……
}
}
+
엄격모드(Strict mode)
 JavaScript 스펙5(ECMAScript 5)부터 엄격모드가 추가됨
 “use strict”라는 리터럴을 선언하는 것으로 해당 스코프에
엄격모드가 활성화된다.
 단순한 리터럴이므로 엄격모드의 스펙은 구현하지 않은
스크립트 엔진에서는 무시됨으로서 하위 호환성이 유지된다.
 엄격모드는 JavaScript미래에 표준으로 적용할 스펙이므로 새로
작성하는 스크립트 코드는 가급적 엄격모드에서 작성하는 것이
좋다.
+
컨텍스트(Context)
 함수가 호출될 경우 실행 컨텍스트가 생성되며 컨텍스트는
데이터 스코프, 함수 인자, this의 값등을 정의한다.
 this의 값이라함은 다른말로 실행 컨텍스트 객체라고 하며
객체가 생성될때 암묵적으로 할당된며 호출된 함수에서 사용할
수 있는 변수나 함수들의 참조가 포함되어있다.
 전역 컨텍스트의 함수가 호출되면 this에는 암묵적으로 전역
컨텍스트가 할당된다.(엄격모드에서는 할당이 제한됨)
 실행중인 컨텍스트에서 함수가 호출되면 컨텍스트가 일종의
스택으로 중첩되며 스코프 체인을 형성하게 된다.
+
함수 호출
 함수가 호출되면 암묵적으로 arguments, this가
정의된다.(일종의 매개변수)
 엄격모드에서는 arguments를 재정의 할 수 없다.
 앞에서 언급한대로 함수가 호출되면 실행 콘텍스트가 생성되며
함수로서 호출되면 전역 컨텍스트 객체가 this에 할당되며
메소드로서 호출되면 해당 객체의 컨텍스트 객체가 this에
할당된다.
 생성자로서 호출(new 키워드)될 경우 this에는 생성된 객체가
할당된다.
 함수의 apply, call메소드를 이용한 호출
+
익명함수
 Javascript에서는 익명함수를 정의 할 수 있다.(익명이므로
호출할 수 없다.)
 변수에 익명함수를 할당함으로서 익명함수를 호출할 수 있다.
var myfunc = function() {})();
 익명함수를 선언과 동시에 실행할 수 있는데 이것을 자기 실행
익명함수라고 하며 이경우에는 변수에 할당하지 않아도 호출이
가능하다.
(function() {})();
+
암묵적인 형변환
 JavaScript에는 변수를 정의할 때 명시적으로 형을 지정하지
않는다.
 변수가 피연산자로서 사용되기 전에는 항상 새로 평가되어지며
스펙에 정의된 프로토콜에 따라 암묵적인 형변환이 일어난다.
 비교연산시에도 암묵적인 형변환이 발생하므로 ===연산자를
적극적으로 활용하여 암묵적인 형변환에 대비하자.
 객체의 경우 toString이나 valueOf메소드가 호출되어 형변환이
일어난다.
 if문이나 boolean값과의 비교등등 에서 boolean으로도 형변환이
일어나므로 주의하도록 하자.
끄~읕

More Related Content

PPTX
C++ struct copy
PDF
Scala syntax function
PPTX
Scala nested function generic function
PDF
Scala type args
PDF
Scala namespace scope
PDF
Scala variable
PDF
Design by contract(계약에의한설계)
PDF
Scala implicit
C++ struct copy
Scala syntax function
Scala nested function generic function
Scala type args
Scala namespace scope
Scala variable
Design by contract(계약에의한설계)
Scala implicit

What's hot (17)

PDF
Scala match pattern
PDF
Scala block expression
PPTX
Javascript closure 2차과제 이승찬
PDF
PDF
스칼라 클래스 이해하기 _Scala class understanding
PDF
Scala type class pattern
PDF
Scala companion object
PPTX
Scala trait usage
PDF
Scala self type inheritance
PDF
Effective unit testing - 좋은테스트 요약
PDF
[Swift] Generics
PDF
Scala dir processing
PPT
Chap10.Making Method Calls Simpler
PDF
Objective-C Runtime Programming Guide
PDF
Effective unit testing ch3. 테스트더블
PDF
[Swift] State
PDF
Start IoT with JavaScript - 3.제어
Scala match pattern
Scala block expression
Javascript closure 2차과제 이승찬
스칼라 클래스 이해하기 _Scala class understanding
Scala type class pattern
Scala companion object
Scala trait usage
Scala self type inheritance
Effective unit testing - 좋은테스트 요약
[Swift] Generics
Scala dir processing
Chap10.Making Method Calls Simpler
Objective-C Runtime Programming Guide
Effective unit testing ch3. 테스트더블
[Swift] State
Start IoT with JavaScript - 3.제어
Ad

Viewers also liked (9)

DOCX
Materials list ith
PDF
JavaScript closure & scope
PPTX
JavaScript defer & async
PPTX
Jquery javascript_ed10
PDF
Javascript Closure
PDF
Javascript 교육자료 pdf
PDF
[152] 웹브라우저 감옥에서 살아남기
PDF
프론트엔드로 시작하는 웹 개발 방법과 지식들
PDF
Front-end Development Process - 어디까지 개선할 수 있나
Materials list ith
JavaScript closure & scope
JavaScript defer & async
Jquery javascript_ed10
Javascript Closure
Javascript 교육자료 pdf
[152] 웹브라우저 감옥에서 살아남기
프론트엔드로 시작하는 웹 개발 방법과 지식들
Front-end Development Process - 어디까지 개선할 수 있나
Ad

Similar to JavaScript Fundermetal (20)

PPTX
Python 이해하기 20160815
PPTX
Javascript
PDF
Start IoT with JavaScript - 6.함수
PPT
호이스팅, 클로저, IIFE
PDF
Javascript - Function
PPTX
0.javascript기본(~3일차내)
PPTX
파이썬 기초
PPTX
자바스크립트 함수
DOCX
Javascript 완벽 가이드 정리
PDF
실행 컨텍스트 JS(Kitworks Team Study 김동현 발표자료)
PPTX
파이썬+주요+용어+정리 20160304
PPTX
4-1. javascript
PDF
Java(1/4)
PPTX
PHP 7의 새로운 특징과 기능 요약
PDF
[SwiftStudy 2016] 3장. 함수
PDF
Java class
PDF
Java_05 class
PPTX
[HaU] 신입 기술 면접 준비 java
PPTX
파이썬 함수 이해하기
PPTX
[2011 04 30]python-3장
Python 이해하기 20160815
Javascript
Start IoT with JavaScript - 6.함수
호이스팅, 클로저, IIFE
Javascript - Function
0.javascript기본(~3일차내)
파이썬 기초
자바스크립트 함수
Javascript 완벽 가이드 정리
실행 컨텍스트 JS(Kitworks Team Study 김동현 발표자료)
파이썬+주요+용어+정리 20160304
4-1. javascript
Java(1/4)
PHP 7의 새로운 특징과 기능 요약
[SwiftStudy 2016] 3장. 함수
Java class
Java_05 class
[HaU] 신입 기술 면접 준비 java
파이썬 함수 이해하기
[2011 04 30]python-3장

JavaScript Fundermetal

  • 1. + 다시보는 JavaScript reiphiel@gmail.com 이 문서는 아직 완성되지 않았습니다. 내용이 추가되거나 수정될 수 있으니 참고 레벨로만 사용하시기 바랍니다.
  • 2. + 변수 유효범위(Scope)  대부분의 메이저 언어는 중괄호 블럭구분자로 하여 블럭단위로 변수의 유효범위가 결정된다.  Javascript는 변수가 선언된 함수블럭을 변수의 유효범위로 가지고 내부에 중첩된 중괄호는 함수의 유효범위에 영향을 미치지 않는다.  함수 외부의 전역컨텍스트는 일종의 함수처럼 동작함으로서 위의 규칙을 만족시킨다.(windows객체)  Javascript 1.7이상부터 let이라는 키워드로 변수 유효범위 블럭을 지정할 수 있다.  Javascript에서 catch블럭은 예외적으로 블럭 구분자 단위의 변수 유효범위가 적용된다.
  • 3. + 변수 호이스팅(hoisting)  JavaScript에서 어떤 변수를 정의할때 변수의 선언부는 암묵적으로 변수의 유효범위(함수)의 최상단으로 끌어 올려지고(hoisting) 변수의 초기화 부분은 선언된 위치에 그대로 위치한다.  변수를 동일한 유효범위내에서 재선언할 경우 하나의 변수처럼 처리된다.  var키워드를 변수 정의시에 지정하지 않을 경우 전역 컨텍스트레벨까지 호이스팅 된다.
  • 4. + 변수 호이스팅 생각해보기 function myFunc(myVar) { console.log(myVar); if (true){ var myVar = “Hello world”; } for(var i = 0; i < 10; ++i) { some action…… } for(var i = 0; i < 10; ++i) { some action…… } }
  • 5. + 엄격모드(Strict mode)  JavaScript 스펙5(ECMAScript 5)부터 엄격모드가 추가됨  “use strict”라는 리터럴을 선언하는 것으로 해당 스코프에 엄격모드가 활성화된다.  단순한 리터럴이므로 엄격모드의 스펙은 구현하지 않은 스크립트 엔진에서는 무시됨으로서 하위 호환성이 유지된다.  엄격모드는 JavaScript미래에 표준으로 적용할 스펙이므로 새로 작성하는 스크립트 코드는 가급적 엄격모드에서 작성하는 것이 좋다.
  • 6. + 컨텍스트(Context)  함수가 호출될 경우 실행 컨텍스트가 생성되며 컨텍스트는 데이터 스코프, 함수 인자, this의 값등을 정의한다.  this의 값이라함은 다른말로 실행 컨텍스트 객체라고 하며 객체가 생성될때 암묵적으로 할당된며 호출된 함수에서 사용할 수 있는 변수나 함수들의 참조가 포함되어있다.  전역 컨텍스트의 함수가 호출되면 this에는 암묵적으로 전역 컨텍스트가 할당된다.(엄격모드에서는 할당이 제한됨)  실행중인 컨텍스트에서 함수가 호출되면 컨텍스트가 일종의 스택으로 중첩되며 스코프 체인을 형성하게 된다.
  • 7. + 함수 호출  함수가 호출되면 암묵적으로 arguments, this가 정의된다.(일종의 매개변수)  엄격모드에서는 arguments를 재정의 할 수 없다.  앞에서 언급한대로 함수가 호출되면 실행 콘텍스트가 생성되며 함수로서 호출되면 전역 컨텍스트 객체가 this에 할당되며 메소드로서 호출되면 해당 객체의 컨텍스트 객체가 this에 할당된다.  생성자로서 호출(new 키워드)될 경우 this에는 생성된 객체가 할당된다.  함수의 apply, call메소드를 이용한 호출
  • 8. + 익명함수  Javascript에서는 익명함수를 정의 할 수 있다.(익명이므로 호출할 수 없다.)  변수에 익명함수를 할당함으로서 익명함수를 호출할 수 있다. var myfunc = function() {})();  익명함수를 선언과 동시에 실행할 수 있는데 이것을 자기 실행 익명함수라고 하며 이경우에는 변수에 할당하지 않아도 호출이 가능하다. (function() {})();
  • 9. + 암묵적인 형변환  JavaScript에는 변수를 정의할 때 명시적으로 형을 지정하지 않는다.  변수가 피연산자로서 사용되기 전에는 항상 새로 평가되어지며 스펙에 정의된 프로토콜에 따라 암묵적인 형변환이 일어난다.  비교연산시에도 암묵적인 형변환이 발생하므로 ===연산자를 적극적으로 활용하여 암묵적인 형변환에 대비하자.  객체의 경우 toString이나 valueOf메소드가 호출되어 형변환이 일어난다.  if문이나 boolean값과의 비교등등 에서 boolean으로도 형변환이 일어나므로 주의하도록 하자.