Home > JavaScripFile
TITLE    자바스크립트 완벽가이드 7장 객체와배열
작성자 강춘희 날짜 2013.01.25 조회수 0

객체 생성하기

 객체는 여러 값들을 결합한 것으로서 각 값에 붙은 이름을 사용하여 원하는 값을 저장하고 읽어올 수 있다. , 이름과 값으로 구성된 프로퍼티들의 집합이라고 할 수 있다.

 객체를 생성하는 가장 쉬운 방법은 객체 리터럴을 사용하는 것이다.

객체 리터널

중괄호(curly brace, { })안에 이름과 값을 한 쌍으로 하는 프로퍼티들을 콤마로 분리하여 연결한 리스트.

 

 var empty = {};  // 아무런 Property도 가지고 있지 않다.

 var point = {x:0, y:0};

 var stuent = {

"name": "zidarn",

"age" : 25,

'email' : "zid...@naver.com"

};

//new 연산자 사용

 var a = new Array();  // 빈 배열 생성

 var d = new Date();   // 현재 날짜와 시간을 나타내는 객체 생성

 var r = new RegExp("javascript", "i");  // 패턴 매칭을 위한 객체 생성

// new 연산자 뒤에는 객체의 프로퍼티들을 초기화하는 생성자 함수의 호출이 뒤따라야 한다.

 

 

객체 프로퍼티

 객체 Property 값에 접근하기 위해서는 마침표(.) 연산자를 사용한다.

 // 객체를 생성하고 객체에 대한 참조를 변수 book에 저장

 var book ={};

// 객체의 프로퍼티 설정

 book.title = "HelloJavascript";

 // 중첩된 객체 사용

 book.chapter1 = new Object();

 book.chpter1.title = "Introduction";

 // 객체에서 Property 값 읽기

 alert("Title : " + book.title + " " +

        "Chapter 1 Title :" + book.chapter1.title + " ");

 // Property 존재 확인

 if("title" in book) book.title = "HiJavascript";

 // Property 삭제

 delete book.chapter1;

 

for/in 루프 사용.

  - 객체의 각 프로퍼티에 대한 작업을 반복적으로 수행

for(var i in book) {   

if(book.hasOwnProperty(i)) {      

console.log(i, ":", book[i]);   

}

}

 

연관 배열로서의 객체

* 연관배열

- 정수형의 인덱스키 대신 문자열이나 객체키를 이용하여 값(객체)에 접근한다

-최상위 객체인 Object를 통해 생성하거나 Array 생성자를 사용한 다음 [] .를 사용하여 배열에 키/쌍을 추가한다.

(key-value)=속성(property)을 하나의 쌍으로 표현한다

 

객체 프로퍼티에 접근

object.property

    - 프로퍼티 이름이 식별자

      * 식별자

        - 자바스크립트 프로그램에 직접 표기하는 이름.

        - 데이터 타입이 아니기 때문에 실행 시간에 조작할 수 없다.

  □ object[“property”]

    - 프로퍼티 이름을 문자열로 표현.

      * 문자열

        - 자바스크립트 데이터 타입.

        - 프로그램이 실행되는 동안 새롭게 생성되고 조작될 수 있다.

 book.title    ==  book["title"]

 

공통적으로 나타나는 객체 프로퍼티와 메서드

Date() Array() 같은 특수한 객체들에는 각각 고유한 프로퍼티와 메서드가 있음

 constructor Property

 객체를 초기화하는데 사용되는 생성자 Property

 var d = new Date();// d object 형식의 Date의 인스턴스객체이다

 d.constructor == Date;   // true

 toString() method

 객체의 값을 어떠한 방식으로든 표현하느 문자열을 만들어 결과로 반환

 var s = {x:1, y:1}.toString();

 toLocaleString() method

 객체의 지역화된 문자열 표현을 제공

var date = new Date();

 

str1 = date.toString();

str2 = date.toLocaleString();

 

document.writeln(str1);  // Sun Jun 17 15:29:57 UTC+0900 2012

document.writeln(str2);  // 2012 6 17일 일요일 오후 3:29:57

 valueOf() method

 문자열이 아니라 숫자 같은 다른 기본 타입으로 변환하려 할 때 호출

tmp = date.valueOf() 

document.writeln(tmp);  // 1339914958020

 hasOwnProperty() method

 Property의 이름을 담는 한 개의 문자열 전달인자를 받아서 객체가 이 Property를 소유하고 있는지 검사

obj 객체에  존재하는 프로토타입에서 속성의 존재여부를 확인 (자기자신이 가지고 있는 프로퍼티만 조회)

 var o ={};

 o.hasOwnProperty("toString");  // false : toString은 상속받은 Property이다.

 Math.hasOwnProperty("sin");   // true : Math 객체에 sin Property 존재

isPrototypeOf() 메서드

-객체가 전달인자로 주어진다.

- 해당 메서드의 객체가 전달인자로 주어진 객체의 프로토타입 객체라면 true를 반환, 그렇지 않으면 false 반환.

var o = {};

Object.prototype.isPrototypeOf(o);  // true. o.constructor == Object

Object.isPrototypeOf(0); // false.

o.isPrototypeOf(Object.prototype);  // false.

Function.prototype.isPrototypeOf(Object); // true. Object.constructor == Function

 propertyIsEnumerable() method

 hasOwnProperty() method와 마찬가지로 Property의 이름을 담은 문자열 전달인자를 하나 받아서, 이 이름의 Property를 객체가 상속받지 않고 직접 지역적으로 정의했는지 검사

 var o = {x:1};

 o.propertyIsEnumerable("x");   // true : Property가 존재하고 열거 가능

 o.propertyIsEnumerable("y");   // false : Property가 존재하지 않음

 o.propertyIsEnumerable("valueOf"); // false : valueOf는 상속받은 Property 

 

배열

- 배열생성

- 순서 있는 값들의 집합..

 var empty=[];                             // 빈 배열  

 var odds=[2,4,6,8,10];                 // 숫자 값들로 이루어진 배열

 var random=[5.5, true, "hello"];     // 서로 다른 타입을 가진 3개의 원소로 구성된 배열

 var a=[[1,2], [3,4]];                    // 배열 리터럴은 또 다른 배열 리터럴을 포함가능

var base = 1024;

var table = [base, base+1, base+2, base+3]; // 상수뿐만 아니라 임의의 표현식도 사용.

var b = [ [1, { x:2, y:4}], [2, {x:3, y:5}] ]; //객체 리터럴이나 또 다른 배열 리터럴을 포함할 수 있다.

// 배열 리터럴의 콤마 사이에 아무것도 적지 않으면 정의되지 않은 원소가 생성

var count = [1, , 3];  // 원소는 3. 가운데 원소는 정의되지 않았다.

var undefs = [ , , ];  // 원소는 2. 두 원소 모두 정의되지 않았다.

 var b=new Array();                      // 아무 원소도 없는 빈 배열 생성

 var c=new Array(10);                      // 지정된 숫자크기의 배열 생성

 배열  원소 읽고 쓰기

배열 원소에 접근

  - [ ] 연산자 사용.

  - [ ] 연산자의 좌측에는 배열에 대한 참조가 위치.

  - [ ] 사이에는 음수가 아닌 정수 값으로 평가되는 임의의 표현식.

value = a[0];

a[1] = 3.14;

i = 2;

a[i] = 3;

a[i+1] = “hello”;

a[a[i]] = a[0];

  - [ ] 연산자는 객체의 이름 붙은 프로퍼티에 접근하려 할 때도 사용.

my[‘salary’] = *= 2;

  - 배열 인덱스에 너무 큰 수나 음의 정수, 부동소수점 값, 불리언 값과 같은 다른 값을 인덱스로 사용하면 자바스크립트 

    는 이를 문자열로 변환하고 객체 프로퍼티 이름으로 간주. (더 이상 배열 인덱스가 아니다.) 

a[-1.23] = true;

배열에 새로운 원소 추가

  - 임의 개수의 원소를 가질 수 있으며 원소의 개수는 언제든 변경할 수 있다.

  - 배열에 새로운 원소를 추가하려면 그 값을 할당하기만 하면 된다.

a[10] = 10;

  - 배열 인덱스틑 연속적이지 않아도 된다.

  - 자바스크립트는 배열에 실제로 저장된 원소들에 대해서만 메모리를 할당하도록 구현.

a[0] = 1;

a[10000] = “this is element 10,000”;

/*

0번 인덱스와 10000인덱스를 위해서만 메모리를 할당.

9,999개의 인덱스에 대해서는 메모리를 할당하지 않는다.

*/

  - 배열 원소는 객체에도 추가될 수 있다.

    (그렇다고 객체가 배열이 되지는 않는다.)

var c = new Circle(1, 2, 3);

c[0] = “this is an array element of an object!”; 

/*

c[0]은 객체의 배열 원소.

단지 객체에 “0”이라는 이름의 프로퍼티를 추가.

*/

 배열 원소 삭제

  - delete연산자를 사용하면 배열 원소의 값을 undefined 값으로 설정.

    (배열 원소 그 자체는 사라지지 않고 여전히 존재.)

  - 배열 원소를 완전히 삭제하고 삭제한 배열 원소의 뒤쪽에 위치한 원소들을 앞쪽(to lower indexs)으로 옮겨서 저장 

    하려면 배열 베서드를 사용. 

  - Array.shift() 메서드 : 배열의 첫 번째 원소를 삭제.

  - Array.pop() 메서드 : 배열의 마지막 원소를 삭제.

  - Array.splice() 메서드 : 연속된 범위 안의 원소들을 일괄적으로 삭제.

배열의 길이

  - 모든 배열에는 이 배열에 있는 원소의 수를 알려주기 위한 length 프로퍼티 존재.

  - length 프로퍼티는 배열 안에서 가장 큰 인덱스 값 + 1.

  - length 프로퍼티는 배열에 새로운 요소가 추가될 때마다 자동으로 갱신.

var a = new Array();  // a.length == 0 (아무런 원소도 정의되어 있지 않다.)

a = new Array(10);  // a.length == 10 (빈 원소가 0부터 9까지 정의)

a = new Array(1,2,3);  // a.length == 3 (원소가 0부터 2까지 정의)

a = [4, 5];  // a.length == 2 (원소 0, 1번이 정의)

a[5] = -1;  // a.length == 6 (원소 0, 1, 5번이 정의)

a[49] = 0;  // a.length == 50; (원소 0, 1, 5, 49번이 정의)

배열 순회

  - length 프로퍼티를 사용하여 순회.

var fruits = [“mango”, “banana”, “cherry”, “pear”];

for( var i=0 ; i

{

document.writeln(fruits[i]);

}

 

for( var i=0 ; i

{

if( fruits[1] )

  document.wirte(fruits[i]);

}

 

var lookup_table = new Array(1024);

for( var i=0 ; i  // 배열 원소 초기화

{

  lookup_table[i] = i * 512;

}

배열의 크기 조절

  - 배열의 length 프로퍼티는 읽고 쓸 수 있는 값.

  - length 프로퍼티를 현재의 값보다 작게 설정하면 배열은 그 새로운 길이로 축소.

  - length 프로퍼티를 작게 설정하면 새롭게 설정된 배열의 길이를 벗어나는 위치의 원소들은 버려지고 그 원소들의  값은 전부 읽어버린다. 

  - length 프로퍼티를 현재의 값보다 크게 설정하면 배열의 끝 부분에 정의되지 않은 원소들이 추가되면서 배열이  

    새로운 길이로 늘어난다. 

다차원 배열

  - 원칙적으로는 다차원 배열을 지원하지 않는다.

  - 배열의 배열을 사용하여 효과적으로 다차원 배열을 흉내 낼 수 있다.

  - 배열의 배열에서 원소에 접근하기 위해서는 [ ] 연산자를 두 번 사용.

var table = new Array(10);

for( var i=0 ; i

{

  table[i] = new Array(10);  // 다차원 배열 생성.

}

 

for( var row=0 ; row

{

for( col=0 ; col< table[row].length ; col++ )

{

  table[row][col] = row * col;  // 배열 초기화.

}

}

 

var product = table[5][7];  // 35

 

배열 메서드

 join()

 배열의 모든 원소를 문자열로 변환하고 이어 붙여서 반환

 var a = [1,2,3];   

 var s = a.joing();  // s == "1,2,3"

 reverse()

 배열 안의 원소 순서를 반대로 정렬하여 반환

 var a = new Array(1,2,3);

 a.reverse();         // a == "3,2,1"

 var s = a.join();    // s == "3,2,1"

 concat()

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

 var a = [1,2,3];

 a.concat(4,5);  // [1,2,3,4,5]를 반환

 slice()

 배열의 일부분 혹은 부분 배열을 반환

 var a = [1,2,3,4,5];

 a.slice(0,3);    // [1,2,3]을 반환

 a.slice(3);       // [4,5]를 반환

 a.slice(1,-1);   // [2,3,4]를 반환

 splice()

 배열에 원소를 삽입하거나 원소를 제거하려 할때 사용

 var a= [1,2,3,4,5,6,7,8];

 a.splice(4);     // [5,6,7,8] 반환, a=[1,2,3,4]

 a.splice(1,2);   // [2,3] 반환, a=[1,4]

 a.splice(1,1);   // [4] 반환, a=[1]

 push(), pop()

 배열을 스택처럼 사용, push()는 원소를 배열의 끝부분에 붙이고, pop()은 반대로 배열의 마지막 원소를 제거

 var stack=[];

 stack.push(1,2,3,4);    // stack=[1,2,3,4]

 stack.pop();               // stakc=[1,2,3]

 unshift(), shift()

 배열의 맨앞에서 원소를 삽입하고 제거

 var a=[];

 a.unshift(1,2,3);  // a=[1,2,3]

 a.unshift(4);       // a=[4,1,2,3]

 a.shift();            // a=[1,2,3]

 toString()

 toString()은 배열의 모든 원소를 문자열로 변형 

 var a=[1,2,3];

 a.toString();     // 결과는 '1,2,3'

[출처] [자바스크립트] 객체와 배열|작성자 IT바이블

 

배열의 모든 원소에 대하여 지정된 함수를 호출.

  □ map()

    - 배열의 각 원소에 지정된 함수를 호출하여 얻은 결과를 원소로 하는 배열을 반환.

  □ filter()

    - 지정된 술어 함수(predicate function) true를 반환하는 원소들로 구성된 배열을 반환.

      * 술어 함수(predicate function)

        - 불이언 값(참 또는 거짓)을 반환하는 함수.

배열과 유사한 객체

■ length 프로퍼티

  - 배열에 새로운 원소가 추가될 때마다 자동으로 갱신.

  - 프로퍼티 값을 임의로 설정함으로써 배열의 크기를 확장하거나 축소할 수 있다.

■ Array 클래스

  - 자바스크립트의 배열은 Array 클래스의 인스턴스(instanceof Array).

  - 배열을 통해 Array 클래스의 다양한 메서드를 호출.

var a = {};

 

// 배열과 유사한 객체로 만들기 위해 프로퍼티들을 추가.

var i = 0;

while( i < 10 )

{

a[i] = i * i;

i++;

}         

 

a.length = i;

 

// 실제 배열인 것처럼 반복문 수행.

var total = 0;

for( var j=0 ; j

{

  total += a[i];

}

 [출처] 7장. 객체와 배열|작성자 외계인셩

 

list
NO TITLE NAME DATE
6 자바스크립트 완벽가이드 7장 객체와배열 강춘희 2013.01.25
5 자바스크립트 완벽가이드 6장 문장 김대근 2013.01.24
4 자바스크립트 완벽가이드 5장표현식과 연산자 김원석 2013.01.24
3 자바스크립트 완벽가이드 4장 변수 김세라 2013.01.11
2 [자바스크립트 완벽가이드] 3장. 데이터 타입과 값 이승제 2012.12.27
1 과제를 올려주세요 관리자 2012.12.10
 1 
1