[JavaScript] Property (프로퍼티)

#1 Property (프로퍼티)란 무엇인가?

프로퍼티를 이해하기 위해서는 '객체' 라는 개념을 먼저 이해해야 한다. 프로그래밍 언어를 배우다보면 '자바스크립트는 객체 기반 언어' 라는 말을 많이 듣게 되는데, 도대체 객체라는 게 무엇을 뜻하는 걸까? 객체의 영어 명은 'Object' 로 물체라는 뜻을 가지고 있다. 우리가 주변에서 볼 수있는 모든 사물을 물체라고 할 수 있는데, 이것은 프로그래밍 언어에서도 똑같은 개념으로 적용된다. 자바스크립트를 이루고 있는 거의 모든 것은 객체라고 할 수 있다. 즉, 원시값(String, number, boolean 과 같이 어떤 특성 또는 방법이 없는 값)을 제외한 함수, 정규식 표현, 배열, 날짜 등 모든 JavaScript 값은 객체이다. 

 

이러한 객체들을 구성하고 있는 것이 오늘 우리가 배울 property(프로퍼티)라는 것이다. 프로퍼티는 "key" 와 "value" 를 쌍으로 저장할 수 있는 구조인데, 접근 가능한 이름(key)과 활용 가능한 값(value)를 가지는 것을 가능하게 해준다. 아직도 잘 이해가 안된다면 아래 예를 같이 살펴보자.

 

#2  사용해보기

위 사진은 기여운 우리 기영이다! 기영이를 예시로 객체와 프로퍼티를 만들어보자. 

 

var dog = new Object(); // 객체 생성

먼저, 기영이는 강아지이니 먼저 dog 라는 객체를 생성했다. 그럼 이 dog라는 객체 안에 프로퍼티를 사용해서 객체에 속성을 추가해보자.

 

dog.name = "기영이";
dog.race = "toy poodle";
dog.age = "0.5";
dog.weight = "2";
dog.color = "cream";

객체명.프로퍼티명 = 프로퍼티값 의 형식으로 프로퍼티를 추가해보았다. 이름, 나이와 같은 key 값에 해당하는 value 값이 들어가있다. 프로퍼티는 아래와 같은 방법으로도 추가할 수 있다. 

 

var dog = {
	name = "기영이",
	race = "toy poodle",
	age = "0.5",
	weight = "2",
	color = "cream"
}

모든 프로퍼티를 만들었다! 그럼 이렇게 만든 프로퍼티가 잘 적용되는지 저번 게시글에서 다운받았던 Visual Studio Code 에서 Node.js 를 이용해서 확인해보자. 먼저 자바스크립트에서 객체의 프로퍼티에 접근하는 방법은 객체명.프로퍼티명 또는 객체명.['프로퍼티명'] 으로 가능하고 위에 만든 프로퍼티들을 두 가지 방법을 이용해서 호출해보자.  

 

js 파일을 생성해 위에서 선언한 것 처럼 객체와 프로퍼티들을 잘 입력해주고 저장한 뒤, console.log(출력하고자 하는 것) 을 통해 dog.name, dog['race']  등 다양한 방법으로 호출했는데 콘솔창을 보면 다 잘 나온다! 

 

객체는 프로퍼티 뿐만 아니라 함수도 호출할 수 있는데, 객체가 호출하는 함수는 메소드 라고 부른다. 우리 기영이는 놀아달라고 할 때면 '앙' 하고 짖고 밥 달라고 할 때면 '멍' 하고 짖는데(??) 기영이가 놀아달라고 하거나 밥 달라고 할 때의 메소드를 만들어보자.  

 

dog.play = play;
dog.food = food;

function play(){console.log("앙!");}
function food(){console.log("멍!");}

이제 이러한 메소드들을 js 파일에서 dog.play(); 또는 dog.food(); 등으로 사용하게 되면

 

food -> play 순서로 사용해서 멍! -> 앙! 순서로 잘 출력이 된 걸 확인할 수 있다! 이렇게 메소드도 잘 작동이 된다!

 

 

그럼 객체 안의 프로퍼티에 또 다른 프로퍼티 들이 존재하는 것도 가능할까? 

var Noona = new Object(); // 누나라는 객체 생성

Noona.dog = { // 누나라는 객체 안에 dog 라는 프로퍼티 생성
    name: "기영이", 
    race: "toy poodle",
    age: 0.5 // Noona의 dog 이라는 프로퍼티 안에 name, race, age 라는 프로퍼티들을 생성
};

Noona.cat = { // 누나라는 객체 안에 cat 이라는 프로퍼티 생성 
    name: "기철이",
    race: "scottish fold",
    age: 1 // Noona의 cat 이라는 프로퍼티 안에 name, race, age 라는 프로퍼티들을 생성
};

아래 콘솔창을 확인해보면 아주 잘 나오는 것을 알 수 있다! console.log(Noona) 를 해서 Noona 객체 안의 모든 값을 가져오지만, Noona.dog.name 이렇게 특정해줄 수도 있다. 

 

오늘은 이렇게 예시를 들어서 프로퍼티에 대한 개념을 이해하기 쉽게 정리해봤다. 다음에는 더 재미있는 자바스크립트의 기능을 알아보자~