스파르탄Js in sidejs5

2016 자바카페 스파르탄 스터디
INSIDE Java Script 5
JAVACAFE
박진현

2016 자바카페 스파르탄 스터디들어가기 앞서..
 본 슬라이드는 2016 자바카페 스파르탄 스터디를 위해
제작되었습니다.
 본 슬라이드의 대부분의 내용은
인사이드 자바스크립트
(2014 송형주, 고현준) 의
내용을 참고하였습니다.

2016 자바카페 스파르탄 스터디목 차
 실행컨텍스트의 개념
 활성 객체(Activation object) 와 변수 객체(Variable Object)
 스코프 체인
 클로저

2016 자바카페 스파르탄 스터디실행 컨텍스트 개념
 콜스택의 실행정보 한개와 동일
 실행 가능한 코드를 형상화하고
구분하는 추상적인 개념
 Global code
 Eval code
 Function code
 자신의 실행컨텍스트와 관련없는 코
드가 실행되면 새로운 실행컨텍스트
가 생기고 제어권이 해당컨텍스트로
이동
h1 h1
h2
h1
h2
h3

2016 자바카페 스파르탄 스터디실행컨텍스트 생성 과정
 활성 객체
 해당 컨텍스트 실행에 필요한 여러가지 정보를 담을객체
 매개변수
 사용자 정의 변수 및 객체
 사용자 접근 X, 엔진 접근용
 arguments 객체 생성
 스코프 정보 생성
 현재 컨텍스트의 유효범위를 나타냄
 현재 컨텍스트의 변수 및 상위 실행 컨텍스트의 변수도
접근 가능
 연결리스트(Linked List)와 유사함

2016 자바카페 스파르탄 스터디실행컨텍스트 생성 과정
 코드 생성
 변수에 값이 할당됨
 전역실행 컨텍스트
 arguments 가 없음(뭘 넘겨야 받지!)
 변수객체 == 전역 객체
 브라우저 : 최상위 코드 == 전역코드
 Node.js : 파일단위 모듈화
 var a = 10; //모듈 지역변수
 b = 10; //전역변수
 오—염이 되기떄문에 왠만하면 var를..

2016 자바카페 스파르탄 스터디스코프 체인
 자바스크립트도 언어야! == 스코프(유효범위)가 있음
 오직 함수만이 유효범위의 한단위 : for,{},if문은 유효범위 X
 변수와 함수의 유효범위를 나타내는 것 == 스코프체인
 각각의 함수는 [[scope]]로 자신이 생성된 실행컨텍스트의
스코프 체인을 참조
 함수가 실행되는 순간 만들어짐
 현재 실행되는 함수의 [[scope]]를 기반으로
새로운 스코프 체인을 만듬
 전역 실행 컨텍스트
 최상위 실행객체
 [[scope]] == 나 자신

2016 자바카페 스파르탄 스터디스코프 체인
 코드..코드를 보자!
 함수 객체가 처음생성될 당시
실행 컨텍스트에 따라감
 사실 앞에 말이랑 좀 햇갈림
 함수가 중복함수일때 내부함수가
상위 함수의 스코프체인을 이어감
 with 구문
 스코프 체인을 강제함
 왠만하면 쓰지마세양!
var v = "v1";
function pF(){
var v = "v2";
function pV(){
return v;
}
console.log(pV());
}
pF();
var v = "v1";
function pF(){
var v = "v2";
console.log(pV());
}
function pV(){
return v;
}
pF();

2016 자바카페 스파르탄 스터디클로저
 이미 생명주기가 끝난 외부함수의 변수를 참조하는 함수
 클로저에서 참조되는 변수를 자유변수라 함
 함수형 언어에서 주요하게 사용되는 특성
 코드..코드를 보자!
 add5가 초기화된 시점에서 사실 mA 함수는 실행 끝
 하지만 내부적으로 넘어간 x의 값이 계속 참조
 심지어 읽기 쓰기도 됨! (우와! 정말 대단해!!)

2016 자바카페 스파르탄 스터디클로저 활용
 특정함수에 사용자가 정의한 객체의 메서드 연결
 정해진 형식의 함수를 콜백해주는 라이브러리에
형식이 다른 사용자 정의 함수를 호출할때 유용히 사용됨
 함수의 캡슐화
 글로벌 객체기에 외부에 노출되어 있음(맘대로 변경가능)
 클로저를 이용 밖에서 더 이상 변경이 불가능하게 바꿀수 있음
 setTimeout 사용자 함수 지정
 함수의 인자값을 넘길수 있음
 코드로 하나씩 확인해 보아요

스파르탄Js in sidejs5

More Related Content

What's hot (20)

Viewers also liked (13)

Similar to 스파르탄Js in sidejs5 (20)

스파르탄Js in sidejs5