[ JavaScript ] 자바스크립트 기본 ③

[ 객체 ] 

 

객체는 Non-Primitive Type( 비원시타입 )에 해당하는 자료형이다. 

*  Non-Primitive Type( 비원시타입 ) : 한번에 여러 개의 값을 가질 수 있고 여러 개의 고정되지 않은 동적 공간 사용

---

- 객체를 생성하는 방법

 

1. 객체 생성자 

 

let person = new Object();

 

2. 객체 리터럴 방식 : {}를 사용해서 객체 생성

 

let person = {}; // 객체 리터럴 방식

 

let person = {
    key1 : "value1", // 프로퍼티 ( 객체 프로퍼티 )
    key2 : 123,
    key3 : true,
    key4 : undefined,
    key5 : [ 1.2 ],
    key5 : function(){}
}; 

console.log(person); 

//{
//     key1: 'value1',
//     key2: 123,
//     key3: true,
//     key4: undefined,
//     key5: [Function: key5]
//   }

 

프로퍼티는 객체가 가지고 있는 속성이다.

프로퍼티에 대한 갯수 제한은 없고 프로퍼티의 value에는 어떤 자료형이 위치해도 상관이 없다. 반면에 key는 반드시
따옴표를 사용하지 않은 문자열로만 이루어져야 한다.
key가 중복될 경우 가장 마지막에 선언된 프로터리를 기준으로 key를 찾게 된다.

---

- key에 해당하는 value값 찾기

 

1. 점 표기법을 통해 프로퍼티 value에 접근할 수 있다.

 

객체이름.프로퍼티이름

 

let person = {
    key1 : "value1", // 프로퍼티 ( 객체 프로퍼티 )
    key2 : 123,
    key3 : true,
    key4 : undefined,
    key5 : [ 1.2 ],
    key6 : function(){},
}; 

console.log(person.key1); // value1

 

없는 key에 접근할 경우 undefined이 출력됨

 

2. 괄호 표기법을 통해 [] 사이에 객체 프로퍼티의 이름을 지정해주기 

 

괄호 표기법을 사용할 경우 []안의 프로퍼티 이름을 반드시 문자열 형태로 넣어줘야한다.

""를 써주지 않는다면 프로퍼티 이름이 변수로 인식되어 에러 처리가 된다.

 

let person = {
    key1 : "value1", // 프로퍼티 ( 객체 프로퍼티 )
    key2 : 123,
    key3 : true,
    key4 : undefined,
    key5 : [ 1.2 ],
    key6 : function(){},
}; 

console.log(person["key1"]); // value1

 

괄호 표기법은 함수로 객체의 프로퍼티 key의 value를 얻어올 경우 사용하면 매우 유용하다.

 

let person = {
    key1 : "value1", // 프로퍼티 ( 객체 프로퍼티 )
    key2 : 123,
    key3 : true,
    key4 : undefined,
    key5 : [ 1.2 ],
    key6 : function(){},
}; 

function getProperty(key){
    return person[key];
}

console.log(getProperty("key5")); //[ 1.2 ]

 

즉, 동적인 파라미터를 전달받는 상황이나 key가 고정되어 있지 않은 상황에서 괄호 표기법을 통해 객체의 프로퍼티에
쉽게 접근할 수 있다.

---

- 프로퍼티를 추가, 수정하기

 

1. 프로퍼티 추가하기

 

점 표기법이나 괄호 표기법을 사용해서 값을 대입해주면 된다. 

 

let person = {
   name : "2chaechae",
   age : 25
}; 

person.gender = "female";
person["major"] = "SW";

console.log(person); // { name: '2chaechae', age: 25, gender: 'female', major: 'SW' }

 

2. 프로퍼티 값 수정하기

 

점 표기법과 괄호 표기법 모두 사용이 가능하다.

 

let person = {
   name : "2chaechae",
   age : 25,
   gender : "female",
   major : "CE"
}; 

console.log(person); // { name: '2chaechae', age: 25, gender: 'female', major: 'CE' }

person.major = "SW"

console.log(person); // { name: '2chaechae', age: 25, gender: 'female', major: 'SW' }

 

 

객체의 자료형을 let이 아니라 const를 사용할 경우 에러가 나지 않는다. 왜냐하면 프로퍼티를 수정하는 행위는 객체 자체를 수정하는 행위가 아니기 때문이다. 즉, person이라는 상수 자체를 수정하는 것이 아니라 person이라는 상수가 가지고 있는 object를 수정하는 행위이다. 상수 자체를 수정하는 행위는 새로운 객체를 대입 연산자를 통해 할당해주는 것이다.

 

const person = {
    name : "2chaechae",
    age : 25,
    gender : "female",
    major : "CE"
 }; 
 
 const person = {
    name : "2monmon"
 };  //오류

 

즉, 객체는 상수로 선언을 하더라도 객체의 프로퍼티를 추가하거나 변경이 가능하다.

 

---

- 프로퍼티 삭제하기

 

1. delete 사용하기

 

delete 뒤에 점 표기법이나 괄호 표기법을 사용해주면 된다. 

 

let person = {
   name : "2chaechae",
   age : 25,
   gender : "female",
   major : "SW"
}; 

console.log(person); // { name: '2chaechae', age: 25, gender: 'female', major: 'SW' }

delete person.gender; 

console.log(person); // { name: '2chaechae', age: 25, major: 'SW' }

 

delete를 사용하는 방법은 객체와 삭제 대상인 프로퍼티간의 연결 관계를 끊을 뿐 실제 메모리에서는 지워지지 않는다. 

 

2. value값을 null로 수정해주기

 

삭제하고자 하는 value를 null로 변경해서 삭제와 똑같은 효과를 얻을 수 있다. 또한 null로 변경해줄 경우 delete가 가지고 있던 문제점을 해결해주기 때문에 메모리에서 날릴 수 있다. 

 

let person = {
   name : "2chaechae",
   age : 25,
   gender : "female",
   major : "SW"
}; 

console.log(person); // { name: '2chaechae', age: 25, gender: 'female', major: 'SW' }

person.gender = null; 

console.log(person); // { name: '2chaechae', age: 25, gender: null, major: 'SW' }

 

---

- 프로퍼티에 함수 생성하기

 

1. 객체안에 들어있는 함수를 메서드라고 한다. 함수가 아닌 다른 프로퍼티들은 멤버라고 한다.

 

let person = {
   name : "2chaechae", //멤버
   age : 25, //멤버
   gender : "female",
   major : "SW",
   say : function() { //메서드
    console.log("안녕");
   }
}; 

person.say(); // 안녕 
person["say"](); //안녕

 

2. 템플릿 리터럴과 this를 다른 프로퍼티 값에 접근하기

 

this : 자기 자신 객체 ( = person )

 

객체 안에 메서드를 만들게 되면 메서드 안에서는 자기 자신을 this라고 부르며 this를 통해서 접근할 수 있다. 

 

let person = {
   name : "2chaechae",
   age : 25,
   gender : "female",
   major : "SW",
   say : function() {
    console.log(`안녕하세요 ${this.name} 블로그 입니다.`);
    console.log(`안녕하세요 ${this["name"]} 블로그 입니다.`);
    console.log(`안녕하세요 ${person["name"]} 블로그 입니다.`);
   }
}; 

person.say(); // 안녕하세요 2chaechae 블로그 입니다.

 

---

-객체에 존재하지 않는 프로퍼티에 접근하기

 

let person = {
   name : "2chaechae",
   age : 25,
   gender : "female",
   say : function() {
    console.log(`안녕하세요 ${this.name} 블로그 입니다.`);
   }
}; 

console.log(person.major); //undefined

 

객체에 존재하지 않는 프로퍼티에 접근할 경우 undefined를 반환하게 된다. 하지만 존재하지 않은 프로퍼티에 잘못 접근할 경우 오류가 많이 날 수 있다.

 

1. in 연산자를 활용해서 프로퍼티가 객체에 존재하는지 확인하는 방법

 

let person = {
   name : "2chaechae",
   age : 25,
   gender : "female",
   say : function() {
    console.log(`안녕하세요 ${this.name} 블로그 입니다.`);
   }
}; 

console.log("name" in person); //true
console.log("major" in person); //false
console.log(`age : ${"age" in person}`); //age : true

 

in 연산자를 활용하면 객체안에 프로퍼티가 존재하는지 확인할 수 있다. 있다면 true를 반환하고 없다면 false를 반환한다.