객체 생성하기
객체는 여러 값들을 결합한 것으로서 각 값에 붙은 이름을 사용하여 원하는 값을 저장하고 읽어올 수 있다. 즉, 이름과 값으로 구성된 프로퍼티들의 집합이라고 할 수 있다.
객체를 생성하는 가장 쉬운 방법은 객체 리터럴을 사용하는 것이다.
객체 리터널
중괄호(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]; |
- [ ] 연산자는 객체의 이름 붙은 프로퍼티에 접근하려 할 때도 사용.
- 배열 인덱스에 너무 큰 수나 음의 정수, 부동소수점 값, 불리언 값과 같은 다른 값을 인덱스로 사용하면 자바스크립트
는 이를 문자열로 변환하고 객체 프로퍼티 이름으로 간주. (더 이상 배열 인덱스가 아니다.)
■ 배열에 새로운 원소 추가
- 임의 개수의 원소를 가질 수 있으며 원소의 개수는 언제든 변경할 수 있다.
- 배열에 새로운 원소를 추가하려면 그 값을 할당하기만 하면 된다.
- 배열 인덱스틑 연속적이지 않아도 된다.
- 자바스크립트는 배열에 실제로 저장된 원소들에 대해서만 메모리를 할당하도록 구현.
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장. 객체와 배열|작성자 외계인셩
|