'Javascript/Core'에 해당되는 글 24건

 Strict mode 

1. 정의

- 이용해서는 안되는 구문을 제거 할 때 사용한다

2. 사용법

1) 스크립트 앞부분(hello.html)

'use strict'; //code...

- 모든 코드에 영향을 미치기 때문에 권장 되지 않는다

2) 함수 앞에

function hello(){ 'use strict'; //code }

- 함수 코드 전체에 적용된다

- 권장 

3. 대응 브라우저

- Explore : 10~

- Chrome : 13~

- Firefox : 4~

- Safari : 6~

- Opera : 11.6~

- 대응 안되는 브라우저에는 무시된다

자바스크립 호이스팅 (Hoisting)

1. 정의

- Hoisting is a term you will not find in the JavaScript docs. Hoisting was thought up as a general way of thinking about how execution context (specifically the creation and execution phases) work in JavaScript. 

- Another unusual thing about variables in JavaScript is that you can refer to a variable declared later, without getting an exception. This concept is known as hoisting

- 호이스팅은 실행문맥에 일반적인 방법으로 고안된다?

- 호이스팅은 변수 선언에 관련하여 동작하는 메카니즘?

2. 구현

1) 변수 선언

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

- 실행 결과 : undefined, 10

- var a 의 선언이 중간 쯤에 되었지만 첫 번째 a를 출력 할 때 오류를 발생시키지 않고 undefined라는 데이터를 출력했다.

- hoist로 인하여 오류가 발생 하지 않았다. 결국 hoist는 변수 선언문의 유효 범위를 가장 위로 끌어올린 후에 변수 선언 위치에서 초기화 된다

2) 함수 선언

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

- 실행 결과 : undefined, 10

- 함수 선언을 아래에서 하고 호출을 위에서 했지만 hoist 로 인하여 에러가 나오지 않고 정상적으로 작동 했다

- 만약 함수를 선언문을 사용하지 않고 표현식을 썼다면?

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

- 실행 결과 : hoist is not a function(…)

- 표현식으로 작성된 함수는 hoisting 될 수 없다

3. 결론

- 함수는 선언문만 호이스팅 되며 변수 형으로 초기화 되었을 시 불가능

- 변수 형으로 선언된 것은  undefined 로 표시된다

자바스크립트 유효범위(Scope) 와 유효범위 체인(Scope chain)

1. 정의

- scope is the set of variables, objects, and functions you have access to.

- 변수나 객체들에 접근할 수 있는 범위라고 생각하면 쉽다

- 자바스크립트에서는 함수 단위가 scope의 영역이 된다(자바는 블럭{} 단위)

2. 구현

1)  Global scope vs local scope(전역/지역)

//Global var a = 10; function scope(){ //Local var b = 20; //Global c = 30; console.log(b); } console.log(a); scope(); console.log(c); //Error console.log(b);

- a : 전역 변수 - b: 지역 변수가 된다

- 지역변수를 밖에서 접근 하려 한다면 에러가 난다

-  var  없이 변수가 선언 된다면 그것은 전역변수가 된다

2) 변수명 중복

//Global var overlap = 10; function scope(){ //Local var overlap = 20; console.log(overlap); } console.log(overlap); scope();  

- 결과 : 10, 20 

- 함수안의 지역 변수는 전역 변수와 이름이 같더라도 가장 가까운 변수 명을 참조한다

//Global var overlap = 10; function scope(){ //Global overlap = 20; console.log(overlap); } console.log(overlap); scope(); console.log(overlap);  

- 결과 : 10, 20, 20

- 함수안에 var가 없는 변수가 같은 이름으로 지정 된다면 지역 변수의 값 또한 변한다

- var 가 없는 전역 변수는 위험하다

3. 전역변수 사용 방법

- 전역변수의 사용은 위험을 초래한다. 그렇기 때문에 안전하게 사용하는 방법이 필요

1) 전역 객체를 이용

//global object var math = {}; math.sum = { 'a' : null, 'b' : null } math.substract = { 'a':null, 'b':null } math.sum.a = 5; math.sum.b = 6; function sum(){ console.log(math.sum.a + math.sum.b); } sum();  

- 결과 : 11

- math라는 객체를 생성하고 그 안에 속성값(add, subtract)을 선언하여 사용한다

- 속성의 값중 a, b는 중복되는 이름을 사용하지만 속성이 달라 문제가 없다

- 전역객체를 선언함으로서 생기는 문제를 해결한다

2) 모듈화(익명의 함수 사용)

- 전역변수를 아예 사용하지 않을 때 사용한다

- 모든 위험으로 부터 배제한다

(function(){var math = {}; math.sum = { 'a' : null, 'b' : null } math.substract = { 'a':null, 'b':null } math.sum.a = 5; math.sum.b = 6; function sum(){ console.log(math.sum.a + math.sum.b); } sum()})();  

- 익명의 함수는 바로 실행되는 함수 이다

4. Scope chain(유효범위 체인)

- 함수가 중첩 될때 inner 함수가 상위 함수의 유효범위까지 포함 한다

- A scope chain is a list of objects that are searched for identifiers appear in the code of the context

1) 구현

var x = 10; (function foo() { var y = 20; (function bar() { var z = 30; // "x" and "y" are "free variables" // and are found in the next (after // bar's activation object) object // of the bar's scope chain console.log(x + y + z); })(); })();  

- 실행결과 :60

- inner 함수가 실행 되었지만 outer + global 유효 범위의 값까지 계산 된다

- 함수가 생성 될때 [scope] 이라는 프로퍼티를 가지며 이는 곳 유효 범위가 된다. 그리고 유효한 범위의 값들을 연결 한 것이 scope 체인이다. 

- 유효 범위 체인은 inner 부터 검색을 시작해서 값을 반환하고 없으면 undefined된다

5. 결론

- 자바스크립트는 함수단위의 유효범위를 갖는다

- 전역 보단 지역 변수를 사용하는게 안전하다

자바스크립트의 상속 prototype

1. 정의

- 자바스크립트도 객체지향 언어의 상속을 지원한다

- 하지만 상속하는 방법으로 많은 말들이 존재한다

2. 방법

1) 기존의 방법

function Person(){ this.name = 'Kyle'; this.getName = function(){ console.log(this.name) ; } } function Me(){ var obj = new Person(); obj.name="Tom"; return obj; } var aa = new Me(); aa.getName();

- 실행 결과 : Tom

- 상속이 제대로 된것 같다

문제 ) 왜 이걸 사용하지 않는가?

- 아래 코드를 보자

function Person(){ this.name = 'Kyle'; this.getName = function(){ console.log(this.name) ; } } function Me(){ var obj = new Person(); obj.name="Tom"; this.getNickname = function(){ console.log(this.name); } return obj; } var aa = new Me(); aa.getName(); aa.getNickname();  

- 위의 코드에서  aa.sayGoodbye() 를 호출하는 부분에서 에러가 발생한다

- 분명 Me()이용해서 생성자를 만들고 그 안에 정의한 함수를 호출 하지만 찾을 수 없다

이유) 인스턴스가 다르다

- console 창에 aa 를 입력하면 위와 같은 결과를 보인다. 그 안에는 Person 객체가 들어있다. 분명 생성자는 Me()인데 aa의 객체는 Person() 이다

console.log(aa instanceof Me); //false console.log(aa instanceof Person); //true  

- 인스턴스가 Person 으로 되어있다. 이렇다면 상속받은 객체 입장에서는 새로운 기능을 추가하기 힘들다

2) prototype을 이용한 방법

- 기존 방법의 개선안으로  prototype을 사용한다

function Person(){ this.name = 'Kyle'; this.getName = function(){ console.log(this.name) ; } } function Me(){ this.name = 'Tom'; this.getHello = function(){ console.log('Hello'); } } Me.prototype = new Person(); var aa = new Me(); aa.getName(); aa.getHello(); console.log(aa instanceof Me); //true console.log(aa instanceof Person); //true  

- 결과 : Tom, Hello, true, true

- 상속은 물론 새로 추가된 기능 까지 잘 된것을 알 수 있다. 또한 인스턴스가 Me와 Person 까지 포함되어있다

3. 결론

- 기존의 방법 보단 prototype을 이용한 방법이 객체지향 취지에 맞는다

- 하지만 prototype으로 만든다면 prototype chain의 길이가 길어질 수 있고 이것은 성능과 연관되어있다

- 현재 다른 상속 방법(Object.create())이 있지만 그건 추후에 알도록 한다