JS | Object(오브젝트)와 Property(프로퍼티)

DongHee Kim·2021년 7월 21일

Javascript

목록 보기

4/9

자바스크립트에 대한 기초를 쌓아가면서 은근히 계속 헷갈렸던 object
워낙 연관된 개념이 많기 때문에 처음부터 모든 걸 백과사전처럼 완벽하게 정리하려 하기보다는, 내가 배우고 이해한만큼 끊어가며 단계적으로 정리해보려 한다.
(글에 담아내는 지식이 점점 깊어지는 재미도 있지😎)
이번 글에선 object와 property를 중점적으로 정리할 예정

Object와 Property(프로퍼티)

객체 지향 언어인 javascript에서의 '객체'인 object
property는 그런 object의 속성을 뜻하며, 이름(name/key)과 값(value)의 연결로 이루어진다. 둘의 관계는 object는 property의 모음이라고 생각하면 쉽다.

Property(프로퍼티)

{name(이름/키) : value(값)} 의 형태로 이루어져 있으며, object의 속성이다.

value엔 JS에서 지원하는 데이터 타입을 작성하면된다.
문자열, 숫자, true/false, 빈 문자열, 함수까지!
(value에 함수가 들어올 경우 그 프로퍼티는 메소드라고 부른다.)
' , '로 구분해 다수 작성도 가능하다.
name부분에 따옴표(" " 혹은 ' ')를 작성하지 않아도 문자열로 간주한다.

예제

var newSong = {singer : "IU"};

위 코드에서 object는 newSong, property는 {singer : "IU"}이다.

property 추가,변경

object에 추가하려는 property name이 없을 경우 추가되고,
이미 동일한 name의 property가 있을 경우엔 그 값이 변경된다.

점(.)과 property name 사용

object.property name = "value" 형태로 작성한다.

//property 추가 예시

var newSong = {};

newSong.singer="IU"
newSong.title="Blueming"

console.log(newSong);
//실행결과 : {singer: "IU", title: "Blueming"}

대괄호 사용

object["title"]="value" 형태로 작성한다.

//property 추가 예시

var newSong = {};

newSong["singer"]="IU";
newSong["title"]="Blueming";

console.log(newSong);

//실행결과 : {singer: "IU", title: "Blueming"}

변수 이름 작성

property의 name을 변수에 할당하고, 그 변수를 활용

//property 변경 예시

var newSong = {singer : "IU"};
var varname = "singer";

newSong[varname] = "Joy";
console.log(newSong);

//실행결과 : {singer: "Joy"}

object에서 property 값 추출

찾고자하는 property name을 별도 변수에 할당한 뒤,
그 property name이 object에 있을 경우 property값을 반환하고,
없을 경우 undefined를 반환한다.

var newSong = {singer : "IU"};

//case 1.
var value1 = newSong.singer;
console.log(value1);
//실행결과 : IU

//case 2.
var value2 = newSong.title;
console.log(value2);
//실행결과 : undefined

object인 newSong에서
case 1) singer가 있어서 property값 IU 반환
case 2) title이 없어서 undefined 반환

object에서 property 열거 (for~in문)

형태는 아래와 같다.

for (변수 in object) 문장;
//변수에는 property name이 할당된다. 
for (표현식 in object) 문장;

아래와 같이 for (변수 in object) 문장 형태의 예시를 다시 작성해보며 확실히 이해할 수 있었다.

var newSong = {
  singer:"IU", 
  title:"Blueming"
};

for(var item in newSong){
console.log(item);
console.log(newSong[item]);
};

/*실행결과 
singer
IU
title
Blueming
*/