[JS] 객체

 

객체생성 방법

 

비 원시 타입의 객체를 알아보자.

객체를 생성할땐 두가지 방법이있다.

1) let person = new Object();
2) let person = {};

new 키워드를 통해서 만드는것은 생성자 방식,

중괄호를 통해서 생성하는것을 객체 리터럴 방식이라 한다. (중요하진않음)

객체 리터럴 방식이 만들기 편하기때문에 많은 사람들이 리터럴방식으로 사용한다.

 

객체는 여러가지 데이터를 동시에 가질 수 있는 비 원시 타입이다.

간단한 규칙만 지켜주면되는데 

왼쪽엔 key : 오른쪽엔 value 

키밸류 형식으로 만들어야하고 이 키:밸류를 프로퍼티(객체 프로퍼티)라고 한다.

 

 

 

객체 프로퍼티 접근 방법

 

let person = {
key: "value",
key1: 123,
key2: true,
key3:undefined,
key4: [1, 2],
key5: function () {}
};

console.log(person.key1) <= 이렇게 꺼낼수 있다.

점을 사용해서 꺼내기때문에 점 표기법이라고함.

console.log(person["key1"]) <= 대괄호를 사용할 수 도있다. 괄호 표기법

주의할 점은 반드시 ""따옴표로 감싸줘야한다는 것,

따옴표를 빼고 넣으면 변수로 인식하기때문! 

 

보통은 점 표기법을 사용해서 값을 꺼내오는데 

괄호 표기법을 사용할땐 언제일까?

 

let person = {
name: "crash",
age: "30"
};

console.log(getPropertyValue("name"));  //함수 선언식이기때문에 호이스팅이 이뤄진다.

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

 

함수 하나를 만들고, 매개변수로 key를 받아서 person 객체에서 전달받은 key의 

value를 갖는 프로퍼티를 꺼낼 것이다.

getpropertyvalue에 name을 전달하고, getpropertyvalue는 key로 들어가고, 

key는 name이 되고, name은 즉 "crash" 를 꺼내오는 것이다.

 

괄호 표기법을 이용하면 좋은 상황
1. 동적인 파라미터를 전달받는 위의 상황
2. 현재 key를 꺼내야하는데 key가 고정되어있지 않는 상황

 

 

객체 생성 이후에 추가하는 방법

 

let person = {
name: "crash",
age: "30"
};

1) person.location = '한국';
2) person["location"] = "한국";
console.log(person);

 

1)점 표기법, 2)괄호 표기법을 사용해서 프로퍼티를 추가한다.

 

 

 

객체 생성 이후에 수정하는 방법

 

let person = {
name: "crash",
age: "30"
};

person.name: "chacha";
person["name"] "chacha";
console.log(person);

 

 

 

객체 선언 변수를 const로 변경해보자.

 

우리가 기본적으로 변수를 배웠을땐

let은 재할당이 가능, const는 재할당이 불가능했다.

아래의 코드를 보면 const를 사용하고 있는데 재할당하는 값들이있으니 당연히 오류가 

발생해야 맞지만..?

에러없이 잘 출력된다.

이유가 뭘까?

const person = {
name: "crash",
age: "30"
};

person.name: "chacha";
person["name"] "chacha";
console.log(person);

프로퍼티를 수정하는 행위는 해당 ‘person’을 수정하는 행위가 아니기때문이다.

person이라는 상수가 갖는 오브젝트를 수정하는 행위인거지 person이라는 상수 자체를 수정하는것은 아니기때문!.

그럼 ‘person’ 자체를 수정하는 행위는 무엇일까?

person = {
age: 100
};

이런식으로 새로운 객체를 대입해서 할당하는 것이다.

 

객체는 상수로 선언했더라도 객체에 프로퍼티를 추가하고 수정하고 변경할 수 있다.

 

 

프로퍼티 삭제하는 방법

 

const person = {
name: "crash",
age: "30"
};

delete person.name;
delete person["name"];
console.log(person);

delete로 삭제가능!

하지만 이렇게 삭제하는 방법은 실제 객체와 프로퍼티간의 연결만 끊을뿐

메모리가 지워지지않는다. 그럼 메모리가 낭비될 뿐이다.

delete를 사용하는 방법보다는

person.name = null;

null 값을 넣어줘서 기존에 가지고 있는 네임의 메모리를 날릴 수 있다.

(조금 더 권장)

 

 

객체 프로퍼티에 함수사용

 

const person = {
name: "crash",
age: "30"
say: function() {
console.log("안녕")
};

person.say()

이렇게 객체에 프로퍼티에 함수를 담는 것을 '메서드(방법)' 이라고 한다.

 

 

 

객체에서 this란?

 

const person = {
name: "crash",
age: "30",
say: function() {
console.log(`안녕 나는 ${this.name}`)
};

person.say()

템플릿 리터럴을 사용해서 name을 넣어주었다.

여기서 가르키는 this는 자기자신 객체이다.

객체안에 메서드를 만들게 되면 메서드 안에서는 자기 자신을 this라고 부를 수 있게 된다.

결국 this는 person과 같은 것.

 

 

 

객체에 존재하지않는 프로퍼티에 접근하면 어떤일이 일어날까?

 

const person = {
name: "crash",
age: "30",
say: function() {
console.log(`안녕 나는 ${this.name}`)
};

console.log(person.gender);

객체에 존재하지않은 값을 출력해보자.

gender라는 프로퍼티를 넣어주면 undefined가 뜨게된다.

에러를 일으키지않고 undefined를 반환하는 방식은 유연한 프로그래밍을 가능하게 하지만

존재하지않는 프로퍼티에 잘못접근해서 연산을 수행한다던가 오류가 일어날 수 있다.

 

그래서 

존재하지않는 프로퍼티에는 추가하지않는다면 접근하지않는것이 제일 좋은 방법이고,

프로퍼티가 객체에 존재유무를 확인하는 방법이 있다.

const person = {
name: "crash",
age: "30",
say: function() {
console.log(`안녕 나는 ${this.name}`)
};

console.log(`name : ${"name" in person}`);

in 연산자를 활용해서

person 객체에 name이라는 프로퍼티가 있는지? 물어보는 방법이다.