[ Javascript ] 객체 ( Object )

객체[Ojbect]

객체는 자바스크립트의 기본 자료형인 숫자, 문자열, 불, 객체, 함수, undefined중 한가지입니다.

키(key)와 값(value)으로 구성된 프로퍼티(Property)들의 집합입니다. 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있습니다.

 

중요 용어

• 속성 : 객체가 가진 값을 의미합니다.
• 메서드 : 객체가 가진 속성 중에 함수 자료형인 것을 의미합니다.
• JSON( JavaScript Object Notation ) : 자바스크립트 객체 표현 방식을 사용해 데이터를 표현하는 방법을 의미합니다.

 

객체와 배열의 관계

배열은 객체의 일부입니다.

 

배열의 자료형 확인해보기

console.log(typeof([])); // object

배열을 typeof()로 실행해보면 object를 출력합니다. 이때 나오는 object가 바로 객체입니다.

 

배열 선언하기 예

var array = ['사과', '귤', '바나나', '파인애플', '딸기'];

배열을 선언하면 배열 내에는 '인덱스'와 '요소'가 생깁니다. 각각의 '요소'를 사용하려면 아래처럼 배열 이름 뒤에 '인덱스'로 접근하면 됩니다.

 

인덱스로 요소에 접근하기 예

var array = ['사과', '귤', '바나나', '파인애플', '딸기'];

console.log(array[0]); // 사과
console.log(array[4]); // 딸기

배열은 객체를 기반으로 만들어졌기 때문에 배열과 객체는 상당히 비슷합니다. 다른 점은 배열은 요소에 접근할 때 인덱스를 사용하지만, 객체는 키를 사용한다는 점입니다.

 

객체 생성하기 예

var product = {
    제품: 'Mac M1',
    생성날짜: '2022.06.09',
    가격: '3,000,000원'
}

 

위 코드는 아래 표처럼 표현할 수 있습니다.

 

표로 나타낸 객체

키	속성
제품	Mac M1
생성날짜	2022.06.09
가격	3,000,000원

 

객체에 접근 하는 방법은 아래와 같습니다.

var product = {
    제품: 'Mac M1',
    생성날짜: '2022.06.09',
    가격: '3,000,000원'
}

console.log(product); // 전체를 불러오기
console.log(product['제품']); // Mac M1
console.log(product.제품); // Mac M1

대괄호를 사용하는 방법과 .를 붙여서 바로 쓰는 방법이 있는데, 일반적으로는 .를 붙여서 사용하는 방법을 많이 사용한다고 합니다.

 

객체의 키는 식별자 또는 문자열을 모두 사용할 수 있습니다. 대부분 식별자로 키를 사용하지만, 식별자로 사용할 수 없는 단어를 키로 사용할 때는 아래처럼 사용합니다.

 

문자열을 키로 사용하는 예

var product = {
    "with space" : 273,
    "with ~!@#$%^&*()_+" : 52
}

console.log(product['with ~!@#$%^&*()_+']); // 52

위 코드처럼 식별자가 아닌 문자를 키로 사용했을 때는 무조건 대괄호를 사용해야 객체 요소에 접근할 수 있습니다.

 

---

 

속성과 메서드

배열 내부에 있는 값을 요소(Element)라고 합니다. 반면 객체 내부에 있는 값은 속성(Property)라고 합니다.

:: 다른 프로그래밍 언어에서는 차이가 있기 때문에 요소와 속성이라고 구분해서 부르지만, 자바스크립트는 요소와 속성이 다르지 않습니다. 다른 프로그래밍 언어에서 사용하던 용어 습관때문에 구분해서 부른다고 생각하면 됩니다.

 

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

 

객체의 속성이 가질 수 있는 자료형 예

var object = {
    number: 273,
    string: "Rink",
    boolean: true,
    array: [52, 273, 5, 1],
    method: function() {}
}

객체의 속성중에서 함수 자료형인 속성을 특별히 메서드(method)라고 부릅니다. 

 

속성과 메서드의 구분 예

var person = {
    name: 'shiro',
    eat: function(food) {}
};

// 메서드 호출
person.eat();

위 코드에서 person은 name속성과 eat속성이 있으며, eat속성은 함수 자료형이기 때문에 eat()메서드라고 부릅니다.

 

this키워드 예

var person = {
    name: 'shiro',
    eat: function(food) {
        console.log(this.name + '가 ' + food + '을/를 먹습니다.'); // shiro가 밥을/를 먹습니다.
    }
};

// 메서드 호출
person.eat('밥');

메서드 내에서 자기 자신이 가진 속성을 출력하고 싶을 때는 자신이 가진 속성임을 분명하게 표시해야 합니다. 자기 자신이 가진 속성이라는 것을 표시할 때는 this키워드를 사용해야합니다.

 

---

 

객체와 반복문

배열은 단순 for 반복문과 for in 반복문으로 요소에 쉽게 접근할 수 있습니다. 하지만, 객체는 단순 for 반복문으로 객체의 속성을 살펴보는 것이 불가능합니다. 객체의 속성을 모두 살펴보려면 for in 반복문을 사용해야 합니다.

 

객체와 반복문 예

var person = {
    name: 'shiro',
    age: 30,
    residence: '의정부',
    gender: '남성'
};

var output = '';
for(let key in person) {
    output += '- ' + key + ': ' + person[key] + '\n';
}

console.log(output);

/*
- name: shiro
- age: 30
- residence: 의정부
- gender: 남성
*/

위 코드는 객체를 만들고 for in 반복문으로 배열의 속성을 모두 출력합니다.

for in 반복문에 객체를 넣으면 객체의 요소 개수만큼 반복문을 실행합니다. 이때 변수 key에는 객체의 키가 들어가므로 코드를 실행하면 위처럼 객체의 키와 속성을 모두 출력합니다.

 

---

 

in 키워드

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

 

in키워드 예

var output = '', student = { 이름 : '연', 국어: 100, 수학: 93, 과학: 99, 영어: 50 };

output += "'이름' in student: " + ('이름' in student) + '\n';
output += "'성별' in student: " + ('성별' in student);

console.log(output);

/*
'이름' in student: true
'성별' in student: false
*/

위 코드를 실행하면 이름속성은 존재하므로 true를 출력하고 성별속성은 존재하지 않으므로 false를 출력합니다.

 

---

 

with 키워드

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

 

with키워드 형태

with(<객체>) {
    <내용>
}

 

with키워드를 사용하지 않은 경우 예

var output = '', student = { 이름 : '연', 국어: 100, 수학: 93, 과학: 99, 영어: 50 };

output += '이름: ' + student.이름 + '\n';
output += '국어: ' + student.국어 + '\n';
output += '수학: ' + student.수학 + '\n';
output += '과학: ' + student.과학 + '\n';
output += '영어: ' + student.영어 + '\n';
output += '총점: ' + (student.국어 + student.수학 + student.과학 + student.영어);

console.log(output);

/*
이름: 연
국어: 100
수학: 93
과학: 99
영어: 50
총점: 342
*/

 

with키워드를 사용한 경우 예

var output = '', student = { 이름 : '연', 국어: 100, 수학: 93, 과학: 99, 영어: 50 };

with(student) {
    output += '이름: ' + 이름 + '\n';
    output += '국어: ' + 국어 + '\n';
    output += '수학: ' + 수학 + '\n';
    output += '과학: ' + 과학 + '\n';
    output += '영어: ' + 영어 + '\n';
    output += '총점: ' + (국어 + 수학 + 과학 + 영어);
}


console.log(output);

/*
이름: 연
국어: 100
수학: 93
과학: 99
영어: 50
총점: 342
*/

이전 코드와 같은 결과지만 훨씬 깔끔해진것을 알 수 있습니다.

 

with키워드와 객체 충돌

만약 with키워드를 사용하는 객체의 속성이름과 외부 변수의 이름이 같으면 충돌이 발생합니다. 이 경우에는 아무것도 출력되지 않습니다.

 

with키워드 사용시 변수 이름 충돌 예

var output = '', student = { 이름 : '연', 국어: 100, 수학: 93, 과학: 99, 영어: 50, output: '아웃풋 등장' };

with(student) {
    output += '이름: ' + 이름 + '\n';
    output += '국어: ' + 국어 + '\n';
    output += '수학: ' + 수학 + '\n';
    output += '과학: ' + 과학 + '\n';
    output += '영어: ' + 영어 + '\n';
    output += '총점: ' + (국어 + 수학 + 과학 + 영어);
}


console.log(output); //

 

with키워드 사용시 변수 이름 충돌 해결 방법

var output = '', student = { 이름 : '연', 국어: 100, 수학: 93, 과학: 99, 영어: 50, output: '아웃풋 등장' };

with(student) {
    window.output += '이름: ' + 이름 + '\n';
    window.output += '국어: ' + 국어 + '\n';
    window.output += '수학: ' + 수학 + '\n';
    window.output += '과학: ' + 과학 + '\n';
    window.output += '영어: ' + 영어 + '\n';
    window.output += '총점: ' + (국어 + 수학 + 과학 + 영어);
}


console.log(output);

/*
이름: 연
국어: 100
수학: 93
과학: 99
영어: 50
총점: 342
*/

window객체는 웹 브라우저에서 동작하는 자바스크립트의 최상위 객체입니다. 웹 브라우저에서 동작하는 자바스크립트의 모든 변수와 함수는 window객체의 속성과 메서드입니다.