'Javascript'에 해당되는 글 49건

자바스크립트 실행문맥 (Execution context)

1. 정의

- 자바스크립트 코드 블럭이 실행되는 환경

1) 전역코드(global code)  :  가장 기본적인 환경으로 소스 코드가 처음으로 실행될 때

2) 함수코드(function code) :  처리 흐름이 함수 바디 안으로 들어갈 때(호출될때)

3) eval() 코드(Eval code) : eval() 안에서 실행 될 때

- 세 가지 환경 중에 무조건 하나가 실행 컨텍스트가 되는 것이다.

- 대부분은 함수 코드를 이용한다

- 함수가 호출되면 하나의 실행문맥(실행환경)이 생성된다. 그리고 이 실행 문맥은 실행문맥 스택(Execution Context stack)에 쌓인다

- 실행 문맥(실행환경) 안에는 변수, 함수, 객체 등이 존재한다

- 문제 : 내부함수에서 외부 함수 변수에 접근하면 오류가 없지만, 밖에 있는 함수가 안에 정의한 함수의 변수에 접근하면 어떻게 될까?

var name = 'Hee'; function simple(){ var car = 'Audi'; function demo1(){ var nickName = 'kyle'; console.log(car); } demo1(); console.log(nickName); } simple();

- 실행결과: nickName is not defined(…)

2. Execution Context stack(실행 컨텍스트 스택)

- 브라우저안의 자바스크립트 번역기(interpreter)는 싱글 스레드 환경으로 실행된다. 이 말은 무슨일이 든지 하나씩 처리 된다는 뜻이다

- 그렇기 때문에 스택 구조를 이용하여 실행 컨텍스트가 생성된다.

var name = 'Hee'; function simple(){ var car = 'Audi'; demo1(); function demo1(){ console.log(car); demo2(); } function demo2(){ console.log(name); } } simple();

- 위 소스는 이렇게 스택으로 쌓이게 되고 위에서 부터 실행된다

- 또한 실행 문맥 중 다른 함수(문맥과 상관없는)가 호출되면, 새로운 실행 문맥이 생성되어 쌓이고 이전 문맥의 제어권은 모두 새로운 문맥으로 이전된다. 그렇므로 내부함수가 외부 함수의 변수접근은 가능하지만 외부 함수는 내부 함수의 변수의 접근 할 수 없는 것이다 

3. 실행문맥 생성 과정

- 실행문맥(Exection context)은 두 과정으로 나뉜다

a. 생성과정(creation Stage) - 활성객체 생성

- Scope chain을 만든다

- 변수, 함수, 매개변수(arguments) 를 만든다

- 'this'를 결정한다

b. 코드실행과정(Activation/ Code Execution Stage)

- 변수를 할당한다

- 함수와 실행 코드를 참조한다

1). 실행문맥 생성 과정

a. 함수를 실행할 코드를 찾는다

b. 함수를 실행하기전에 실행문맥(execution context)를 만든다

c. 생성과정(creation stage)를 시작한다 -  활성객체(activation object)

1. Scope chain을 초기화 한다

2. 변수 객체을 만든다

- arguments 객체를 생성한다. 파라미터들을 확인과 이름과 값을 초기화하고 참초 값들을 복사한다

- 문맥의 정의된 함수를 검색

- variable object(변수객체)안에 함수의 이름과 같은 프로퍼티를 만든다

- 만약 함수 이름이 이미 존재한다면 덮어 씌운다

- 문맥의 정의된 변수 검색

- variable object(변수객체)안에 변수이름과 같은 프로퍼티를 생성하고 undefined 로 초기화한다

- 만약 변수명이 이미 존재한다면 아무 것도 안하고 그냥 검색을 마저 진행한다

3. 문맥안에 'this' 값을 결정한다

d. 코드 실행과정(Activation/ Code Execution Stage) 실행

     1. 줄 마다 문맥안의 함수 코드를 실행하고 변수의 값을 할당한다

4. 호이스팅(hoisting)의 원리

  function simple(){ console.log(name); //undefined console.log(car); //undefined var name='Hee'; var car = function(){ return 'Boo'; } }

1) 어떻게 name 변수가 선언 되기 전에 접근할 수 있는가?

- 생성과정(creation stage) 에서 변수를 undefined로 초기화 한다. 그렇기 때문에 에러 없이 undefined를 반환

- name은 이미  활성객체(activation object)에서 선언되어 있다

2) car 변수가 undefined인 이유?

-  car 안에는 함수이지만 변수로 선언되어 있다. 변수는 생성과정(creation stage)에서 선언된다

  function simple(){ console.log(name); //name show the function, not undefined var name='Hee'; function name(){ return 'Tom'; } }

1) name은 두번 선언되었다. name을 출력하면 undefined이 아니라 함수를 출력하는 이유는?

- 생성과정(creation stage) 에서 보면 함수가 활성객체(activation object)먼저 생성되고 이후에 변수가 생성된다. 그리고 프로퍼티이름이 이미 존재 한다면 선언을 통과한다

- 그러므로 위에서 name()를 먼저 선언하고 변수를 선언하는데 name 이름이 이미 있으므로 그냥 통과한다

자바스크립트 기본 함수 정의

1. 기본 정의 방법

- function 명령어

- Function 생성자

- 함수 리터럴

2. Function 생성자는 사용하지 않는다

//function function simple(deme){ return demo; } //Function 생성자 var simple= new Function('demo', 'return demo;'); //리터럴 var simple = function(demo){ return demo; }

- Function 생성자를 이용하면 본체를 문자열로 지정한다. 이것은 동적으로 함수의 내용을 변경 할 수 있다는 것을 의미한다

- 하지만 동적으로 변경하면 코드 해석시 실행 속도의 저하가 된다. 무엇보다 보안에 취약하다

- Function 생성자는 항상 전역 변수를 참조한다

var scope = "global"; function demo(){ var scope = "local"; var conFc = new Function('return scope;'); console.log(conFc); } demo();  

- 실행결과 : global

namespace(네임스페이스)

1. 정의

- A namespace is a container which allows developers to bundle up functionality under a unique, application-specific name. In JavaScript a namespace is just another object containing methods, properties, and objects.

- 구분 가능한 영역

- 자바의 package 와 같다

- 자바스크립트에서는  namespace 와같은 기능을 제공하지 않는다. 그렇기 때문에 object를 이용하여 namespace를 만든다

2. 사용

1) namespace(네임스페이스)의 필요성

var a = 10; var a = function(){ return 3; } console.log(a());

- 실행결과 : 3

- 의도 하지 않게 a의 변수에 함수가 담기면서 값이 3으로 변했다

- 전역 변수를 무분별 하게 사용 함으로서 변수 명과 함수명 혹은 변수명 사이에 중복이 발생한다

- 이걸 방지 하고자 namespace를 사용한다

2) namespace 사용법

- 전역 객체 선언

//1 var myApp = myApp || {}; //2 if(typeof myApp === "undefined"){ var myApp = {}; }  

- 1, 2 번의 결과는 동일하게 myApp 이라는 object를 생성한다

- 위와 같이 선언함으로서 namespace 선언의 중복을 방지 할 수 있다

- sub_namespace

//1 var myApp = myApp || {}; //sub_namespace myApp.sub = { }  

- 자바스크립트의 특성을 이용하여 sub_namespace 도 가능하다

- 자바의 package안에 폴더를 구성하는 것과 같다

- 구현

//1 var myApp = myApp || {}; //sub_namespace myApp.person = { name:'kyle', phone : '11111' }; myApp.car = function(){ console.log('BMW'); }; //sub_namespace myApp.nation={}; myApp.nation.korea = { seoul : '02', kyungki : '031', sms : function(){ console.log('sms'); } }; console.log(myApp.person.name); myApp.car(); console.log(myApp.nation.korea.seoul);  

- 실행결과 : kyle, BMW, 02

- 문제점:  객체생성( sub_namespace)하고 오브젝트를 채워 넣을 때마다 위에 먼저 선언해야 한다는 문제가 있다. 이는 소스 코드를 어지럽힐 수 있다 

3) 지저분한  namespace 선언 해결

function nameFun (ns) { var sections = ns.split('.'), temp = sections[0]; window[temp] = window[temp] || {}; var parent = window[temp]; for (var i=1; i<sections.length; i++) { if (typeof parent[sections[i]] === 'undefined') { parent[sections[i]] = {}; } parent = parent[sections[i]]; } return parent; }; nameFun('myApp.nation.korea'); myApp.nation.korea = { seoul : '02', kyungki : '031', sms : function(){ console.log('sms'); } }; console.log(myApp.nation.korea.seoul);  

- 함수를 이용하여 먼저 namespace, subnamespace 를 선언한다

- 위와 같은 방법을 통해 위에서 발생한 지저분한 코드 문제점을 해결 할 수 있다

- nameFun('master_namespace.subnamespace.subnamespace.subnamespace.....')

3. 네임스페이스의 문제점

- 소스코드량 증가

- 전역 인스턴스가 바뀐다면 소스 코드 모두 수정

- 이름을 따라 가기 때문에 성능이 느리다

 false/true로 간주되는 값

1. false

- 빈 문자열('')

- 수치 0, NaN

- null, undefined

1) 예제

var flag = ''; if(flag){ console.log(true); }else{ console.log(false); }

- 실행 결과 : false

- 변수가 다음 값으로 될 경우 암묵적으로 false로 간주된다

2. true

- 위를 제외한 값들

1) 예제

var flag = 'aa'; if(flag){ console.log(true); }else{ console.log(false); }  

- 실행 결과 : true

3. 단축 연산

- &&, || 연산자를 이용할 경우 왼쪽 식만 평가 되고 오른쪽 식은 평가되지 않는경우

- && : 왼쪽 식이 false라면 전체 식이 false

- || : 왼쪽 식이 true 라면 전체 식 true

1) 단축 연산을 이용한 코드

var car = ''; car = car || 'BMW'; console.log(car);  

- 실행 결과 : BMW

- car 변수가 false로 지정되면서 BMW가 된다