'Javascript'에 해당되는 글 112건

  1. 2011.12.12 자바스크립트 prototype chain
  2. 2011.12.09 자바스크립트 함수 유효범위(Scope) 관리 및 Closer 1
  3. 2011.12.09 자바스크립트 함수 유효범위(Scope)란? 6
  4. 2011.12.08 자바스크립트 함수 4
  5. 2011.12.08 자바스크립트 함수 3
  6. 2011.12.07 자바스크립트 함수 2
  7. 2011.12.07 자바스크립트 함수 1 1
  8. 2011.12.05 자바스크립트 변수 12
  9. 2011.11.24 Javascript Statement
  10. 2011.11.24 Javascript expression 6

자바스크립트 prototype chain


1. 프로토타입이란?


자바스크립트에서 모든 객체는 prototype에 기반합니다.
 

프로토타입은 다른 객체의 기반이 되는 객체이고, 새 객체가 가져야 할 맴버를 정의하고
구현 합니다.


객체는 내부 속성을 통해 자신의 프로토타입에 묶입니다. IE를 제외한 표준 브라우져들에서는
__proto__라는 이름으로 노출하여, 개발자가 사용할 수 있지만, [[Scope]]속성과
마찬가지로 코드에서 접근할수 없습니다.




또한 객체의 맴버는 인스턴스 맴버와, 프로토타입 맴버 두가지입니다.

인스턴스 맴버객체 인스턴스 자체에 있고, 프로토타입 맴버는 객체의 프로토타입에
있습니다.


1. A 생성자 함수의 Prototype Chain 도식화 예제 입니다.




1. A 생성자 함수는 Function()입니다.


2. A 함수 객체의 Constructor는 Function() 이며, 즉 Function.prototype 맴버를 상속 받고 Function.prototype 객체 속성은 Object.prototype 맴버를 상속 받습니다. 

3. A
.prototype 객체 속성은 Object.prototype 맴버를 상속 받습니다.








2. new A 객체가 추가된 Prototype Chain 도식화 예제 입니다.




1. A 생성자 함수는 Function()입니다.

2. A 함수 객체의 Constructor는 Function() 이며, 즉 Function.prototype 맴버를 상속 받고 Function.prototype 객체 속성은 Object.prototype 맴버를 상속 받습니다. 

3. A
.prototype 객체 속성은 Object.prototype 맴버를 상속 받습니다.
 

4. New A객체의 __proto__ 속성은 A.prototype과 연결됩니다.



아래는 지금 까지의 설명에 대한 예제코드 입니다.


  1. function A(){
  2.     this.name = 'name';
  3. }
  4.      
  5.      
  6. A.prototype.getName = function(){
  7.     return this.name;
  8. }
  9.  
  10.  
  11. alert(A.constructor); // Function()
  12. alert(A.prototype.constructor); // A()
  13. alert(A.prototype.hasOwnProperty); // Object.hasOwnProperty()
  14. alert(Function.prototype.hasOwnProperty); // Object.hasOwnProperty()
  15.      
  16. alert(new A().name); // name
  17. alert(new A().getName()); // name
   

자바스크립트 함수 유효범위(Scope) 관리 및 Closer



1. 함수 생성시


함수 객체의 [[Scope]] 속성 :
 
다른 객체와 마찬 가지로 함수 객체 또한 자신만의 속성을 가지고 있습니다.


하지만 여기서 속성은 코드에서 접근할수있는 속성과 그렇지 않은 속성
2가지로 나뉩니다.


[[Scode]] 속성은 "자바스크립트" 엔진 에서만 접근 가능한 속성이며, 해당 함수 객체의 
Scode Chain을 포함 
하는 속성 이기도 합니다.







1. 함수 객체 생성시 [[Scope]] 속성이 만들어지며 
자신만의 식별자 검색을
위한
Scope chain을 포함 합니다.


2. Scope Chain 에 전역객체(Global object)추가 됩니다.

3. 전역 객체(Global object)는 함수에서 접근 할 수 있는 전역 변수 와 함수 전체를
담은
객체이며 이 객체는 this, window, document, function 을 포함 합니다.



위 그림을 코드로 표현하면 아래와 같습니다.


  1. function fnScope(num1, num2){
  2.    
  3.     var sum = num1 + num2;
  4.  
  5.     return sum;
  6. }



2. 함수실행시


Execution Context (실행 문맥) : 
함수가 실행되는 환경을 정의 합니다.


여기서 실행환경이란?


함수가 접근 할 수 있는 데이터 목록과 그 데이터를 가져오거나 설정하기 위한 환경 입니다.





1. 함수 실행시 "실행 컨텍스트" 객체가 생성됩니다.


2. 실행 컨텍스트도 자신만의 식별자 검색을 위한 "Scope chain"을 포함 합니다.

3. "Scope Chain"은 함수의 [[Scope]] 속성에 있는 전역 객체(Global object)로
초기화
됩니다.


4. 초기화 과정이 끝나면 Activation object(활성화 객체) "Scope Chain" 에 추가
됩니다.


5. Activation object 는 "this", "Aguments 집합", "지역변수",
"매개변수" 항목을
포함 합니다.


6. Activation object 생명 주기는 함수가 종료 될 때 같이 소멸 됩니다.



위 그림을 코드로 표현하면 아래와 같습니다.



  1. function fnScope(num1, num2){
  2.    
  3.     var sum = num1 + num2;
  4.  
  5.     return sum;
  6. }
  7.  
  8. fnScope(5, 10); //함수 실행




3. Scope Chain 의 확장 [ with문 ]


함수 실행시 with문을 만나면 해당 객체의(with문에 선언된 객체)속성 전체를 포함 하는
변수 객체를 Scope chain에 임시적으로 추가 확장 합니다.





1. 함수 실행시 "실행 컨텍스트" 객체가 생성됩니다.

2. 실행 컨텍스트도 자신만의 식별자 검색을 위한 "Scope chain"을 포함 합니다.

3. "Scope Chain"은 함수의 [[Scope]] 속성에 있는 전역 객체(Global object)로 
초기화
 됩니다.


4. 초기화 과정이 끝나면 Activation object(활성화 객체) "Scope Chain" 에 추가 
됩니다.


5. Activation object 는 "this", "Aguments 집합", "지역변수", 
"매개변수" 항목을 
포함 합니다.
 

6. with문을 만나면 해당 객체(with문에 선언된 객체)의 속성 전체를 포함하는 변수 객체를
Scope chain에 임시 적으로 추가확장 합니다.

7. Activation object 생명 주기는 함수가 종료될때 같이 소멸됩니다.




위 그림을 코드로 표현 하면 아래와 같습니다.



  1. //with object 생성
  2. var with_object = {
  3.    
  4.     name: 'with_object',
  5.     getName: function(){
  6.         return 'name';
  7.     }
  8. }
  9.  
  10. function fnScope(num1, num2){
  11.    
  12.     var sum = num1 + num2;
  13.  
  14.     with (with_object)
  15.     {
  16.         alert(name); // with_object
  17.         alert(getName()); // name
  18.     }
  19.  
  20.     return sum;
  21. }
  22.  
  23. fnScope(5, 10); // 함수 실행



4. Scope Chain 확장 [ catch문 ]

함수 실행시 try 블록에서 에러가 발생하면 실행 흐름은 catch문으로 넘어가고,
catch블록 안의지역변수 전체Scope chain에 임시 적으로 추가 확장됩니다.






1. 함수 실행시 "실행 컨텍스트" 객체가 생성됩니다.

2. 실행 컨텍스트도 자신만의 식별자 검색을 위한 "Scope chain"을 포함 합니다.

3. "Scope Chain"은 함수의 [[Scope]] 속성에 있는 전역 객체(Global object)로 
초기화
 됩니다.


4. 초기화 과정이 끝나면 Activation object(활성화 객체) "Scope Chain" 에 추가 
됩니다.


5. Activation object 는 "this", "Aguments 집합", "지역변수", 
"매개변수" 항목을 
포함 합니다.
  

6. try 블록에서 에러가 발생하면 실행 흐름은 catch문으로 넘어가고 catch 블록 안의
지역변수 전체가 Scope chain에 임시 적으로 추가 확장 합니다.

7. Activation object 생명주기는 함수가 종료될때 같이 소멸됩니다.





위 그림을 코드로 표현하면 아래와 같습니다.

  1. function fnScope(num1, num2){
  2.    
  3.     var sum = num1 + num2;
  4.  
  5.     try{
  6.     }
  7.     catch(e){
  8.         var msg = 'msg'; //스코프 확장
  9.         alert(e.message);
  10.     }
  11.  
  12.     return sum;
  13. }
  14.  
  15. fnScope(5, 10); // 함수 실행





5.
closer 생성


closer : 함수가 자신의 스코프 밖에 있는 데이터에 접근하려는 행위.





1. 함수 실행시 "실행 컨텍스트" 객체가 생성됩니다.

2. 실행 컨텍스트도 자신만의 식별자 검색을 위한 "Scope chain"을 포함 합니다.

3. "Scope Chain"은 함수의 [[Scope]] 속성에 있는 전역 객체(Global object)로 
초기화
 됩니다.


4. 초기화 과정이 끝나면 Activation object(활성화 객체) "Scope Chain" 에 추가 
됩니다.


5. Activation object 는 "this", "Aguments 집합", "지역변수", 
"매개변수" 항목을 
포함 합니다.
   

6. scopeFunction() 함수 생성 closer가 발생 합니다.

" closer 가 발생 하는 이유는? 설명 에서와 같이 scopeFunction 함수가 자신의 유효범위
밖에 있는
함수의 지역변수에 접근하기 때문입니다."


7. closer 생성시 closer의 [[Scope]] 속성은 fnScope의 실행 컨텍스트 객체(Activation object, global object)로 초기화 됩니다.

8.  closer 의 Scope Chain 에 포함된  Activation object 의 생명주기는?

"앞서 
 Activation object 에 대해 설명 한 것 처럼 Activation object의 생명 주기는
함수가 종료되고 실행 컨텍스트가 소멸 될 때 같이 소멸 됩니다
.

즉, 실행 컨텍스트가 소멸 될때 Activation object도 같이 소멸 된다는 말과 같습니다.


하지만, closer 생성시 [[Scope]]속성 초기화 과정에서 포함된 Activation object

실행 컨텍스트에 포함 된게 아니라 [[Scope]]에 포함 되었기 때문에 함수 종료시 소멸
되지 않습니다
.

즉, 메모리에 영구적으로 적재 된다는 말입니다.


결국 이로인해 IE 메모리 누수 현상이 발생 하는 것 입니다.

9. fnScope의 Activation object 생명 주기는 함수가 종료 될 때 같이 소멸 됩니다.




위 그림을 코드로 표현하면 아래와 같습니다.


  1. // 함수 생성
  2. function fnScope(num1, num2){
  3.    
  4.     var sum = num1 + num2;
  5.    
  6.     //클로져
  7.     function scopeFunction(){
  8.         var closer_variable = 2;
  9.         return sum + closer_variable;
  10.     }
  11.  
  12.     return sum;
  13. }



6. closer 실행


closer 발생 함수를 실행합니다.




1. closer 실행실행 컨텍스트 객체가 생성됩니다.

2. 실행 컨텍스트도 자신만의 식별자 검색을 위한 "
Scope chain"을 포함 합니다.


3. "Scope Chain"은 함수의 [[Scope]] 속성에 있는 전역 객체(Global object)로 
초기화
 됩니다.


4. 초기화 과정이 끝나면 Activation object(활성화 객체) "Scope Chain" 에 추가 
됩니다.


5. Activation object 는 "this", "Aguments 집합", "지역변수", 
"매개변수" 항목을 
포함 합니다.
  


6. closer의 Activation object 생명 주기는 함수가 종료 될 때 같이 소멸 되며, closer 생성시 closer의 [[Scope]] 속성으로 초기화된 fnScope의 실행 컨텍스트 객체(Activation object, global object)는 소멸되지 않고 영구적으로 메모리에 적재 됩니다.




위 그림을 코드로 표현하면 아래와 같습니다.


  1. function fnScope(num1, num2){
  2.    
  3.     var sum = num1 + num2;
  4.    
  5.     //클로져
  6.     function scopeFunction(){
  7.         var closer_variable = 2;
  8.         return sum + closer_variable;
  9.     }
  10.  
  11.     return sum;
  12. }
  13.  
  14. fnScope(5, 10); // 함수 실행


자바스크립트 함수 유효범위(Scope)란?


"자바스크립트" 언어의 유효범위는 함수블록에만 존재 합니다.
 

즉, 타 언어에 대부분 존재하는 블록({})안의 유효범위란 존재하지 않는다는 말과 같습니다.



1. 함수 유효범위에 대한 코드입니다.

  1. function x(){
  2.  
  3.     this.x = 1;
  4.    
  5.     $x = 1;
  6.  
  7.     var $y = 2;
  8.  
  9. }
  10.  
  11. alert(new x().x); // 1
  12. alert(window.$x); // 1
  13. alert(window['$y']); // undefined



1. x() 함수 객체를 생성합니다.

2. x() 함수 객체의 인스턴스 맴버 this.x가 추가 됩니다.

3. var 선언문이 없는 암묵적 전역변수 $x가 선언 및 정의 됩니다.

4.  x() 함수 객체의 지역변수 $y가 선언 및 정의 됩니
다.

5.  alert(new x().x); : 객체의 인스턴스 맴버 x값 1을 반환 합니다.

6.   alert(window.$x);  : 객체(window)의 프로퍼티 x값 1을 반환합니다.

7.   alert(window['$y']);  : x() 함수 객체의 지역변수 $y에 접근할 수 없기 때문에
즉, 정의되지 않았기 떄문에 undefined를 반환 합니다. 

자바스크립트 함수 4

"자바스크립트" 함수는 메소드를 나타 내기도 한다.

먼저 함수와 메소드의 차이점을 알아 보도록 하겠습니다.


  1. function x(){
  2.  
  3.     this.x = 1;
  4.     this.getX = function(){
  5.         return this.x;
  6.     }
  7. }
  8.  
  9. alert(typeof new x()); // object
  10. alert(new x().getX()); // 1


소스를 설명하기에 앞서 먼저 "함수"와 "메소드"의 개념적 차이를 설명 드리겠습니다.
 

보통 "함수"라는 것은 C언어를 기반으로 했던 코드들을 말하곤 합니다.
 

그래서 보통 C언어를 "함수지향언어"라고도 부릅니다.
 

하지만 "메소드"는 OOP 프로그램에서 등장한 개념 입니다.
 

이는 언어 설계상 태생부터가 다르다는 말이 됩니다.
 

즉, 함수는 제약을 받지않고 어디서나사용할 수 있는 것입니다. 
 

하지만, 메소드는 위의  new x().getX()  코드처럼 호출 객체(생성된 인스턴스)를 통해 사용할 수 있는 것을
말합니다. 
즉, 메소드는 클래스의 맴버로 종속되어 있음을 뜻합니다.
 


간단히 말해 "호출객체
.함수()"로 작성되는 코드는메소드인 것입니다.

자바스크립트 함수 3


"자바스크립트" 함수는 생성자를 나타내기도 합니다.
 


  1. function x(){
  2.  
  3.     this.x = 1;
  4.     this.y = 2;
  5. }
  6.  
  7. alert(typeof new x()); // object
  8. alert(new x().x); // 1
  9. alert(new x().y); // 2

이전 포스트인 "자바스크립트 함수 2" 내용과 같이 자바스크립트 에서는 new 연산자와 맴버가
설계된 x()
 생성자 함수를 통해 객체가 생성 됩니다.


여기서 x 함수 객체를 생성자 함수라 표현 하는것은 객체(this)를 생성하는
함수이기 때문입니다.

자바스크립트 함수 2


자바스크립트 언어는 설계상 클래스 라는 계념이 존재하지 않지만, 상황에 따라
함수가 클래스를 나타내기도 합니다.

"즉, OOP 언어의 클래스 계념이 어느정도 존재 한다고 볼 수도 있습니다."


아래 예제를 보시겠습니다.

  1. function x(){
  2.  
  3.     this.x = 1;
  4.     this.y = 2;
  5. }
  6.  
  7. alert(typeof new x()); // object
  8. alert(new x().x); // 1
  9. alert(new x().y); // 2


1. x 함수 객체가 생성 됩니다.

2. x 함수 객체의 인스턴스 맴버 x, y를 추가 합니다.
 

3.  typeof new x() 의 데이터 타입은 object가 반환됩니다.

4.   new x().x 객체의 인스턴스 맴버  x값 1을  반환합니다.

5.   new x().y 객체의 인스턴스 맴버 y값 2을 반환합니다.  




마치 타 언어의 클래스 처럼 new 연산자와 맴버가 설계된 생성자를 통해 객체를 생성하지만, 유사성만 가질 뿐 앞서 말했던것처럼 자바스크립트는 클래스가 존재 하지 않습니다.

즉, "자바스크립트"에서 객체는 단순히 "key/value"로 구성되며, 언제든 생성하고 변경할 수 있습니다.




자바스크립트 함수 1


"자바스크립트" 언어 에서 함수는 객체입니다.

이유는 아래와 같습니다. 

 

  1. alert(typeof function() { return this; }); // function
  2. alert(typeof new Function('', 'return this')); // function
  3.  
  4. alert(function() { return this; }.constructor); // Function()
  5. alert(new Function('', 'return this').constructor); // Function()

 

typeof function() { return this; }  와  typeof new Function('', 'return this') 코드 모두 함수 객체를 생성한다는 것을 알 수 있습니다.


즉, function() { return this; }.constructor  와   new Function('', 'return this').constructor의 생성자 함수는 Function()이며, 둘다 함수 객체 라는 것을 다시
한번 알 수 있습니다. 


두 객체 생성 방식의 차이점으로는 첫번째 함수 객체는 암묵적으로 생성되었고 두번째 함수 객체는 명시적으로 
new 연산자를 통해 생성되었다는 것입니다.

자바스크립트 변수


아래는 자바스크립트 실행 시 변수 선언 및 정의에 대한 프로세스 입니다.


1. 자바스크립트 실행 시 모든 전역 변수(x, y)가 선언 됩니다.


- 여기서 실행 시 라는 의미는 x  전역변수 선언문인 "var x ;'" 까지 언어처리가
(인터프
리터) 되지 않았을 경우를 의미 합니다.
(코드 상 1 ~ 2 라인의 alert(x), alert(y)에 해당 합니다.)

2. "자바스크립트"는 선언만 되고 정의되지 않은 변수는 모두  "undefined" 를 참조
합니다.
(즉, 아래 결과처럼 모두 "undefined" 를 출력합니다.)

  1. alert(x); // undefiend
  2. alert(y); // undefined
  3.  
  4. var x;
  5. alert(x); // undefiend
  6. var y;
  7. alert(y); // undefined
 



var 선언문 없이 선언된 암묵적 전역변수는 변수인가?


  1. alert(x); // undefiend
  2. alert(y); // undefined
  3. alert(z); // ?
  4.  
  5. var x;
  6. alert(x); // undefiend
  7. var y;
  8. alert(y); // undefined
  9. z;
  10. alert(z);


위 코드와 같이 총 3개의 전역변수(x, y, z)가 있습니다.

하지만 x, y 와는 다르게 z는 var 선언문이 없습니다.


이 같은 전역변수를 보통 [암묵적 변수] 라고 합니다.

그리고 이런 경우 3번라인의 alert(z);는 // 'z'가 정의되지 않았다는 에러가 발생합니다.


이유는 x, y 변수와는 달리 z는 var 선언문으로 선언되지 않았으며, 즉, 자바스크립트

실행시 미리 선언되지 않기 때문입니다.



위같은 에러를 피하기 위해서는 아래와 같이 코드를 작성해야 합니다.


  1. z = undefined;
  2. alert(z);

즉, 위와 같이 암묵적 변수에 접근하기 위해서는 변수에 값을 정의 후 접근해야 에러가

나지 않습니다.




그럼 "암묵적 변수"에 대한 더 자세한 내용을 알기 위해 다음 예제를 보시겠습니다.



  1. alert(x); // undefiend
  2. alert(y); // undefined
  3.  
  4. var x = 'x';
  5.  
  6. alert(x); // undefiend
  7. alert(window.x); // x
  8. alert(window['x']); // x
  9. alert(this.x); // x
  10.  
  11. var y = 'y';
  12. alert(y); // y
  13. alert(window.y); // y
  14. alert(window['y']); // y
  15. alert(this.y); // y
  16.  
  17.  
  18. z = 'z';
  19. alert(z); // z
  20. alert(window.z); // z
  21. alert(window['z']); // z
  22. alert(this.z); // z
  23.  
  24. delete x;
  25. delete y;
  26. delete z;
  27.  
  28. alert(typeof x); // string
  29. alert(typeof y); // string
  30. alert(typeof z); // undefined



위 코드와 같이 이번 예제에서는 x, y, z 모든 변수가, 전역객체의 프로퍼티로 접근이

가능 합니다.


하지만 25 ~ 27라인의 결과를 보십시오? 뭔가 이상하지 않으신가요?


분명, 21 ~ 23라인에서 delete 연산자로 x, y, z를 모두 제거 했지만

결과를 보면 z를 제외한 x, y 2개의 변수는 제거 되지 않았습니다.



이런 결과가 나오게된 이유는 몰까요?


먼저 delete 연산자의 정의를 살펴 보겠습니다. 

delete 연산자는 객체의 속성 혹은 배열변수의 요소를 제거하는데 사용된다.


즉, delete 연산자는
객체의 프로퍼티배열변수를 제거하는
연산자 입니다.


x, y 변수도 전역 객체의 프로퍼티로 접근은 가능 하지만 엄밀히 말하자면 delete 연산자로

삭제 되지않기 때문에 객체(window)의 프로퍼티로는 볼 수 없습니다.


반대로 z는 일반 변수(x, y) 처럼 자바스크립트 실행 시 선언되지 않으며,

delete 연산자로 제거 되기 때문에 전역변수가 아닌 객체(window)의 프로퍼티로 봐야

합니다.



Javascript Statement

Statement란? 단어뜻: [성명, 진술, 서술]


1. Expression Statement (표현문)

자바스크립트에서의 문장끝에 오는 ;(세미콜론[할당문])

2. Block Statement (복합문)

흔히 블록({})이라 불리는 이 복합문은 표현문의 집합입니다.
(이 블록은 하나의 문장처럼
사용되기 때문에 이 또한 문장입니다.)



  1. {
  2.     표현문;
  3. };
  4.  
  5.  
  6. {
  7.     var i = 0;
  8.     alert(i); // 0
  9.  
  10.     {
  11.         var i = 1;
  12.         alert(i);   // 1
  13.     }
  14.  
  15.     alert(i); // 1
  16. };


1.
바깥쪽 블록의 전역변수 i가 선언되고 안쪽 블록의 전역변수 i가 선언된다.


2. 바깥쪽 블록의 전역변수 i에 0이 정의되고 안쪽 블록의 전역변수 i에 1이 정의된다.

3. 안쪽 블록의 alert(i)는 1되고 바깥쪽 블록의 alert(i)도 1 된다.


  1. var i = 2;
  2. (function()
  3. {
  4.     alert(i); // undefined
  5.    
  6.     var i = 2; // 2
  7.     alert(i);
  8.  
  9.     if (true)
  10.     {
  11.         var i = 3;
  12.     }
  13.  
  14.     alert(i); // 3
  15.  
  16. })();


1. 전역변수 i가 선언되고 2가 정의된다.

2. 최초 alert(i)의 반환값이 "undefined" 가 나오는 이유는 "자바스크립트"의 유효범위는 Function 내부에서만 존재 하기 때문이며, 즉, 함수 내부 아래 지역변수로 i가 선언 되었기 때문입니다.

3. if문 내부에서 지역변수 i가 선언되고 3이 정의된다.

4. 마지막 alert(i)의 반환값이 "3"이 나오는 이유는 앞서 말했듯이 "자바스크립트"의
유효범위는 Function 내부에서만 존재 하기 때문입니다.



3. if, else, else if (조건문)


  1. if (true) {
  2. }
  3. else if (false) {
  4. }
  5. else{
  6. }
 

모든 if문 즉 조건문은 타 언어와 별반 다르지 않아 넘어간다.
  
  1. var is = true;
  2. switch (is){  
  3. case true :    
  4.     alert(true);      
  5.     break;
  6. case false :
  7.     alert(true);      
  8.     break;
  9. default :
  10.     alert(true);  
  11.     break;
  12. }


자바스크립트에서의 switch 비교문이 타 언어와 다른점은 비교값으로 정수 리터럴뿐만
아니라 모든 문자열이올수 있다.




4.
while, do while



  1. var sum = 0;
  2. while ( sum < 100 ) {  
  3.     sum = sum + 1;
  4. }
  5.  
  6. alert(sum); // 100
  7.  
  8.  
  9. var sum = 0;
  10. do {  
  11.     sum = sum + 1;
  12. } while ( sum < 100 );
  13.  
  14. alert(sum); // 100


5. for, for in



  1. var length = 10;
  2. for (var i = length; i--;){
  3.     alert(i); // 9 8 7 6 5 4 3 2 1 0
  4. }
  5.  
  6. var arr = [1];
  7. for (var n in arr) {
  8.     alert(arr[n]); // 1  
  9. }
  10.  
  11.  
  12. for (var n in document.body.childNodes){
  13.     alert(n); // lenght 0
  14. }

label, break, continue


break :


  1. for (i = 0; i < 10; i++) {
  2.     // i의 값이 5가 되면 순환문을 빠져나간다.
  3.     if (i === 5) break;
  4. }


continue :


  1. for (i = 0; i < 10; ++i) {
  2.     // i가 2와 같다면 continue문을 만나 아래 표현식을 생략하고 다음 i부터 순회를 시작 합니다.
  3.     if (i == 2) continue;  
  4.     alert(i);
  5. }

label :


  1. outter:
  2. for (i = 0; i < 10; i++) {
  3.     inner:
  4.     for (k = 0; k < 10; k++){
  5.         if (k === 5) break outter;
  6.  
  7.         alert(i);
  8.     }
  9. }
1. 바깥쪽에 for문에 outter label를 배치하고 안쪽 for문에 inner label을 배치한다.

2. 안쪽 for문의 조건문 if 조건식이 true라면 바깥쪽 for문 label인 outter for문의 순회를 종료시킨다.

3. alert(i)는 0이 다섯번 찍히고 종료한다.

Javascript expression



Expression(표현식)이란?

정의: 자바스크립트가 파싱하여 값으로 출력할 수 있는 모든 구문들을 의미 합니다.


1. 세부지정이나 호출


  1. . [] ()

2. 산술 연산자

  1. 1 + 11 - 11 * 11 / 1
 
3. 논리연산자


많은 언어에서 논리 연산자는 좌우 항으로 불리언을 기대하며 결과값으로 불리언을 가집니다.

하지만 자바스크립트의 &&(AND)연산자는 첫번째 피연산자가 거짓(false)일 경우,
첫번째 피연자의 값을 가지고 그렇지 않은경우는 두번째 피연산자의 결과값을 갖는다.


  1. alert(1 !== 1 && 0); // false(좌측 피연산자 1 !== 1(false))
  2. alert(1 === 1 && 0); // 0(좌측 피연산자 1 === 1(true))
  3. alert(0 && 1); // 0(좌측 피연산자 0(false))
  4. alert(1 && 0); // 0(좌측 피연산자 1(true))
  5.  
  6. var div = document.createElement('div');
  7. alert(div && div); // object(좌측 피연자 div(true));
  8. alert(!div && 0); // false(좌측 피연산자 !div(false));


4. 동등연산자


  1. ['==']:
 

두 데이터값에 타입이 다르더라도 값이 일치하면 true를 반환한다.


  1. null == undefined //true
  2. 3 == '3' //true
  3. 1 == true //true
  4. 0 == false //true
  5. null == undefined //true
  6. {a: 1} == {a: 1} //false(서로다른객체)
  7. var obj1 = obj2 = {a: 1}
  8. obj1 == obj2 //true(같은객체를 참조함
  9. (function 내부라면 obj1은 지역변수 obj2 전역변수로 선언))

두 데이터값에 타입이 같고 값이 일치하면
true를 반환한다.



  1. null == undefined //false
  2. 3 == '3' //false
  3. 1 == true //false
  4. 0 == false //false
  5. null == undefined //false
  6. {a: 1} === {a: 1} //false(서로다른객체)
  7. var obj1 = obj2 = {a: 1}
  8. obj1 === obj2 //true
  9. (같은객체를 참조함(function 내부라면 obj1은 지역변수 obj2 전역변수로 선언))


5. 관계 연산자
 

  1. >, <, >=, <=

6. Instanceof 연산자

해당 객체의 생성자 일치하면 true를 반환한다.

  1. {} instanceof Object //true
  2. {} instanceof Array //false


7. 단항 연산자

  1. delete 연산자: delete window['value'];
  2. new 연산자: new function(){;}
  3. typeof 연산자: typeof 1
  4. + : +=
  5. -:-=
  6. !:!=
 

8. 삼항 연산자

  1. ?: --> var isLogin = isLogin === true ? true : false
 



prev 1 ··· 8 9 10 11 12 next