프로그래밍/JavaScript

[JavaScript Core] 객체(Object) 의 기본(선언, 설정, 접근, 확인...) 에 대해서 알아보자

문_성 2023. 10. 26. 04:15
반응형

 
이번에는 객체(Object) 에 대해서 다루어보도록 하겠습니다.
 
객체는 하나의 데이터만 담을 수 있는 원시형(primitive type) 의 자료형과 달리, 여러 타입을 키(key)값(value) 의 형태로 담을 수 있는 자바스크립트의 자료형입니다. 
 
따라서, 이러한 객체의 기본을 지금부터 알아보도록 합시다.
 
 

1. 객체 선언

 
객체는 두가지의 방법으로 선언될 수 있습니다. 하나는 객체 생성자를 이용하는 방법이고, 나머지 하나는 객체 리터럴을 이용하는 방법입니다.
 

let obj1 = new Object(); // 객체 생성자
let obj2 = {}; // 객체 리터럴

 

선언 방식만 다를뿐 obj1과 obj2는 똑같은 객체입니다. 보통은 객체 리터럴 방식으로 많이 선언하지만, 원하는 방식을 사용하시면 됩니다.
 
 

2. 객체 값 다루기

 

리터럴 방식으로 선언한 객체는 아래와 같이 선언과 동시에 값을 설정할 수 있습니다.
 

let obj = {
    a : 1,
    b : "hello"
}

 
키(key) : 값(value) 형태로 데이터를 지정해주며, 값에는 모든 자료형을 넣을 수 있습니다.
 

let key = "moonsung"
let obj = {
	"hello world" : 1,
	[key] : 2 // "moonsung" : 2
}

 
위와 같이 따옴표를 이용해서 특수문자나 띄어쓰기가 있는 문자열도 키로 설정할 수 있으며, 특정 변수의 값을 동적으로 설정할 수도 있습니다.
 

let obj = {}

obj.moonsung = 1;
obj["moon sung"] = 2;

console.log(obj.moonsung); // 1
console.log(obj["moon sung"]); // 2

 

값을 추가할때에는 점(.) 표기법을 이용해 추가하거나, 특수문자나 띄어쓰기가 들어가는 문자열의 경우에는 대괄호([]) 표기법을 이용하여 추가할 수 있습니다.
 
이는 값을 읽어올때에도 마찬가지입니다.
 

let name = "moonsung";
let age = 17;
let obj = {
    name, // name : "moonsung"
    age // age : 17
}

 

단축 프로퍼티을 이용하여 변수 이름을 키(key)로, 그에 해당하는 값을 값(value) 으로 한번에 설정할 수도 있습니다. 참 유용하죠? 
 

let obj = {
	a : 1
}

delete obj.a;

 
객체 속 값을 지울때에는 delete 문을 이용하여 자울 수 있습니다. delete문도 점 표기법과 대괄효 표기법을 둘 다 사용하여 지울 수 있습니다.
 
 

3. 객체 값 유무

 

객체에 특정 값이 존재하는지 확인하기 위해서는 in 구문을 이용해서 확인할 수 있습니다.
 

let obj = {
	a : 1
}

console.log("a" in obj); // true
console.log("b" in obj); // false

 

정확히 말하면, 객체 속에 특정 키가 존재하는지 확인하는 문법이며, true / false의 boolean 을 결과로 내보냅니다.
 

let obj = {
    a : 1,
    b : 2
}

for(let key in obj) {
    console.log(key)
} 

// a
// b


이를 응용하여, 객체의 키 값들을 반복문을 통해 불러올 수도 있습니다.


이렇게 객체의 기본에 대해 전체적으로 다루어보았는데, 다음 글에서도 이어서 객체에 관하여 다루어 볼 예정이니 많은 관심 부탁드립니다!



반응형