SEB Section 1 object

object을 왜 쓸까?

• user에 대한 정보를 담아 두기 위해서 변수에 할당을 한다고 가정 해보자

const userFirstname = "Steve";
const userLastname = "Lee";
const userEmail = "steve@email.com";
const userCity = "Seoul";

• 이렇게 user의 정보를 저장을 하게 된다면, 앞으로 user가 추가가 될 때 정보를 저장 하는데 번거로움이 있을 것이다.
• 그렇다면 배열을 이용하여 저장을 해보자.

const user = ["Steve", "Lee", "steve@email.com", "Seoul"];

• 더욱 깔끔하게 user의 정보를 저장 할 수 있지만, 어떤 엘리먼트가 어떤 정보를 갖고 있는지를 모른다.
• 이럴때 사용 하는 것이 객체(object) 이다.

const user = {
  firstName: "Steve", // key : firstname, value: steve
  lastName: "Lee",
  email: "steve@email.com",
  city: "Seoul",
};

• object는 중괄호를 이용하여 만든다.
• 객체는 key와 value의 쌍으로 이루어져 있다.
• key-value 쌍은 쉼표로 구분한다.

객체의 값을 출력하는 방법

1. Dot notation

• 변수명.key를 하면 해당 key의 value 값을 불러 올 수 있다.

const user = {
  firstName: "Steve",
  lastName: "Lee",
  email: "steve@email.com",
  city: "Seoul",
};

user.firstName; //'Steve'
user.city; // 'Seoul'

1. Bracket notation

• 변수명[‘key’] 를 하면 해당 key의 value 값을 불러 올 수 있다.

const user = {
  firstName: "Steve",
  lastName: "Lee",
  email: "steve@email.com",
  city: "Seoul",
};

user["firstName"]; //'Steve'
user["city"]; // 'Seoul'

객체에 key, value 축하기

• dot, bracket notation을 이용해 값을 추가 할 수 있다.

const tweet = {
  wirter: "stevelee",
  createdAt: "2019-09-10 12:03:33",
  content: "프리코스 재밌어요!",
};

tweet["category"] = "잡담";
tweet.isPublic = true;
tweet.tags = ["#코드스테이츠", "#프리코스"];

console.log(tweet); // {wirter: "stevelee", createdAt: "2019-09-10 12:03:33", content: "프리코스 재밌어요!", category: '잡담', isPublic: true, tags: ['#코드스테이츠', '#프리코스']}

객체의 값 삭제하기

• delete 키워드를 사용해 삭제할 수 있다.

const tweet = {
  wirter: "stevelee",
  createdAt: "2019-09-10 12:03:33",
  content: "프리코스 재밌어요!",
};

delete tweet.createdAt;

console.log(tweet); // {wirter: "stevelee", content: "프리코스 재밌어요!",}

객체에 해당하는 키가 있는지 확인

• in 연산자를 사용해서 해당하는 키가 있는지 확인할 수 있다.

const tweet = {
  wirter: "stevelee",
  createdAt: "2019-09-10 12:03:33",
  content: "프리코스 재밌어요!",
};

"content" in tweet; // true
"updatedAt" in tweet; // false