'Javascript' 카테고리의 글 목록 (8 Page)

자바스크립트 강좌 10 - 모듈 과 네임스페이스

Javascript 2012. 3. 9. 15:18

9. 자바스크립트 모듈 과 네임스페이스

1. 모듈 과 네임스페이스

1 - 1. 초기에는 간단한 스크립트에만 사용되던 언어가, 점차 웹 기술이 발전되며, 더욱 길고 복잡한 하나의 어플리케이션 형태가 되어 버렸습니다.

또한, 잘 만들어진 외부 프레임웍(Jquery, Prototype 등..)들이 하나하나 등장 하기 시작 했으며, 오늘날 대부분의 웹어플리케이션에서 기본 라이브러리로 도입하고 있습니다.

마지막으로 이와 같은 프레임웍에서 쓰이는 코드는 이 장에서 배우게 될 모듈구현 코드에 근간을 두고 있습니다.

1 - 2. 네임스페이스 생성

모듈 작성시 중복 전역변수에 대한 문제는 가장 먼저 주의해야할 점중 하나 입니다.

자바스크립트는 타 OOP 언어와는 달리 언어적으로 네임스페이스 기능을 제공하고 있지 않습니다. 하지만 이를 해결하기 위한 방법으로 객체를 활용합니다.

1 - 3. 모듈사용 유 / 무 검사

1 - 4. 즉시 실행 함수 생성

1 - 5. 네임스페이스에서 심벌 가져오기

1 - 6. private, public 심벌

1 - 7. private 네임스페이스와 유효 범위로서의 클로저

P.S 위의 [1 - 6], [1 - 7]에 대한 내용은 다른 섹션처럼 간단한 예제로 정리할 수 있는 부분이 아니기 때문에
개별 포스트로 정리하도록 하겠습니다.

2. 예제 코드

/*
 
1. [1 - 2] 예제 코드
 
*/
 
// 해당 네임스페이스가 존재하지 않는다면 새로 생성해서 반환한다.
function getNameSpace(ns) 
{
  
  var ns = ns ? 
ns.split('.') : ''
  
    , parent = createObject(window, 
ns[0]);
 
  
  ns = ns.splice(1);
 
  
  for (var i = 0, length = 
ns.length; i < 
length; i++) {
  
      parent = createObject(parent, 
ns[i]);
  
  }
 
  
  return parent;
}
 
function createObject(p, n) {
  
  return p[n] = typeof 
p[n] 
=== 'undefined' ? 
{} : p[n];
}
 
getNameSpace('a.b.c');
 
alert(a); // object
alert(a.b); // 
object
alert(a.b.c); // object
 
a.b.c = { name: 'a.b.c' };
 
alert(a.b.c.name); // 
'a.b.c'

/*

2. [1 - 4] 예제 코드

*/

// 자바스크립트 실행시 아래와 같은 코드로 즉시 실행 함수를 만들어 각 모듈을 
구성해 줍니다.

// 또한 모듈을 구성하는 가장 좋은 방법은 아래와 같이 정의된 직후 호출되는 익명함수속에 코드를 
작성하는 

방법이 있습니다.

var o = (function(){

  // private valiade

  var x = 'x'

    , fn = function(){

      return this;

  };

  fn.prototype.getX = function(){

      return x;

  }

  return fn;

})();

alert(new o().getX()); // x

/*

2. [1 - 5] 예제 코드

*/

/* 

네임스페이스를 작성하다보면 코드 작성시 이름이 너무 길어지는 불편함을 볼 수 있습니다.

위와 같은 불편함을 해소하기 위해 아래와 같이 각 네임스페이스에 
대한 심볼을 구성해 주는 방법이 있습니다.

*/

var o = 
window.a = function(){

  return this;

};

var o = {}

, fn = 
function(){ return this; };

o.fn = fn.prototype = 
{

  x: 'x'

}

alert(o.fn.x); // x

참고서적: (자바스크립트 핵심 가이드)

저작자표시

Posted by 전성균

자바스크립트 강좌 9 - 클래스, 생성자, 프로토타입 속성

Javascript 2012. 3. 8. 19:07

8. 자바스크립트 클래스, 생성자, 프로토 타입

1. 함수

1 - 1. 자바스크립트의 (클래스, 생성자) 라는 단어는 코드 설계상 의미 부여한 이름일 뿐이지 실제 언어에 구현되어 있는
기능이 아닙니다.

1 - 2. 생성자 (new 연산자와 함께 객체를 생성 하도록 설계된 함수를 생성자라고 합니다.)

1 - 3. 프로토 타입과 상속 (함수 객체의 프로퍼티이자 호출 가능한 맴버 그룹을 나타내며, 그리고 각 맴버 끼리의 상속 또한 가능합니다.) * 여기서 상속이란 단어 또한 의미상 부여한 이름일 뿐입니다.

1 - 4. 상속 없이 확장하기

1 - 5. constructor, instanceof 연산자란?

1 - 6. 객체 타입 판단하기 (typeof 연산자를 활용한 객체 타입 검사)

2. 예제 코드

/*

2. [1 - 2] 예제 코드

*/

function fn(){

  this.x 
= 'x';

  this.y 
= 'y';

  return this;

};

// 여기서 객체의 맴버 구조를 가지고 있는 설계도인 fn을 클래스라 하며, 인스턴스 생성을 위한 
함수인 fn()을 생성자 함수라 부릅니다.

var o = new fn()

/*

2. [1 - 3] 예제 코드

*/

function fn(){

  this.x 
= 'x';

  this.y 
= 'y';

  return this;

};

fn.prototype.getX 
= function(){

  return this.x;

};

function fn1(){

  return this;

};

// 프로토타입 맴버에 fn 객체를 추가(상속) 한다.

fn1.prototype = 
new fn();

alert(new fn().getX()); // x

alert(new fn1().getX()); // x

/*

2. [1 - 4] 예제 코드

*/

function fn(){

  this.x 
= 'x';

  this.y 
= 'y';

  return this;

};

fn.prototype.getX 
= function(){

  return this.x;

};

function fn2(){

  this.x 
= 'x1';

  this.y 
= 'y1';

  return this;

};

for (var n in 
fn.prototype){

  fn2.prototype[n] = o[n];

}

alert(new fn2().getX()); // x1

/*

2. [1 - 5] 예제 코드

*/

function fn(){

  this.x 
= 'x';

  this.y 
= 'y';

  return this;

};

//new fn()객체의 생성자함수 fn을 반환합니다.

alert(new fn().constructor); // fn 

//new fn()객체는 fn 생성자함수로 부터 생성되었습니다.

alert(new fn() instanceof 
fn); 
// true 

/*

2. [1 - 6] 예제 코드

*/

// 객체는 당연히 object 반환한다.

alert(typeof {}); // 
obejct

// 자바스크립트에서 배열은 객체이기 때문에 object를 반환한다.

alert(typeof []); // 
object

// null 또한 객체이다.

alert(typeof null); // 
object

// undefined는 undefined를 반환한다.

alert(typeof undefined); // undefined

/*

위에서 보는 바와 같이 함수 내부에서 매개변수 타입을 검사할때 
단순히 typeof로만 검사하는것은 조금 무리가 따릅니다.

이를 좀 더 보안하기 위한 방법으로 아래와 같은 방법이 있을수 
있습니다.

*/

// constructor

alert(typeof {} === 'object' && {}.constructor === Object); // true

alert(typeof [] === 'object'  && [].constructor === Array); // true 

alert(typeof 'str' 
=== 'string'  && 'str'.constructor === String); // true

// instanceof

alert(typeof {} === 'object' && {} instanceof Object); // true

alert(typeof [] === 'object' && [] instanceof Array); // true

위 포스트에 대한 더 자세한 내용은 아래 이전 포스트를 참조 하시기 바랍니다.

자바스크립트 함수 1

자바스크립트 함수 2

자바스크립트 함수 3

자바스크립트 함수 4

참고서적: (자바스크립트 핵심 가이드)

저작자표시

Posted by 전성균

자바스크립트 강좌 8 - 함수

Javascript 2012. 3. 8. 17:11

7. 자바스크립트 함수

1. 함수

1 - 1. 함수란 일단 한 번 정의되면 임의 횟수에 걸쳐서 호출되거나 실행될 수 있는 자바스크립트 코드 블록입니다.

1 - 2. 함수 정의 와 호출

1 - 3. 중첩된 함수 (자바스크립트에서 함수는 다른 함수 안에 중첩되어 정의될 수 있다.

1 - 4. 함수 리터럴

1 - 5. 함수 이름 붙이기

1 - 6. 함수 전달인자

1 - 7. 생략 가능한 전달인자 / arguments

1 - 8. 데이터 / 메서드로서의 함수

1 - 9. 생성자 함수

1 - 10. 함수 프로퍼티와 메서드 (peorotype)

1 - 11. 나만의 함수 프로퍼티 생성하기

1 - 12. call(), apply() 메서드

1 - 13. 함수 유효 범위와 클로저

2. 예제 코드

/*

2. [1 - 2] 예제 코드

*/

// 함수 정의

function fn(){

  return this;

}

// 호출 연산자('()')를 사용해 호출한다.

// 함수 호출

alert(fn()); // 
object

/*

2. [1 - 3] 예제 코드

*/

// 중첩함수

// 중첩함수란 곧 클로저 생성과도 깊은 연관이 있습니다.

function fn(){

  function fn(){

      return this;

  }

  return this;

}

alert(fn()); // 
object

/*

2. [1 - 4] 예제 코드

*/

var fn = function(){ return this; 
};

alert(fn()) // object

/*

2. [1 - 6] 예제 코드

*/

// 함수 매개변수는 아래와 같이 생략이 가능합니다.

// 생략된 매개변수는 정의 되지않은 값을 나타내는 'undefined'가 
반환됩니다.

var fn = function(x, y){ 

  return y; 

};

alert(fn(1, 2)); // 2

alert(fn(1)); // undefined

/*

2. [1 - 7] 예제 코드

*/

// 매개변수가 가변적이라면 아래와 같이 매개변수를 나타내는 객체인 arguments을 이용할 수 
있습니다.

var fn = function(){ 

  return arguments[arguments.length - 
1];

};

alert(fn(1, 2)); // 2

alert(fn(1)); // 1

/*

2. [1 - 8] 예제 코드

*/

var o = {

  fn: function(){

      return this;

  }

}

// 여기서 o.fn() 함수가 반환하는 this는 해당 호출객체인 o를 나타내며 즉, 반환값은 
true가 나온다.

alert(o.fn() === o) // true

/*

2. [1 - 9] 예제 코드

*/

function fn(){

  return this;

}

// new 연산자와 생성자 함수를 통한 객체 생성시 fn은 생성자 함수로 객체의 클래스이며 동시에 
생성자 함수로 부를 수 있습니다.

var o = new fn();

/*

2. [1 - 10] 예제 코드

*/

function fn(x){

  return this;

}

// 함수의 프로토타입 맴버 생성을 위한 프로퍼티이다.

alert(fn.prototype);

/*

2. [1 - 11] 예제 코드

*/

function fn(x){

  return this;

}

// 함수의 프로토타입 맴버를 생성합니다.

fn.prototype = 
{

  x: 'x'

};

alert(fn.prototype.x); // 
x

/*

2. [1 - 12] 예제 코드

*/

// call(), apply()

// 다른 어떤 객체의 메서드인 것처럼 호출할 수 있게 해주는 함수 
입니다.

// 자바스크립트 패턴중 메서드 빌려쓰기 패턴에서 유용하게 쓰일수 
있습니다.

var o = {

  x: null,

  fn: function(x){

      this.x = x;

      return this;

  }

}

var o1 = {

}

alert(o.fn.call(o1, 'x').x); // x

// apply() 메서드는 call() 메서드와는 달리 인자값을 배열로 
전달합니다.

var o = {

  x: null,

  y: null,

  fn: function(x, y){

      this.x = x;

      this.y = y;

      return this;

  }

}

var o1 = {

}

alert(o.fn.apply(o1, ['x', 'y']).x); // x

alert(o.fn.apply(o1, ['x', 'y']).y); // y

/*

2. [1 - 13] 예제 코드

*/

// 함수 유효범위 및 클로저에 대한 내용은 간단히 다룰수 있는 내용이 아니므로 이전 포스트를 참고 
하시기 바랍니다.

함수 유효범위 및 클로저 바로가기

참고서적: (자바스크립트 핵심 가이드)

저작자표시

Posted by 전성균

자바스크립트 강좌 7 - 배열

Javascript 2012. 3. 8. 16:05

7. 자바스크립트 배열

1. 배열

1 - 1. 자바스크립트 배열은 순선 있는 값들의 집합입니다. 배열 안의 각 값을 원소라 부르며 각 원소는 배열 안에서 그
위치를 가리키는 번호를 할당 받는데 이 번호를 배열인덱스 라고 합니다.

1 - 2. 배열 생성 (배열 리터럴 생성, new 연산자와 생성자 함수를 통한 생성)

1 - 3. 배열 원소 읽고 쓰기

1 - 4. 배열에 원소 추가 / 삭제 하기

1 - 5. 배열의 길이

1 - 6. 배열 순회 하기

1 - 7. 배열 크기 조절

1 - 8. 다 차원 배열 생성

1 - 9. 배열 메서드 (join(), reverse(), push(), sort(), concat(), slice(), pop(), unshift(), shift())

2. 예제 코드

/*

2. [1 - 2] 예제 코드

*/

// 객체 리터럴 생성

// 배열 리터럴 생성

var a = [];

// new 연산자와 생성자 함수를 통한 생성

var a = new Array();

/*

2. [1 - 3] 예제 코드

*/

var a = [1, 2];

alert(a[0]); // 1

var a = new Array();

a[0] = 1;

a[1] = 2;

alert(a[0]); // 1

/*

2. [1 - 4] 예제 코드

*/

var a = new Array();

a[0] = 1;

a[1] = 2;

alert(a.length); // 2

//배열의 정해진 index를 삭제

a.splice(0, 1);

alert(a.length); // 1 

/*

2. [1 - 5] 예제 코드

*/

var a = [1, 2];

alert(a.length); // 2

var b = new Array(10);

alert(b.length); // 10

/*

2. [1 - 6] 예제 코드

*/

var a = [1, 2];

for (var i = 0; i < a.length; 
i++){

  alert(a[i]);

}

// 1, 2

/*

2. [1 - 7] 예제 코드

*/

var a = new Array(10);

alert(a.length); // 10

var a = new Array(11);

alert(a.length); // 11

/*

2. [1 - 8] 예제 코드

*/

// 2차원 배열 생성

var a = [];

a[0] = [1, 2];

alert(a[0][0]); // 
1

/*

2. [1 - 9] 예제 코드

*/

// join(): 배열의 모든 원소를 문자열로 반환하고 이어 붙여서 
반환합니다.

var a = [];

a.push(1);

a.push(2);

alert(a.join(',')); // 1, 2 

// reverse()

// 배열 안의 원소 순서를 반대로 정렬하여 반환합니다.

var a = [];

a.push(1);

a.push(2);

alert(a.reverse(',')); // 2, 1

// sort()

// 배열 안의 원소들은 정렬하여 반환한다.

var a = [];

a.push(2);

a.push(1);

alert(a.sort()); // 1, 
2

// concat()

// 배열의 모든 원소에 concat() 메서드의 전달인자들을 전부 이어붙인 배열을 새롭게 생성하여 
반환한다.

var a = [1, 2];

alert(a.concat(3, 4)); // 1, 2, 3, 
4

alert(a.concat(3)); // 1, 2, 
3

// slice()

// 배열의 일부분(slice)혹은 부분 배열을 반환한다.

var a = [1, 2];

alert(a.slice(0, 1)); // 1 

function fn(x, y){

  alert([].slice.apply(arguments, 
[0, 1])); // 1

}

fn(1, 2);

// push()

// 배열을 원소를 추가 합니다.

var a = [1, 2];

a.push(3);

alert(a); // 1, 2, 
3

// pop()

// 배열의 마지막 원소를 삭제 합니다.

var a = [1, 2];

a.pop();

alert(a); // 
1

// unshift()

// 배열의 첫번째 요소에 삽입 합니다.

var a = [1, 2];

a.unshift(3);

alert(a); // 3, 1, 
2

// 배열의 첫번쨰 요소를 삭제 합니다.

var a = [1, 2];

a.shift();

alert(a); // 
2

참고서적: (자바스크립트 핵심 가이드)

저작자표시

Posted by 전성균

자바스크립트 강좌 6 - 객체

Javascript 2012. 3. 8. 15:09

6. 자바스크립트 객체

1. 객체

1 - 1. 자바스크립트 객체는 여러 값들을 결합한 것으로서 각 값에 붙은 이름을 사용하여 원하는 값을 저장하고 읽어올 수 있습니다. 다시 말해 객체는 이름(key)과 값(value)으로 구성된 프로퍼티들의 집합입니다.

1 - 2. 객체 생성 (객체 리터럴 생성, new 연산자와 생성자 함수를 통한 생성)

1 - 3. 객체 프로퍼티 (프로퍼티 값에 접근하기 위해서는 마침표(.) 연산자를 사용하며, 접근 하려는 프로퍼티를 소유한
객체가 이 연산자의 좌측에 위치해야 합니다.

1 - 4. 프로퍼티 열거 (for in 문을 사용하여 객체 프로퍼티들을 열거하거나, 객체의 각 프로퍼티에 대한 작업을 반복적으로 수행 할 수 있습니다.

1 - 5. 프로퍼티 존재 확인하기

1 - 6. 프로퍼티 삭제하기 (delete 연산자를 사용하여 객체의 프로퍼티를 삭제 합니다.)

1 - 7. 연관 배열로서의 객체 (객체의 프로퍼티에 접근하기 위해 사용하는 마침표(.) 연산자와 더불어 배열에서 주로 사용하는 ['key']연산자를 사용해도 객체의 프로퍼티에 접근할 수 있다.

1 - 8 constructor 프로퍼티 (객체를 초기화하는데 싸용되는 생성자 함수를 반환합니다.)

1 - 9. hasOwnPropety 메서드 (객체의 프로퍼티 생성 유/무를 부울린값으로 반환합니다.)

2. 예제 코드

/*

2. [1 - 2] 예제 코드

*/

// 객체 리터럴 생성

var o = {

  x: 'x',

  y: 'y'

};

alert(typeof o); // object

// new 연산자와 생성자 함수를 통한 생성)

function fn(){

  this.x = 'x';

  this.y = 'y';

  return this;

};

var o = new fn();

alert(typeof o); // object

/*

2. [1 - 3] 예제 코드

*/

var o = {

  x: 'x',

  y: 'y'

};

alert(o.x); // x

// new 연산자와 생성자 함수를 통한 생성)

function fn(){

  this.x = 'x';

  this.y = 'y';

  return this;

};

var o = new fn();

alert(o.y); // y

/*

2. [1 - 4], [1 - 5] 예제 
코드

*/

var o = {

  x: 'x',

  y: 'y'

};

for (var n in o)

{   

  if (typeof o[n] !== undefined){

      alert(o[n]); 

  }

}

// x, y

// 위 방법보다 Object.hasOwnProperty() 메서드를 활용한 아래 방법을 더 선호 
합니다.

for (var n in o)

{   

  if (Object.hasOwnProperty.call(o, n)){

      alert(o[n]); 

  }

}

// x, y

/*

2. [1 - 6] 예제 코드

*/

var o = {

  x: 'x',

  y: 'y'

};

//프로퍼티 삭제

delete 
o.x;

alert(typeof o.x); // 
undefined

/*

2. [1 - 7] 예제 코드

*/

var o = {

  x: 'x',

  y: 'y',

  z: function(){

      return this.x;

  }

};

alert(o['x']); // x

alert(o['z']()); // x

/*

2. [1 - 8] 예제 코드

*/

var o = {

  x: 'x',

  y: 'y'

};

alert(o.constructor); // Object

// new 연산자와 생성자 함수를 통한 생성)

function fn(){

  this.x = 'x';

  this.y = 'y';

  return this;

};

var o = new fn();

alert(o.constructor); // fn

/*

2. [1 - 9] 예제 코드

*/

function fn(){

  this.x = 'x';

  this.y = 'y';

  return this;

};

var o = new fn();

alert(o.hasOwnProperty('x')); // 
true

alert(o.hasOwnProperty('z')); // 
false

참고서적: (자바스크립트 핵심 가이드)

저작자표시

Posted by 전성균

자바스크립트 강좌 5 - 문장

Javascript 2012. 3. 8. 13:34

5. 자바스크립트 문장

이 섹션에 대한 정리는 여타 모든 프로그램 서적에서 가장 기본으로 다루고 있는 내용인 만큼 본 포스트 에서는 간단히 예제 위주로
정리하고 넘어 가겠습니다.

// if 문

var x = 0;

if (x) alert('x');

else if (!x) alert('y');

// y

// switch 문

switch(x){

  case 1:{

      alert('x');

  }

  case 0:{

      alert('y');

  }

  default:{

      alert('y');

  }

}

// y, y

// while

while (x){

  alert(x);

};

// 찍히지 않음

do{

  alert(x);

}

while (x)

// 0

var a = [];

for (var i = 0; i < a.length; i++){

  alert(i);

}

// 찍히지 않음

for (var n in 
a){

  alert(n);

}

// 찍히지 않음

// break

var a = [1, 2];

for (var i = 0; i < a.length; i++){

  if (a[i] === 1) break;

  alert(a[i]);

}

// 찍히지 않음

// continue

var a = [1, 2];

for (var i = 0; i < a.length; i++){

  if (a[i] === 1) continue;

  alert(a[i]);

}

// 2

// var 

var x = 0;

// function

function (){ ; }

// return 

function fn(){

  return this;

}

// throw

// IE 브라우저에서는 오류창에 오류라는 필드 부분에 Error객체로 생성된 문자열('aaa')이 
반환된다.

//if (true) throw new Error('aaa'); 

//try / catch / finally

try{

}

catch(e){

  alert(e.message);

}

finally{

  alert('finally');

}

// finally

// with

// 단점으로는 함수 유효범위가 확장된다.

var o = {x: 'x', y: 'y'};

with (o){

  alert(x);

  alert(y);

}

// x, y

위 예제중 with 문의 유효범위에 대한 참고 내용은 이전 포스트를 참고 하시기 바랍니다.

참고서적: (자바스크립트 핵심 가이드)

저작자표시

Posted by 전성균

자바스크립트 강좌 4 - 표현식

Javascript 2012. 3. 8. 12:11

4. 자바스크립트 표현식

1. 표현식

1 - 1. 표현식이란? 자바스크립트 인터프리터가 계산하여 값을 구할 수 있는 자바스크립트 구절을 말합니다.

1 - 2. 대부분의 연산자들은 (+)나 (-)와 같은 문장부호로 표현되지만, 일부는 'delete'나 'instanceof'와 같은
키워드로 표현됩니다.

1 - 3. 산술연산자

1 - 4. 동등연산자는 두 값을 비교하여 그들이 같은지 다른지 판단한 후 비교 결과에 따라 불리언값(true / false)를
반환합니다.

1 - 5. 관계연산자는 두값의 관계를 테스트하고 해당 관계가 존재하는지 여부에 따라 불리언값(true / false)를
반환합니다.

1 - 6. in 연산자는 좌변의 피 연산자로 문자열을 받고 우변의 피연산자로는 객체나 배열을 받습니다.

1 - 7. instanceof 연산자는 좌변의 피연산자로 객체를, 우변의 피연산자로 객체 클래스의 이름을 받습니다.

1 - 8. 문자열 연산자

1 - 9. 논리 연산자는 보통 불리언 대수를 수행합니다.

1 - 10. 비트단위 연산자

1 - 11. 할당 연산자는 변수에 값을 할당할 때 사용한다.

1 - 12. 기타 연산자

2. 예제 코드:

1. [1 - 1] 예제

// 가장 간단한 표현식은 아래와 같이 리터럴 또는 변수 이름입니다.

// 간단한 표현식을 조합하면 더 복잡한 표현식을 만들 수 있습니다.

1.7

'1.7'

true

false

null

{}

function(){ ; }

2. [1 - 3] 예제

(+)덧셈: + 연산자는 숫자 타입 피연산자의 덧셈이나 문자열 타입 피연산자의 이어 붙이기에도 쓰일 수 있습니다.

(-)뺄셈

(/)나눗셈

(%)나머지

(-)단항 마이너스: 예) -1(음수)

(+)단항 플러스: 예) +1(양수)

//(++)증가: 단항 피연산자에 대해 증가 연산을 수행한다. 예) 
i++

var i = 0;

alert(++i); // 
1;

//(--)감소: 단항 피연산자에 대해 감소 연산을 수행한다. 예) 
i--

var i = 0;

alert(--i); // 
-1

4. [1 - 4] 예제

동등(==) / 일치(===) / 부등(!=) / 불일치(!==):

두 연산자 모두 두 값이 같은지 확인하는데 쓰이지만, '같다'는 것을 정의하는 기준이 서로 다릅니다.

즉, 동등(==)연산자는 두 피연산자의 "데이터타입"과 상관없이 "값"이 같다면, true를 반환합니다.

반면 일치(===) 연산자는 두 피연산자의 "값"과 "데이터타입"이 모두 일치 해야만 ture를 반환합니다.

// 동등(==) / 일치(===) 

//undefined 와 null은 값은 같으나 데이터 타입은 다르다.

// 동등

alert(undefined == 
null); // true 

// 일치

alert(undefined === 
null); // false

// 부등(!=) / 불일치(!==) 

//undefined 와 null은 값은 같으나 데이터 타입은 다르다.

// 부등

alert(undefined != 
null); // false 

// 불일치

alert(undefined !== 
null); // true

5. [1 - 5] 예제

(<) 더 작다

(>) 더 크다

(<=) 더 작거나 같다

(>=) 더 크거나 같다

var i = 0;

alert(i < 1); // true

alert(i > 1); // false

alert(i <= 1); // true

alert(i >= 1); // false

6. [1 - 6] 예제

var o = {x: 'x값'};

alert('x' in o); // true

alert('y' in o); // false

// for in 연산자도 같은 맥락으로 이루어져 있습니다.

for (var n in 
o){

  if (Object.hasOwnProperty.call(o, 'x')){

      alert(o[n]); // 
x값

  }

}

7. [1 - 7] 예제

//o 객체 생성

function fn(){ ; };

var o = new fn();

// true: o 객체는 fn 생성자 함수로 부터 생성되었습니다.

alert(o instanceof fn); 

// true: 모든 객체는 Object 프로토타입 인스턴스를 상속받습니다. 또한 Object 
프로토타입의 생성자는 Object 생성자함수가 됩니다.

alert(o instanceof Object);

// o 객체는 Array 생성자 함수의 체인에 속하지 않습니다.

alert(o instanceof Array); 

// [] 객체는 Array 생성자 함수의 체인에 속합니다.

alert([] instanceof Array);

더 자세한 내용은 이전 포스를 참고하세요

8. [1 - 8] 예제

var str = 
'';

str 
+= 'str';

alert(str); //str

var str = 
'';

str 
= str + 
'str';

alert(str); //str

9. [1 - 9] 예제

(&&) 논리 AND

(&&) 논리 OR

(!) 논리 NOT

// 논리 AND 

var x = true;

// 첫번째 피연자와 두번째 피연산자가 모두 'true'일 경우에만 연산 결과로 ture를 
반환한다.

if (x && true) alert(x); // true

x 
&& alert(x); // true

// 논리 OR

var x = true;

// 첫번째 피연자와 두번째 피연산자 중 하나라도 true라면 연산 결과로 true를 
반환한다.

if (x || false) alert(x); // 
true

x 
|| alert(x); // true

var y = x 
|| 0;

alert(y); // true

10. [1 - 11] 예제

var x = 0;

var x = x 
|| 0;

// 이 할당식에서 주의 할점은 전역변수 y는 x와 달리 암묵적 전역변수가 된다는 것이다. 즉, y는 
명시적으로 var 선언문에 의해 선언되지 않고 0이 정의 된다는 것입니다.

// 그러므로 아래와 같이 window객체의 프로퍼티로 delete 연산자로 인해 속성에 대한 삭제가 
가능합니다.

var x = y 
= 0;

alert(typeof y); // 
number

delete y;

alert(typeof y); // 
undefined

더 자세한 내용은 이전 포스를 참고하세요

11. [1 - 12] 예제

조건부 연산자(?:): 조건부 연산자는 자바스크립트의 유일한 3항 연산자이며, 때로는 그 자체로 3항 연산자라고 불리기도
합니다.

typeof 연산자: typeof 연산자는 단일 피연산자 앞에 위치하는 단항 연산자로, 피연산자는 아무 타입이라도 무방합니다.

객체 생성 연산자(new): new 연산자는 새로운 객체를 생성하고 이를 초기화하기 위한 생성자 함수를 호출합니다.

delete 연산자: delete는 단항 연산자이며, 피연산자로 지정된 객체 프로퍼티, 배열 원소 또는 변수를 삭제 합니다.

void 연산자:

void는 단일 피연산자 앞에 쓰이는 단항 연산자로, 피연산자의 타입은 아무 타입이라도 관계가 없습니다.

이 연산자는 보통 자바스크립트 URL 요청에 많이 쓰이며, 브라우저에 평가된 값을 표시하지 않으면서 표현식을 평가할 수
있게 해줍니다.

쉼표(,) 연산자: 쉼표 연산자는 왼쪽의 전달인자를 평가하고 오른쪽의 전달인자를 평가한 후, 오른쪽 전달인자의 값을
반환합니다.

마침표(.) 연산자: 배열 원소에 접근하는 데에는 대괄호([])를 사용하면 되며, 또 객체의 맴버에 접근하는 데에는
마침표(.)를 사용합니다.

함수 호출 연산자(()): ()연산자는 자바스크립트에서 함수 호출에 사용된다.

//조건부 연산자(?:)

var x = true ? true : false; 

alert(x) // 
true

// typeof 연산자

alert(typeof x) 
//boolean

// 객체 생성 연산자

var o = new Object();

// delete 연산자

y 
= 0;

alert(typeof y); // 
number

delete y;

alert(typeof y); // 
undefined

// 쉼표 연산자

var x = 0

, y = 
0

, z = 
0;

// 마침표 연산자

var o = {x: 'x'};

var a = ['y'];

alert(o.x); // 
x

alert(a.length); // 
1

// 함수 호출 연산자

(function(){

  alert(function(){ ; }) // function{ ; };

})();

참고서적: (자바스크립트 핵심 가이드)

저작자표시

Posted by 전성균

자바스크립트 강좌 3 - 변수

Javascript 2012. 3. 7. 17:42

3. 자바스크립트 변수

1. 변수타입

1 - 1. 자바스크립트는 변수타입이 고정되어 있지 않습니다. 다시 말하면, 자바스크립트 변수는 어떠한 데이터 타입의
값이라도 담을 수 있다는 것입니다.

var x = 10;

var str = 'str';

2. 변수 선언

2 - 1. 자바스크립트 변수 선언은 var 키워드를 사용하여 선언합니다.

var x = 10;

3. 변수 선언의 반복과 생략

3 - 1. 자바스크립트는 선언되지 않은 변수에 접근하려고 하면 에러가 발생합니다.

3 - 2. 만일 var 선언문으로 선언되지 않은 변수에 값을 정의하면, 자바스크립트는 암묵적으로 그 변수를 선언합니다.
(단 암묵적 선언은 모두 전역변수로 선언됩니다.)

// 명시적 선언

var x = 10; 

// 암묵적 선언

y = 10;

4. 변수의 유효 범위

4 - 1. 변수 유효범위란 그 변수가 정의되어 있는 영역을 말합니다.

4 - 2. 전역변수의 유효범위는 "전역"이며, 함수 안에서 선언된 변수(지역변수)는 오직 그 함수 몸체 안에서만 유효합니다.

// 전역변수의 유효 범위는 전역이기 때문에 함수 내부에서 전역 x값을 수정 하였으므로 결과 적으로 20을 

반환합니다.

var x = 10;

function fnX1(){

    x = 15;

}

fnX1();

alert(x); // 15

// 함수 내부에서 x 지역변수를 선언 및 정의 하였으므로 외부 전역변수 값은 변동없이 15를 반환한다.

function fnX2(){

    var x = 20;

}

fnX2();

alert(x); // 15

5. 블록 단위의 유효 범위는 없다.

5 - 1. 자바스크립트는 블록 단위 유효범위라는 것이 존재 하지 않으며, 오로지 함수 블록에서만 유효범위가 존재합니다.

// x, y 지역변수는 블록 유효 볌위뿐만 아니라 함수 전체에 걸쳐 정의 되어있다. 즉, 블록단위 유효 범위는 존재하지 않으며, 함수 유효범위만 존재한다는 것을 알 수 있습니다.

function fn1(){

    var x = 10;

    {

        var y = 20;

    }

    if (x === 10){

        // y는 블록 내부에서 선언되었지만 함수 전체를 걸쳐 사용될수 있다.

        alert(y); // 20

    }

}

fn1(); 

// 전역변수 x

var x = 10;

function fn2(){

    // 함수 외부에 전역변수 x가 선언되어 있지만 함수 유효범위 안에서 같은 이름의 지역변수로 다시 선언되었기 때문에 alert(x)는 정의되지않은 값을 나타내는 'undefined'를 반환합니다.

    alert(x); // undefined

    var x = 10;

    {

        var y = 20;

    }

    if (x === 10){

        // y는 블록내부에서 선언되었지만 함수 전체를 걸쳐 사용될수 있다.

        alert(y); // 20

    }

}

fn2();

6. 정의 되지 않은 변수 vs 할당되지 않은 변수

6 - 1. 자바스크립트에서 정의되지 않은 변수의 첫번째 경우는 아직 선언된 적이 없는 변수입니다.(선언되지 않은 변수에 접근하면 정의 되어 있지 않다는 에러가 발생합니다.)

6 - 2. 정의되지 않은 변수의 두번째 경우는 선언은 되었으나 아직 값이 정의되지 않은 경우입니다.

// x 전역변수는 var 선언문으로 선언되었지만 아직 정의는 되지 않았기 때문에 정의되지 않은 값을 나타내는 undefined를 반환합니다.

alert(x); // undefined

var x = 10;

7. 기본 타입과 참조 타입

기본 타입: 숫자, 불리언 값, null, undefined

참조 타입: 객체, 배열

기본 타입(값타입)은 고정된 크기의 메모리를 차지합니다.

예를 들어 숫자 타입은 8바이트의 메모리를 차지하고 불리언 값은 오직 1비트만으로 표현될 수 있습니다.

숫자 타입은 모든 기본 타입 중에서 가장 크기가 크기 때문에 만일 각각의 자바스크립트 변수가 8바이트의 메모리를 할당 받는다면 어떤 기본 타입 값이라도 그 변수에 그대로 담을 수 있는 것입니다. (문자열의 경우 값타입이면서 길이가 가변적이기 때문에 여기서는 예외로 두도록 하겠습니다.)

반면 객체(참조타입)는 고정된 크기를 갖지 않으며, 담겨지는 데이터 양에 따라 크기가 달라질 수 있습니다.
즉, 객체는 크기가 고정되어 있지 않다는 것입니다.

크기가 고정되어 있지 않기 때문에 변수에 직접 저장할 수 없으며, 대신 변수에 저장되는 것은 이런 값에 대한 참조 입니다.

참조는 보통 포인터의 한 종류이거나 메모리 주소입니다. 참조는 데이터 값 자체가 아니라 그 값을 찾을 수 있는 위치를 변수에게 알려주는 것입니다.

var ref1 = 
[];

ref1[0] = 'ref1';

// 값이 아닌 참조값이 전달되기 때문에 전달받은 ref2 객체의 참조를 통해 원본 객체인 ref1 
객체가 수정될 수 있습니다.

var ref2 = 
ref1;

ref2[1] = 'ref2';

alert(ref1); // ref1, 
ref2

var ref3 = 
ref1;

alert(ref3); //ref1, 
ref2

더 자세한 내용을 원하신다면 이전 포스트를 참고 하시기 바랍니다.

참고서적: (자바스크립트 핵심 가이드)

저작자표시

Posted by 전성균

자바스크립트 강좌 2 - 데이터 타입값

Javascript 2012. 3. 7. 12:07

1. 숫자

1 - 1. 자바스크립트에서 모든 숫자는 64비트 실수 형식을 사용하여 표현한다.

1 - 2. 자바스크립트에서 10진수 정수는 숫자 시퀀스 형태로 작성된다. 따라서 -9007199254740992(-2에 53승)에서 900719925474099(2에 53승) 사이에 있는 모든 정수를 표현할 수 있다.

1 - 3. 자바스크립트는 16진수 값을 표현할 수 있다.

1 - 4. 자바스크립트는 부동소수점 리터널은 소수점을 가질 수 있다.

1 - 5. 자바스크립트 숫자변환 (자바스크립트는 숫자를 문자열 형식으로 변환하거나 문자열을 숫자로 변환할 수 있다)

1 - 6. 자바스크립트의 특수한 숫자 값 (자바스크립트에서는 몇 가지 특수한 숫자 값으로 표현된다.(Infinity, NaN))

- 예제 코드:

1. [1 - 2] 예제

alert(0) // 숫자 0

alert(3) // 숫자 3

alert(10000000000) 
// 숫자 10000000000

2. [1 - 3] 예제

alert(0xff); // 
255(10진수)

3. [1 - 4] 예제

alert(3.14); // 부동소수점 
3.14

alert(1.4738223E-32); // 1.4738223 ** 10 
-32

4. [1 - 5] 예제

alert(typeof String(3.14)); // 
string

alert(typeof Number('3')); // 
number

5. [1 - 6] 예제

alert(parseInt('a', 10)); // 값이 숫자가 아닌 경우 
NaN(Not a Number)

alert(1e309); // infinity (부동소수점 
값으로 표현 가능한 한 가장 큰 유한 수보다 더 큰 값은 무한대를 나타내는 특수값(infinity)이 
반환됩니다.)

alert(-1e309); // -infinity (부동소수점 
값으로 표현 가능한 한 가장 작은 유한 수보다 더 작은 값은 무한대를 나타내는 특수 값(-infinity)이 
반환됩니다.)

2. 문자열

2 - 1. 자바스크립트 문자열은 0개 또는 하나 이상의 Unicode 문자들이 작은따옴표(') 혹은 큰따옴표(")로 둘러싸인 시퀀스입니다.

2 - 2. 자바스크립트는 특별한 목적을 위해 역슬래시(\) 문자를 사용합니다.

2 - 3. 자바스크립트 문자열 조작

2 - 4. 숫자를 문자열로, 문자열을 숫자로 변환하기

- 예제 코드:

1. [2 - 1] 예제

alert('hello World'); // hello World

alert("hello World"); // hello World

2. [2 - 2] 예제

alert('hello\0World'); // hello<null 문자>World

alert('hello\nWorld'); // hello<줄바꿈>World

alert("hello\rWorld"); // hello<캐리지 리턴>World

alert("hello\"World"); // hello<큰따옴표>World

3. [2 - 3] 예제

// 문자열 합치기

var str = 
'World';

alert('hello ' + 
str); 
// hello World

// 첫번째 문자 가져오기

alert(('hello ' 
+ str).charAt(0)); // 
h

// 0에서 1 만큼 움직인 문자 가져오기

alert(('hello ' 
+ str).substr(0, 1)); // 
h

// 문자열의 'h' 문자 위치 가져오기

alert(('hello ' 
+ str).indexOf('h')); // 
0

4. [2 - 4] 예제

// 숫자를 문자열로

alert(typeof String(4)); // 
string

// 문자열을 숫자로

alert(typeof Number('4')); // 
number

alert(typeof parseInt('4', 10)); // 
number

alert(typeof parseFloat('4.1')); // 
number

3. 불리언

3 - 1. 불리언 데이터 타입은 오직 2개의 값만을 가질 수 있다.

3 - 2. 불리언 타입 변환

- 예제 코드:

1. [3 - 1] 예제

alert('a' === 'a'); // 
true

alert('a'.constructor === 'a'.constructor); // true

alert(true); // 
true

alert(false); // 
false

2. [3 - 2] 예제

alert(Boolean('a' === 'a')); // true

alert(!!'a'); // false

4. 함수

4 - 1. 자바스크립트 프로그램에 정의되어 있거나 자바스크립트 구현에 미리 정의되어 있는
실행 가능한 코드.

4 - 2. 함수 리터널

- 예제 코드:

1. [4 - 1] 예제

function fn(){

  return this;

}

alert(typeof fn) 
// fucntion

1. [4 - 2] 예제

// 함수 리터널 문법 (아래와 같이 익명 함수를 프로그램 내에 리터널 형태로 포함 시킬 수 
있다.)

var fn = function(){ return this; };

alert(typeof fn) 
// fucntion

// new 연산자와 Function 생성자 함수를 이용하여 함수객체를 생성합니다.(이 방법은 함수 
몸체를 문자열로 표현하는 것이 불편하기 때문에 그리 유용하지 않은 방법이다)

var fn = new Function('', 'return this;');

alert(typeof fn) 
// fucntion

5. 객체

5 - 1. 객체는 이름 붙은 값(맴버)들의 모음입니다.

5 - 2. 객체 생성

5 - 3. 객체 리터널

- 예제 코드:

1. [5 - 2] 예제

// 객체 생성

var obj = 
new Object(

{

  member1: 'member1',

  member2: function(){

      return this.member1;

  }

});

alert(obj.member2()); // 
member1

var date = 
new Date();

alert(date.getDate()); // 
date

2. [5 - 3] 예제

// 객체 리터널

var obj = 

{

  member1: 'member1',

  member2: function(){

      return this.member1;

  }

};

alert(obj.member2()); // 
member1

6. 배열

6 - 1. 배열은 객체처럼 데이터 값들의 모음입니다.

6 - 2. 객체 생성

6 - 3. 객체 리터널

- 예제 코드:

// 객체 생성

var arr = 
new Array([0]);

alert(arr[0]); // 
0

2. [6 - 3] 예제

// 객체 리터널

var arr = 
[0]

alert(arr[0]); // 
0

7. null

7 - 1. 자바스크립트 키워드 null은 아무런 값도 나타내지 않는 특수한 값이다. null은 보통 객체 타입의 특수한 값, 즉 어떠한 객체도 나타내지 않는 값으로 취급한다.

- 예제 코드:

1. [7 - 1] 예제

var obj = 
null;

obj 
= {};

alert(typeof obj); // object

8. undefined

8 - 1. 자바스크립트에서 종종 사용되는 또 다른 특수한 값으로 undefined 값이 있다. undefined는 선언은 되었지만, 값이 정의되지 않은 변수에 접근하거나 존재하지 않는 객체의 프로퍼티에 접근할 경우 반환되는 값이다.

- 예제 코드:

1. [8 - 1] 예제

// 선언은 되었지만 값이 정의되지 않은 변수에 접근

alert(x) // undefined

var x = 0;

// 존재하지 않는 객체의 프로퍼티에 접근

var obj = 
{};

alert(obj.a); // undefined

참고서적: (자바스크립트 핵심 가이드)

저작자표시

Posted by 전성균

자바스크립트 강좌 1 - 어휘구조

Javascript 2012. 3. 6. 18:18

1. 어휘구조:

1 - 1. 자바스크립트는 Unicode 문자 집합을 사용하여 작성됩니다.

1 - 2. 자바스크립트는 대소문자를 구분합니다.

1 - 3. 자바스크립트는 선택적인 세미콜론 삽입이 가능합니다.

1 - 4. 자바스크립트 주석

1 - 5. 자바스크립트 리터널(프로그램에 상에서의 데이터값)

2. 예제 코드:

2 - 1. [1 - 3 예제]:

자바스크립트에서 세미콜론은 각 문장을 구분하는 역할을 합니다.

하지만 아래 코드처럼 return 과 'test' 문장이 서로 다른 줄에 있는 경우 자바스크립트는 임의로 세미콜론을 return 문장 줄에 삽입해 버립니다.

하지만 이런 설계 덕분에 아래 코드의 반환 값('undefined')처럼 의도치 않은 결과가 나올 수 도 있습니다.

alert((function(){
    return function newLine(){
        return
        'test';
    }
})()()); // undefined(return 문장에서의 줄 바꿈 때문에 의도하지 않은 결과가 반환된다.)
 
 
// 아래 코드는 return 과 'test' 라는 문장을 한 줄로 삽입하여 의도한 반환 값 'test'를 얻어낸 결과입니다.
 
alert((function(){
    return function newLine(){
        return 'test';
    }
})()()); // test

2 - 2. [ 1 - 4 예제]

// 한 줄 주석
 
/* 
 
여러 줄 주석
 
*/

2 - 3. [ 1 - 5 예제]

alert(12) // 숫자 12
alert(1.2) // 숫자 1.2
alert('hello world') // 문자열
alert(true) // 불리언 (true)
alert(false) //  불리언 (false)
alert(/^[\w]$/gi); // 정규 표현식
alert(null); // 객체가 존재하지 않음
 
alert({}) // 객체 리터널
alert([]) // 배열 리터널
alert(function(){ }) // 함수 리터널