TIL 09 | Object (객체)

dk.han·2021년 8월 1일
0
post-thumbnail

Object

이전에 데이터들을 모아서 하나의 변수에 할당 방법인 Array(배열)에 대해서 배웠다.
Object(객체)도 배열과 비슷하게 여러 데이터들을 모아 하나의 변수에 할당하는 방법이다.

예를 들어 나에 대한 정보를 변수에 담아보자.

const name = "daekuen"
const age = "34"
const nation = "korea"
const city = "seoul"
const hobby = "lol"

한명의 정보를 담는데 무려 5개의 변수를 만들어 줘야한다.
10명, 20명의 정보를 담으려면 너무 많은 변수가 만들어져야 하기 때문에 비효율적이다.

그럼 배열로 정보의 value를 묶어서 변수로 만든다면?

const myInfo = ["daekuen", "34", "korea", "seoul", "lol"]

myInfo의 변수 하나에 데이터들을 모아서 깔끔하게 정리가 가능하지만,
각각의 element들이 무엇을 의미하는지는 변수를 만든 사람만이 알 수 있다.

이렇게 데이터들의 의미를 담은 propertyvalue를 함께 저장할 수 있는 방법이 Object 이다

const myInfo = {
  name: "daekuen",
  age: "34",
  nation: "korea",
  city: "seoul",
  hobby: "lol"};

name, age, nation, city, hobby와 같은 property 들을 key 라고 부른다.
즉 Object는 key 와 value의 집합체라고 할 수 있다.

추가, 삭제 방법.

Object가 만들어진 후 다른 key와 value를 추가하거나 삭제가 가능하다.

const myInfo = {name: "daekuen", age: "34"};

//add
myInfo.email = abc@gmail.com;
// output myInfo = {name: "daekuen", age: "34", email: abc@gmail.com;};

//remove
delete myInfo.age;
// output myInfo = {name: "daekuen", email: abc@gmail.com;};

Object의 value를 사용하는 방법.

1. Dot notation
코딩 할 때 일반적으로 사용하는 방법이다.
코딩하는 그 순간 key에 해당하는 값을 가져오고 싶을때는 Dot notation을 사용한다.

const myInfo = {
  name: "daekuen",
  age: "34",
  nation: "korea",
  city: "seoul",
  hobby: "lol"
};

myInfo.name; // 'daekuen'
myInfo.city; // 'seoul'

2. Braket notation
이 방법에서 주의해야 할 점은 key는 항상 string으로 써주어야 한다.
Braket notation은 runtime(실시간)에서 key가 결정될 때 사용한다.
예를 들어 웹을 사용하는 유저의 input 따라 key이 결정되는 함수를 사용한다면
코딩하는 그 순간에는 어떤 key가 사용될 지는 알 수가 없다.
즉 동적으로 key에 관련된 value를 받아와야 할 때 쓰이게 된다.

const myInfo = {
  name: "daekuen",
  age: "34",
  nation: "korea",
  city: "seoul",
  hobby: "lol"
};

myInfo["name"]; // 'daekuen'
myInfo["city"]; // 'seoul'

Constructor function

변수의 이름만 다르고 내용은 거의 비슷한 Object가 있다면 함수를 만들어 쓸 수 있다.
Object를 만드는 용도의 함수라면 함수이름은 대문자로 시작하는게 일반적이다.

const person1 = {name: 'bob', age: 2};
const person2 = {name: 'steve', age: 3};
const person3 = {name: 'dave', age: 4};
const person4 = new Person('daekuen', 40);

function Person(name, age) {
    this.name = name;
    this.age = age;
} 

console.log(person4);
//output Person {name: "daekuen", age: 34}

in operator

  • (key in object)
    Object내에 property가 존재하는지 체크하는 방법.
    boolean으로 결과를 return한다.
const myInfo = {
  name: "daekuen",
  age: "34",
  nation: "korea",
  city: "seoul",
  hobby: "lol"
};

console.log( 'name' in myInfo ) // output true
console.log( 'job' in myInfo ) // output false

대량의 데이터를 다룰때 유용한 방법인 배열과 객체에 대해서 알아보았다.

아주 기본적인 방법에 대해서만 배웟으므로 이를 활용한 방법들에 대해 배우게되면

다시 블로그를 통해 업데이트 하자.

0개의 댓글