객체 object - 1( 객체란? / for in 반복문 / in, with 키워드)

여러 변수를 한꺼번에 모아 사용하는 자료형에는 배열이 있다.

하지만 자바스크립트 기본 자료형은 숫자, 문자, 불, 객체, 함수, undefined로 배열이라는 자료형은 없다.

alert(typeof([]));

코드를 실행하면 object임을 확인할 수 있다.

이 때 출력된 object가 바로 '객체' 이다.

 

객체 개요

var array = ['사과', '바나나', '망고', '딸기'];

배열에는 '인덱스'와 '요소'가 있다.

각각의 배열요소를 사용하려면 다음과 같이 배열 이름뒤에 인덱스로 접근한다.

var array = ['사과', '바나나', '망고', '딸기'];
array[0] // 사과
array[2] // 망고

배열은 객체를 기반으로 만들어졌으므로 배열과 객체는 상당히 유사하다.

다른점이 있다면 배열은 요소에 접근할 때 인덱스를 사용하지만, 객체는 키를 사용한다.

 

객체는 다음과 같이 {중괄호}로 생성한다.

 

여기서 잠깐!

자바에서는 배열을 생성하고 배열을 담아주는 기호가 {중괄호} 이지만 자바스크립트에서는 [대괄호]에 담는다는 차이점이 있다.

 

var product = {
    제품명 : 'fc750rbt'
    , 유형 : '키보드'
    , 성분 : 'PBT'
    , 제조사 : '레오폴드'
}

위와같이 생성된 객체는 아래 표와같이 키와 속성으로 구분한다.

키	속성
제품명	fc750rbt
유형	키보드
성분	PBT
제조사	레오폴드

표를 보면 배열과 상당히 유사하다.

객체의 요소에 접근하는 것도 배열과 비슷한 방법을 사용한다.

다음과 같이 객체 뒤에 대괄호를 사용하고 키를 표시하면 객체의 요소에 접근할 수 있다.

 

product['제품명'] // 'fc750rbt'
product['유형'] // '키보드'
product['성분'] // 'PBT'
product['제조사'] // '레오폴드'

위와같이 대괄호를 사용하는 방법이 있지만, 일반적으로 아래와같은 방법을 더 많이 사용한다.

product.제품명 // 'fc750rbt'
product.유형 // '키보드'
product.성분 // 'PBT'
product.제조사 // '레오폴드'

객체의 키는 식별자 또는 문자열 모두 사용이 가능하다.

만약 식별자로 사용할 수 없는 단어를 키로 사용할 경우 아래와 같이 문자열을 사용한다.

var product = {
    'name' : 'fc750rbt'
    , 'type' : '키보드'
    , 'ingredient' : 'PBT'
    , 'company' : '레오폴드'
}

이와 같이 식별자가 아닌 문자를 키로 사용했을 때는 무조건 대괄호를 사용해야 객체의 요소에 접근할 수 있다.

product['name'] // 'fc750rbt'
product['type'] // '키보드'
product['ingredient'] // 'PBT'
product['company'] // '레오폴드'

속성과 메서드

배열 내부에 있는 값을 요소(element) 라고 부른다.

반면 객체 내부에 있는 값은 속성(property)이라고 부른다.

배열의 요소와 마찬가지로 객체의 속성도 다음과같이 모든 형태의 자료형을 가질 수 있다.

var object = {
    number : 273
    , string : '이칠삼'
    , boolean : 'false'
    , array : [52, 273, 103, 32]
    , method : function (value) {
        alert('object 객체의 string 키의 속성 : ' + this.string + ' \n매개변수 값 : ' + value)
    }
}

object.method('문자열');

객체의 속성 중 함수 자료형인 속성을 특별히 메서드라고 부른다.

위 코드에서 객체 object는 method속성은 함수 자료형이므로 특별히 method( ) 메서드 라고 부른다.

만약 메서드 내에서 자기 자신이 가진 속성을 출력하고 싶을 때는 자신이 가진 속성임을 분명하게 표시해야한다.

자기 자신이 가진 속성이라는 것을 표시할 때는 this키워드를 사용한다.

 

함수를 호출할 때는 아래와 같이 호출한다.

object.method('문자열');

var object = {
    number : 273
    , string : '이칠삼'
    , boolean : 'false'
    , array : [52, 273, 103, 32]
    , method : function (value) {
        alert('object 객체의 string 키의 속성 : ' + this.string + ' \n매개변수 값 : ' + value)
    }
}

object.method('문자열');

 

객체와 반복문

배열은 단순 for 반복문과 for in 반복문으로 요소에 쉽게 접근할 수 있다.

하지만 객체는 단순 for 반복문으로 객체의 속성을 살펴보는 것이 불가능하다.

객체의 속성을 모두 살펴보려면 for in 반복문을 사용해야 한다.

var object = {
    number : 273
    , string : '이칠삼'
    , boolean : 'false'
    , array : [52, 273, 103, 32]
    , method : function (value) {
        alert('object 객체의 string 키의 속성 : ' + this.string + ' \n매개변수 값 : ' + value)
    }
}

var output1 = '';
for (var key = object) {
    output1 += key + ' : ' + object[key] + '\n'; 
}

console.log(output1);

for in 반복문에 객체를 넣으면 객체의 요소 개수만큼 반복문을 실행한다.

이때 변수의 key에는 객체의 키가 들어간다.

따라서 코드를 실행하면 다음과같이 객체의 키와 속성을 모두 출력한다.

 

객체 관련 키워드

객체와 관련된 키워드는 in과 with가 있다.

 

in키워드

in키워드를 for키워드와 별도로 사용하면 해당 키가 객체안에 있는지 확인할 수 있다.

 

var object = {
    number : 273
    , string : '이칠삼'
    , boolean : 'false'
    , array : [52, 273, 103, 32]
    , method : function (value) {
        alert('object 객체의 string 키의 속성 : ' + this.string + ' \n매개변수 값 : ' + value)
    }
}

console.log('number' in object);
console.log('string' in object);
console.log('boolean' in object);
console.log('array' in object);
console.log('method' in object);

'홑따옴표' 안에 '키이름' 을 넣고 in 객체명 과 같이 코드를 구현하면 다음과 같은 결과를 출력한다.

object 객체 안에 5가지 각각의 키가 들어있으면 true를 반환한다.

 

 

with키워드

with 키워드는 복잡하게 사용해야 하는 코드를 짧게 줄여주는 키워드이다.

다음과 같이 객체의 속성을 출력할 때 식별자 object를 여러번 사용하면 코드가 굉장히 복잡해진다.

var object = {
    number : 273
    , string : '이칠삼'
    , boolean : 'false'
    , array : [52, 273, 103, 32]
    , method : function (value) {
        alert('object 객체의 string 키의 속성 : ' + this.string + ' \n매개변수 값 : ' + value)
    }
}

console.log(object.number);
console.log(object.string);
console.log(object.boolean);
console.log(object.array);
console.log(object.method);

위와 같은 상황에서 with 키워드를 사용한다.

with 키워드는 다음과 같은 형태로 사용한다.

with(객체){
    console.log(객체에 존재하는 키이름);
}

아래와 같이 코드를 구성하고 실행한다.

var object = {
    number : 273
    , string : '이칠삼'
    , boolean : 'false'
    , array : [52, 273, 103, 32]
    , method : function (value) {
        alert('object 객체의 string 키의 속성 : ' + this.string + ' \n매개변수 값 : ' + value)
    }
}
with(object){
    console.log(number);
    console.log(string);
    console.log(boolean);
    console.log(array);
    console.log(method);
}

결과적으로 with를 사용하지 않았을 때와 같은 결과를 얻을 수 있게 된다.

 

with 키워드를 사용할 때 주의할 점이 있다.

var object = {
    number : 273
    , string : '이칠삼'
    , boolean : 'false'
    , array : [52, 273, 103, 32]
    , output : function (value) {
        alert('object 객체의 string 키의 속성 : ' + this.string + ' \n매개변수 값 : ' + value)
    }
}
var output = '';
with(object){
    output += number + string + boolean + array;
}
console.log(output);

위와같이 객체의 속성이름과 외부변수의 이름이 output으로 같으면 충돌이 발생하여 아무것도 출력하지 않는다.

이 경우 자바스크립트는 객체의 속성에 존재하는 output을 우선한다.