개체 소개 1부

소개
일반적으로 Javascript에서 배열은 정렬된 데이터를 저장하는 좋은 방법입니다. 그러나 그러한 사람의 개인 정보를 주문할 필요가 없는 데이터를 저장하고 싶다면 어떨까요? 여기서 데이터를 객체로 저장하는 것이 매우 유용합니다.

객체 구문
객체를 생성하려면 다음 구문을 사용합니다.

const myObject = {
key:value
}

John이라는 사람의 개인 정보를 가져와서 객체에 저장해 보겠습니다.

const myProfile = {
  name:"John",
  age: 32,
  hair: "brown",
  weight: 175
}

키에 대한 빠른 참고 사항
숫자인 키를 사용하여 객체를 생성하면 문자열로 변환됩니다. 예시:

const myObj = {
32:'Magic Johnson'
// the key 32 will be converted to '32'.
}

개체의 데이터 액세스
배열과 같이 인덱스를 사용하여 데이터에 액세스하는 대신 사용자 정의 키를 사용합니다.

개체의 속성에 액세스하는 방법에는 두 가지가 있습니다.

objectName.propertyName

또는

objectName["propertyName"]

프로필 예를 다시 살펴보고 두 가지 기술을 모두 사용하여 John의 나이에 액세스해 보겠습니다.

const myProfile = {
  name:"John",
  age: 32,
  hair: "brown",
  weight: 175
}

myProfile.age // output 32
myProfile["age"] //  output 32

속성 추가 및 업데이트

John의 프로필에 눈 색깔을 추가하고 싶다면? 다음 구문을 사용하여 간단히 수행합니다.

const myProfile = {
  name:"John",
  age: 32,
  hair: "brown",
  weight: 175
}

myProfile.eye = "blue"

console.log(myProfile)

/* output
{
  name:"John",
  age: 32,
  hair: "brown",
  weight: 175,
  eye:"blue"

}
*/

오, 우리는 실수를 저질렀습니다. John은 실제로 녹색 눈을 가지고 있습니다. 다음을 업데이트해 보겠습니다.

const myProfile = {
  name:"John",
  age: 32,
  hair: "brown",
  weight: 175,
  eye:"blue",
}

myProfile.eye = "green"

// myProfile["eye" = "green" would also work


console.log(myProfile)

/* output
{
  name:"John",
  age: 32,
  hair: "brown",
  weight: 175,
  eye:"green"

}
*/

한 줄의 코드로 볼 수 있듯이 이제 프로필에 John의 눈 색깔이 녹색으로 표시됩니다.

결론

이제 누가 자바스크립트 객체를 만들고 조작하는지 알게 되었습니다. 2부에서는 자바스크립트에서 메소드를 사용하는 방법과 this 키워드를 사용하는 방법과 같은 고급 구문에 대해 자세히 알아보겠습니다.