Javascript의 참조 타입
앞서 살펴본 기본 타입을 제외한 모든 값은, Javascript에서 모두 '객체'입니다. 기본 데이터 타입과의 가장 큰 차이는, 기본 데이터 타입은 하나의 값을 가지는 데 비해 참조 타입 객체는 여러개의 속성 값 - 즉 프로퍼티(property)를 갖습니다. 이 프로퍼티는 기본 타입의 값도, 다른 객체도 가리킬 수 있습니다.
객체는 흔히 사용하는 자료구조와 마찬가지로, key : value 형태로 값을 저장하게 됩니다. 또한, 프로퍼티로서 저장된 함수를 메서드로 별도로 칭합니다.
객체를 생성하는 방법
C#이나 JAVA를 주로 사용하셨던 분들이라면, 이 객체의 개념을 주로 클래스를 이용한 인스턴스의 생성으로 생각하시는 분들도 있을 겁니다. 나중에 다루겠지만, Javascript에는 기본적으로 클래스의 개념이 없기 때문에 별도의 생성 방식을 사용해야 합니다.
(1) 객체 리터럴
객체 리터럴을 통해 객체를 생성하는 방법은, 앞으로도 가장 많이 사용하게 되면서도 가장 강력한 기본 생성 방식입니다. 바로 중괄호( { , } )를 이용해 생성하는 방식입니다. 중괄호에 내용이 없으면 빈 객체로 생성되며, 중괄호 안에 key : value 형태로 프로퍼티를 추가한 객체가 만들어집니다.
프로퍼티 이름은 문자열 / 숫자를 사용하며,
프로퍼티 값은 Javascript 값들이 올 수 있습니다(함수 포함).
var human = {
height : 180,
school : 'Gang-nam',
};
console.log(human);
(2) Object 생성자 함수
추후에 new 키워드를 사용하는 생성자 함수에 대해 자세히 다룰텐데, 여기서는 Object( ) 생성자 함수를 사용하는 법을 먼저 간단히 알아보도록 하겠습니다. 빈 객체를 생성하고, 객체 내 프로퍼티를 동적으로 생성합니다.
var newObj = new Object();
newObj.title = 'Without You';
newObj.price = 39900;
console.log(newObj);
// 출력
// { title: 'Without You', price: 39900 }
객체에서의 for in 문 사용
객체안에 여러개의 프로퍼티가 들어가 있을 때, for in 문을 활용하여 객체의 모든 프로퍼티에 대한 루프를 실행해 명령을 수행할 수 있습니다. 다소 일반적인 흐름의 명령문은 아니니, 사용에 익숙해지셔야 합니다.
var newObj = {
title : 'Beautiful Day',
price : 19900,
publisher : 'ABC Company'
};
var prop;
for(prop in newObj) {
console.log(prop + " : " + newObj[prop]);
}
console.log(prop);
// 결과
// title : Beautiful Day
// price : 19900
// publisher : ABC Company
// publisher
우선 프로퍼티 값들을 가진 newObj를 선언해줍니다. 그리고 다음에 비어있는 변수 prop을 생성해 줍니다. 그 다음 예문과 같이 for문을 선언해 주는데, 여기서 중요한 것은 미리 선언한 prop에는 루프가 돌 때마다 newObj 안에 있는 프로퍼티의 이름만 하나씩 할당된다는 점 입니다.
그리고 객체 명인 newObj에 대괄호를 사용해 [prop]을 붙여주면, 해당 객체안의 지정된 프로퍼티의 값을 불러오게 됩니다. 결과적으로 하나씩 프로퍼티를 불러와 출력하는 루프를 실행하게 되죠.
for in 문이 끝나고 나서, prop을 출력해보면 마지막 프로퍼티의 이름인 'publisher'가 남아있습니다. 이를 보면 for in이 실행되는 과정에서 어떤 일이 벌어지는지 이해가 가실겁니다.
여기서 newObj[prop] 형태를 처음 보신 분들도 계실텐데, 이와 관련해서는 다음 편에서 자세히 살펴보도록 하겠습니다.
'Programming > Javascript' 카테고리의 다른 글
4. Javascript 프로토타입([[Prototype]]) (0) | 2022.08.19 |
---|---|
3. Javascript 참조 타입의 특성 (0) | 2022.08.18 |
2. Javascript 참조 타입 (2) - 객체 프로퍼티 읽고, 쓰고, 삭제하기 (0) | 2022.08.18 |
1. Javascript 기본 데이터 타입(2) (0) | 2022.08.09 |
1. Javascript 기본 데이터 타입(1) (0) | 2022.08.09 |