프로그래밍&IT/자바스크립트

[javascript 자바스크립트] 객체 리터럴

sjoo 2021. 4. 20. 21:49

객체란

데이터(property)와 그 데이터에 관한 동작(method)을 모두 포함할 수 있는 독립적 주체이다.

 - property : 객체의 상태를 나타낸다.

 - method : property를 참조하고 조작할 수 있다.

 

객체 리터럴이란

중괄호{...}를 사용해 값을 생성하는 방식

// 객체 생성
var obj ={  
	name : 'test', //property
    key : {
        init : false,
        position : "",
        custom : function(dom, map) { //method
			...
        	}
        },   
	 test : function(dom, map) {
			...
        }
};

빈 객체를 생성할 수도 있다.

var obj={};

 

위에 코드에서 name의 값인 test를 가져오려고 한다. 다음 프로퍼티 접근 방법은 두가지가 있다.

 

방법1. 마침표 표기법(.)

console.log(obj.name); //test 출력

방법2. 대괄호 표기법([])

cosole.log(obj['name']); //test

 

대괄호 안에는 반드시 따옴표로 감싼 문자열이 와야한다. 그렇지 않으면 식별로 해석된다.

 

객체 리터럴에 대한 설명은 아래 참고한 블로그에 잘 나와있다.

velog.io/@jimmyjoo/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%9D%EC%B2%B4%EB%A6%AC%ED%84%B0%EB%9F%B4

 

[자바스크립트] 객체리터럴

자바스크립트의 객체와 객체 리터럴에 대해 공부해보자 📝

velog.io

 

 

객체 리터럴에 대해 공부하다보니 왜 객체선언에 리터럴 표현을 선호하는지 궁금했다.

이유는 가독성이 좋고, 속도가 더 빠르기 때문이라고 한다.

// 객체를 생성한 후 할당
var obj1 = new Object();
obj1.a = 1;
obj1.b = 2;

// 객체 리터럴 사용으로 객체 생성과 할당
var obj2= { 
  a: 1,
  b: 2
};

 

 

자세한 설명은 아래 블로그를 참조한다.

blog.kazikai.net/?p=45

 

객체선언에 Literal ( {} ) 표현을 선호하는 이유 : new Object vs {}

자바스크립트 개발을 하다가 일정 수준 이상이 되면, 코드 가독성 및 더 좋은 패턴에 대해 연구 하게 되고, 널리 쓰이는 패턴을 내 코드에 사용하곤 한다. 물론 책으로도 대부분 접할수가 있으며

blog.kazikai.net