JS_기본문법 (3)_객체

객체

JS는 객체지향언어이다.

객체는 프로퍼티와 메서드로 이루어져 있는데

또한 프로퍼티는 key: value로 구성이 되어있다.

 -> key(문자열or심볼), value(저장할 데이터)

 

참고로 함수와 배열은 객체에 속한다.

객체 생성 방법

 

객체 리터럴 방식

"{ }"로 객체를 표현하는 것을 리터럴 방식이라고 한다.  (파이썬 dict와 비슷)

const 객체명 = {
    key : value,
    ...
};

객체를 생성할 때에는 보통 const를 이용해 상수 선언을 해준다.

그에 따라 객체 자체를 바꿀 수 없지만,

내부의 프로퍼티, 메서드 등은 변경이 가능하다!

(let을 이용해 생성하면 객체 자체도 바꿀 수 있다.)

 

key

프로퍼티명(key)은

따옴표를 붙이지 않아도 되고 이러한 경우,

문자, 언더바, 달러 기호($) 로 시작해야하며

하이픈과 띄어쓰기는 할 수 없다.

또한

키에 따옴표('')를 붙여야하는  경우가 있는데

"숫자로 시작하는 경우, 특수문자, 하이픈, 띄어쓰기가 있는 경우" 이다.

 

value

프로퍼티의 값(value)은

모든 자료형이 가능하다.

 

- 예시

const newObject = {
    title : "newtitle", //key, value
    author : "Kassid",
    "Y-M-D" : "20XX-0X-XX",
    say : function(){   //메서드
        console.log("Hi!");
    }
};

console.log(newObject.title); //객체 프로퍼티에 접근
console.log(newObject.author);
newObject.say(); //메서드

>>>
newtitle
Kassid
Hi!

 

---

객체의 CRUD

객체 접근법 (Read)

객체로의 접근은 점표기법과 대괄호표기법이 있다.

const newObject = {
    title : "newtitle",
    author : "Kassid",
};

console.log(newObject.title); // 방법 1
console.log(newObject['title']); // 방법 2

>>>
newtitle
newtitle

점표기법 사용 시

따옴표를 활용을 한 key는 접근할 수 없다.

이러한 경우 대괄호표기법을 활용하여 접근할 수 있다.

 

대괄호 표기법 활용시

연산자나 변수도 활용할 수 있다.

let obj = {
    'next Year' : 2023,
};

console.log(obj['next '+'Year']) //연산을 통해서도 접근 가능
let name = 'next Year'
console.log(obj[name])	//변수를 이용해도 접근 가능

--------
2023
2023

 

만약 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다.

 

프로퍼티 추가, 제거 , 수정 (C, U, D)

- 추가

객체.key = value 혹은 객체['key'] = value 를 이용하여

새로운 프로퍼티를 추가할 수 있다. (객체에 대한 작업도 가능)

const newObject = {
    title : "newtitle", //key, value
    author : "Kassid",
};

// 프로퍼티 추가
newObject.content = "newContents";
console.log(newObject.content);

// 객체 추가
newObject.get = function(){ //함수 객체를 추가
    console.log('Hello!');
};
newObject.get();

>>>
newContents
Hello!

 

- 수정

수정 역시 객체.key = value 혹은 객체['key'] = value 를 이용한다.

const newObject = {
    title : "newtitle", //key, value
    author : "Kassid",
};

// 프로퍼티 수정
newObject.title = "My Post";
console.log(newObject.title);

>>>
My Post

 

- 제거

제거를 할 때에는 "delete"를 이용한다.

제거된 프로퍼티에 접근하면 undefined를 반환한다.

const newObject = {
    title : "newtitle", //key, value
    author : "Kassid",
};

// 프로퍼티 제거
delete newObject.author;
console.log(newObject.author);

>>>
undefined //존재하지 않으므로 undefined

 

객체 안에 객체

const newObject = {
    title : "newtitle",
    author : "Kassid",
    say : function(){
        console.log("Hi!");
    },
    moreInfo : {
        date : "2022-02-09",
        pages : 1
    }
};

console.log(newObject.moreInfo);
console.log(newObject.moreInfo.date);

>>>
{ date: '2022-02-09', pages: 1 }
2022-02-09

접근 방식은 점표기법 혹은 대괄호 표기법으로 트리를 만든다. 

ex) obj.Info.name  OR obj.Info['name']

 

this

const newObject = {
    title : "newtitle",
    author : "Kassid",
    show : function() {
        console.log("title :",this.title);
        console.log("author :",this.author);
    }
};

nObject.show();

>>>
title : newtitle
author : Kassid

파이썬의 self와 비슷한 개념으로

JS에는 this가 있고 현재 객체를 뜻한다!

 

get, set

JS에서 객체의 프로퍼티에 접근하는 방법으로 제공하는 것이다.

 

(객체 지향의 캡슐화 컨셉?)

 

---

객체 비교하기

객체 간의 비교시 주의할 점이 있다.

1 === 1
'1' === '1'
undefined === undefined

>>>
true
true
true

대부분의 경우 위와 같이 비교를 할 경우 true를 반환한다.

 

그러나 객체는 변수에 할당하지 않고 바로 비교를 하는 경우

false를 반환한다. (함수, 배열도 역시 포함)

{} === {};
{a : 1} === {a : 1};

>>>
false

--------
// 변수에 할당한 후 비교
let obj = {a : 1}
obj === obj;

>>>
true

이는 { }로 묶는 것 자체가 새로운 객체를 생성하는 것이기 때문에

둘은 서로 다른 객체가 되는 것이다.

따라서 변수에 할당을 한 후 비교해야 원하는 결과를 얻을 수 있다.

 

객체 간 참조관계

const a = {
	title : 'newTitle',
}
const b = a;
console.log(b.title);

>>>
newTitle

--------
a.title = 'newTitle2';
console.log(b.title);

>>>
newTitle2 //a를 수정하였지만 b의 프로퍼티도 변경됨

이는 얕은 복사가 이루어지는 것이기 때문에 "주소값을 복사하는 것"이다.

이러한 참조하는 값이 같은 a, b의 관계를 객체 간에 참조관계가 있다고 한다.

 

객체가 아닌 값들은 이러한 관계를 가지지 않는다.

let a = 'apple';
b = a;
a = 'banana';
console.log(a);
console.log(b);

>>> banana
>>> apple

 

위를 통해 b에 a를 할당하고 a에 새로운 값을 넣을 경우

a는 새로운 메모리 공간을 할당하는 것을 알 수 있다.

 

---

class

다른 객체지향 언어들과 유사한 class문법이 있다!

 

constructor는 생성자이다.

class Product {
    constructor(subject, name, price) {
        this.subject = subject;
        this.name = name;
        this.price = price;
    }
}
const apple = new Product('Fruits','apple',1000);
console.log(apple);

>>>
Product { subject: 'Fruits', name: 'apple', price: 1000 }

 

상속, 다형성도 지원한다.

class Product {
    constructor(name, price) {
        this.name = name;
        this.price = price;
    }
    show() {
        console.log('Unknown subject');
    }   
}

class Food extends Product {
    constructor(subject, name, price, color){
        super(name,price);
        this.subject = subject;
        this.color = color;
    }
    show() {
        console.log("suject :",this.subject, "name :",this.name, "price :",this.price, "color :",this.color);
        return this;
    }
}


const apple = new Food("Fruits", "apple", 1000, "red"); //new 함수()를 사용해 객체로 선언할 수 있다.
apple.show()

extends를 이용해서 상속을 받을 수 있다.

또한 function키워드 없이 그냥 바로 메서드를 선언한다.

다형성 부분에서는

인자 개수 등에 상관없이 그냥 함수가 덮어씌워진다.