javascript-Object 특징

안녕하세요. 자바스크립트에서 많이 쓰이는 객체(Object)에 대해서 알아보겠습니다.

 

 

 

객체(Object)란? 

• 데이터와 함수의 집합이며, 현실의 사물을 프로그래밍에 반영한 모양입니다. 
• 객체는 키(Key)와 값(Value)으로 이루어져 있습니다. key와 value의 한 세트(집합)을 속성(property)이라고 합니다.
• 속성(property) 값(value)이 함수일 경우 우리는 그것을 method라고 부릅니다.

 

객체(Object)의 생성

객체는 변수를 정의하고 값을 초기화 할 때 { } 표시 안에 key와 value를 명명해주면 객체가 생성됩니다.

const myName = {
    firstName: "hoho",
    lastName: "Kim"
}

console.log(myName);
//{firstName: "hoho", lastName: "Kim"}

이와 같이 {}를 사용하여 만든 객체를 객체 리터럴(Object literal)이라고 합니다.

 

객체를 생성하는 다른 방법으로는 생성자함수(new Object())를 사용하는 방법이 있습니다.

const myName = new Object();

myName.firstName = "hoho";
myName.lastName = "Kim";

console.log(myName);
//{firstName: "hoho", lastName: "Kim"}

new Object를 사용하여 객체를 생성할 수 있지만 객체 리터럴를 사용하여 객체를 생성하는 것을 권장합니다.

그 이유는 객체리터럴 사용해서 객체를 생성하는 것은 연속된 구조체나 데이터를 일정한 방법으로 변한하고자 할때 많이 사용합니다. 예를 들면 서버에게 주소를 데이터베이스에 넣어달라고 요청하는 경우 각 아이템들을 하나 하나 개별 전송하는 것 보다 하나의 객체를 전송하는 것이 훨씬 효율적입니다. 

 

키(Key)와 값(value)

 

객체(Object)를 정의 할 때 살펴본 바와 같이 키와 값의 쌍을 속성(property)라고 하며, 속성은 키: 값 관계로 이루어져 있습니다. 위 예제에서  firstName이나 lastName을 key하며 뒤에 따라오는 것이 값입니다. 키는 속성명이라고 부르기도 합니다. 

 

속성명은 문자열만 가능합니다. firstName이나 lastName 같은 속성명은 따옴표("" or '')가 있어도 없어도 됩니다. 하지만 속성명을 first Name으로 해주었을 경우(first와 Name 사이에 띄어쓰기) error가 발생하기 때문에 속성명에 따옴표를 표시해주어야합니다. 참고로 속성명에 - 도 사용하면 error가 발생합니다. 그래서 따옴표를 사용해주어야 합니다.

const myName = {
    first Name: "hoho"
    lastName: "kim"
}

console.log(myName);
// Syntax Error: Unexpected identifier

const myName = {
    first-Name: "hoho"
    lastName: "kim"
}

console.log(myName);
//SyntaxError: Unexpected token '-'

 

속성값(value)은 문자열도 가능하고, 숫자도 가능하고, 객체나 배열 그리고 함수도 가능합니다.

const myNameIs = {
    firstName: "hoho",
    lastName: "Kim",
    age: 19,
    sayHello: function() {
      console.log("Hello")
    }
 }

myNameIs
//{firstName: "hoho", lastName: "Kim", age: 19, sayHello: f()}

 

 

속성값 호출

객체에 마침표를 사용하면 객체 안에 속성(property)에 접근 할 수 있습니다. 혹은 [ ] 안에 속성명을 작성하여 속성값을 불러올 수 있습니다.

myNameIs.firstName // "hoho"
myNameIs.[firstName] // ReferenceError: firstName is not defined
myNameIs.['firstName'] // ""hoho​

보통은 마침표를 이용하여 객체에 접근하는 방법을 많이 사용합니다. [ ] 를 사용하여 객체에 접근하는 방법은 속성명 사이에 띄어쓰기를 해주거나 -를 사용했을 경우에 [ ]를 사용합니다. 또한 [ ]를 사용하여 object에 접근하는 경우에는 따옴표를 붙여주어야합니다.

 

또한 객체 안에 객체를 만드는 것도 가능합니다.

const myNameIs = {
    name: {
    	firstName: "hoho"
        lastName: "Kim"
    },
    age: 19,
 };
 
 myNameIs.name; // {firstName: "hoho", lastName: "Kim"}
 myNameIs.name.firstName //"hoho"
 myNameIs.name.lastName //"Kim"
 
 myNameIs["name"] //{firstName: "hoho", lastName: "Kim"}
 myNameIs["name"]["firstName"] //"hoho"
 myNameIs["name"]["lastName"] //"Kim"
 

myNameIs 객체 안에 name이라는 객체를 만들면 마침표를 사용하여 객체에 점점 더 깊이 들어가 객체 값을 불러올 수 있습니다.

 

프로퍼티값 갱신

const myNameIs = {
    name: {
    	firstName: "hoho"
        lastName: "Kim"
    },
    age: 19,
 };
 
 myNameIS.age = 20;
 myNameIs.age //20;
 
 myNameIs.height = 180;
 myNameIs.height // 180;

객체가 소요하고 있는 값을 다시 설정하면 속성명은 설정해준 값으로 재할당 됩니다.

 

myNameIs를 const로 지정해주었음에도 불구하고, 객체의 속성들은 기존 값을 새로 할당해줄 경우 속성값이 재할당되는 것을 확인 할 수 있습니다. 이는 코드를 작성할 때 주의할 점이 되겠습니다.

 

 

 

이상 자바스크립트에서 많이 쓰이는 객체(Object)의 특징들에 대해서 알아보았습니다.

요즘 느끼는 거지만 어느 분야든 기본기가 튼튼해야 하는 것 같습니다.

 

저의 글이 조금이나마 도움이 되기를 바라며 글을 마치겠습니다. 감사합니다.

 

참조

developer.mozilla.org

제로초 홈페이지

poiemaweb