'Javascript'에 해당되는 글 49건

자바스크립 호이스팅 (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())이 있지만 그건 추후에 알도록 한다

자바스크립트의 Prototype(프로토타입)

1. 정의

- 자바스크립트에서 객체지향 프로그램을 하기 위해 꼭 알아야 할것이 프로토타입(prototype) 이라고 한다

- 여기저기 찾다가 자바스크립트의 표준 문서와 다양한 블로그에서 정의한 걸 적었다

- object that provides shared properties for other objects -  ECMAscript

-note When a constructor creates an object, that object implicitly references the constructor’s “prototype” property for the purpose of resolving property references. The constructor’s “prototype” property can be referenced by the program expression constructor.prototype, and properties added to an object’s prototype are shared, through inheritance, by all objects sharing the prototype. Alternatively, a new object may be created with an explicitly specified prototype by using the Object.create built-in function.

- 프로토타입 객체를 참조하는 링크(_proto_)??

- 위 글을 참고하면 프로토타입 == 프로퍼티를 다른 객체와 공유하는 객체

- 생성자 함수와 연관되어 있다

2. 생성자의 구조

- 프로토타입을 알기 위해 생성자의 구조를 파악한다

1) 생성자 

function human(){ }

- human이라는 함수를 생성하면 내부적으로 위와 같은 구조가 생성된다

- Prototoype + Prototype object 위와 같이 순환 구조를 가진다

- 위와 같은 순환 구조는 아래의 코드에서도 확인 가능하다

3. Prototype Object (프로토타입 객체)

-  constructor가 되며 다른 객체들은 이 프로토타입 객체를 참조한다

- 다른객체의 원형이 되는 객체이다

function human(){ } var aa = new human();  

1)  prototype에 속성을 추가한다면

function human(){ } var aa = new human(); human.prototype.getName = function(){ return '퇴근'; } console.log(aa.getName());  

- 프로토타입 객체에 getName()가 추가될 것이다

2) 다른 객체에 속성을 추가 한다면

function human(){ } var aa = new human(); human.prototype.getName = function(){ return '퇴근'; } aa.getName = function(){ return '출근'; } console.log(aa.getName());  

-  프로토타입 객체를 참조하지만 자기 자신의 고유한 getName()를 가지고 있기 때문에 출력 값은 출근이 된다

- 이말은 이름을 다르게 한다면 객체의 참조를 통해 코드 재사용이 가능해 진다

4. Prototype(프로토타입)

- 프로토타입의 두가지 의미

1) 객체 생성 됬을 때 프로토타입을 참조하는 Link

2) 함수의 멤버인 prototype은 프로토타입 객체를 가리키는 속성 

- 결국 누군가가 프로토타입을 묻는 다면 생성자를 통해 만들어진 객체가 공유할 수 있는 객체 라고 한다면 어느 정도 맞지 않을까