Javascript_Object

Object

불편함

이전에 array.push()와 같이 함수의 메소드를 사용했다. 이러한 것을 우리가 직접 만들 수도 있다. 

 

우리가 만약 제품에 관한 변수를 만든다고 하자. 그럼 유사한 변수들을 여러개 생성해야 할 것이다. 이름, 품번, 무게, 판매량 등등 말이다.

const productName = "TheBag"

const productNumber = 001;

const productWeight = 200;

const productSales = 92;

 

직관적이긴 하지만 변수명에 product가 반복된다. 반복된다는 것은 유사한 데이터들이라고 볼 수 있는데 이런 것들을 일괄적으로 묶을 수는 없을까? consol에 log를 붙여서 앞부분은 동일한 데이터를 붙이고 그 뒤에것만 추가로 붙일 수 있는 기능 같은건 없을까?

마치 홍길동, 홍길순과 같이 같은 홍 씨면 길순과 길동을 홍 씨로 묶는 것 처럼 말이다.

 

Object

위의 경우 object를 사용하면 데이터를 깔끔하게 묶을 수 있다. 

 

const product = {

    name: "TheBag",

    number: 001,

    weight: 200,

    sales: 92,

};

 

console.log(product);

console.log(product.name);

 

product 객체를 console.log하면 위와 같이 나오는데, 파이썬의 딕셔너리 형태와 같은 형태다. 

 

product.name은 product의 키값인 name의 값을 지칭하니까 ‘TheBag’이 console.log를 통해 도출되게 된다.

 

개인적으로 객체는 혁신적인 데이터 구조라고 생각한다. 기존 단순 선형적인 데이터들을 하나의 3차원 매트릭스로 표현해낼 수 있게 되기 때문이다. 이를 데이터 구조 형태로 한번 비교해서 보자.

Variable

productName = "TheBag";

 

단순 변수다. 하나의 변수에 하나의 값만 들어가는 1차원 형태다.

 

스프레드시트에서 표현하면 위와 같다.

 

List

product = ["TheBag", "ThisBag", "ThatBag", "ThoseBag"]

 

그럼 리스트는 어떨까. 리스트는 하나의 변수에 대해 1개 이상의 데이터들을 선형적으로 나열할 수 있다.

위와 같이 스프레드시트에서 2차원으로 표현이 가능하다. 하지만 위의 경우 product의 제품명들만 모아두었다. (제품명 같진 않지만 제품명이라고 가정하자) 제품명들만 모아두면 우리가 어떤 제품들을 가지고 있는지는 알 수있다. 

그러나 각 제품의 디테일한 정보들을 알 수는 없다. 예를 들어 제품의 무게, 제품의 판매량, 제품의 시리얼 넘버 등과 같이 말이다. 이를 리스트로 한번 표현을 해보자.

이렇게 표현을 할 수 있다. 그런데 이를 코드로 작성하면 문제가 생긴다. 

 

theBag = ["TheBag", 1, 200, 92];

 

theBag에 대한 데이터가 TheBag, 1, 200, 92이 리스트에 포함되어있다. 데이터 값 1개만 넣을 수 있는 variable보다는 꽤 만족스럽지만 그래도 각 데이터들이 어떤 의미를 가지는지 코드는 말해주지 않는다. 이 코드를 작성한 나는 이것이 무슨 의미인지 알고 있지만, 이 코드를 보는 사람이나 컴퓨터도 1이 productNumber인지, 200이 productWeight인지 모른다. 

 

이런 문제를 한방에 해결해주는 것이 Object 자료구조다.

 

Object

 

const product = {

    name: "TheBag",

    number: 001,

    weight: 200,

    sales: 92,

};

 

위를 스프레드시트로 표현하면 아래와 같다.

 

각 값들(TheBag, 1, 200, 92)이 어떤 키들(Name, Number, Weight, Sales)을 가지고 있는지 명확하게 이해가 된다. 객체가 대단한 이유는 하나의 단어 안에 1개의 스프레드 시트를 저장할 수 있다는 점이다!

 

대단하지 않은가? 몇 개의 객체로 당신은 몇 개의 엑셀 파일에 해당하는 정보를 손쉽게 다룰 수 있게 된다.

 

 

const product = {

    name: "TheBag",

    number: 001,

    weight: 200,

    sales: 92,

};

 

console.log(product);

product.inspiration = "flower";

console.log(product);

console.log(product.inspiration)

이런 식으로 객체의 키값에 “flower”라는 데이터를 넣으면 객체에 데이터를 넣을 수 있다.