Object

객체(object)는 자바스크립트 데이터 타입 중 하나이다. key/value쌍으로 이루어져있고 배열과는 다르게 순서가 중요하지 않다. 객체는 다양한 데이터를 담을 수 있다, 키로 구분된 데이터 집합이나 복잡한 개체를 저장할 수도 있다.

구문

// 객체 초기자 또는 리터럴
// 콜론으로 나누어져 있는 키와 값의 쌍
{ [ nameValuePair1[, nameValuePair2[, ...nameValuePairN] ] ] }

// 생성자
new Object([value])

// 생성 방법
var newObject = new Object(); // 객체 생성자 문법
var newObject = {}; // 객체 리터럴 문법

예시

// 변수 o에 빈 object객체를 저장
var o = new Object();
var o = new Object(undefined);
var o = new Object(null);

// user 객체 생성
var user = {
  name: "velog",
  age: 24
};

속성(property), 키(key), 값(Value)

// user 객체 생성
var user = {
  name: "Gildong Hong",
  age: 24
};

콜론(:)을 기준으로 왼쪽은 key, 오른쪽은 value가 위치한다.
property는 해당 객체의 특징이며 보통 데이터구조와 연관된 속성을 나타내며 콤마로 구분되는것을 객체의 속성이라고 부른다. 객체 user에는 두개의 프로퍼티가 있다. (name : "Gildong Hong",age: 24)

객체 속성에 접근하는 방법

자바스크립트에서는 두가지 방법으로 객체의 프로퍼티를 참조할 수 있다.

object.property (Dot Notation)
object['property'] (Bracket Notation)

Dot Notation

var user = {
  name: "Gildong Hong",
  age: 24
};

//Dot Notation
var userName = user.name 

object.property로 사용할 수 있고, 어떤 객체의 key 값을 정확히 알고 있을때 사용할 수 있는 방법이다.
Dot Notation은 키가 유효한 변수 식별자인 경우에만 사용이 가능하다.
유효한 변수 식별자에는 공백이 들어갈 수 없고 숫자로 시작하지 않아야하며 $와 _를 제외한 특수문자는 포함될 수 없다.

Bracket Notation

var user = {
  first name: "Gildong",
  last name: "Hong",
  age: 24,
  
};

var userFirstName = user.first name // ERROR

// bracket Notation
var userFirstName = user['first name']

여러 단어를 조합해 프로퍼티 키를 만든 경우, Dot Notation을 사용할 수 없다. 키가 유효한 변수 식별자가 아닌 경우 점 표기법 대신 대괄호 표기법을 사용할 수 있다. 대괄호 표기법은 키에 어떤 문자열이 있던지 상관 없이 동작한다. 대괄호 표기법안에서 문자열을 사용할때는 문자열을 따옴표로 묶어주어야 한다.

객체 속성 수정, 추가, 삭제

객체 속성 수정과 추가

var user = {
  name: "Gildong Hong",
  age: 24
};

// 객체 속성 수정
user.name = 'Jenny Kim'; // gildong Hong -> Jenny Kim
user[age] = 26; // 24 -> 26

// 객체 속성 추가
user.gender = 'female'

점 표기법과 대괄호 표기법으로 객체의 속성에 접근하여 값을 할당할 수 있다. 만약 접근하려는 속성이 객체에 존재하지 않는다면 속성이 추가되고, 이미 존재한다면 기존 속성값이 변경된다.

객체 속성 삭제

var user = {
  name: "Jenny Kim",
  age: 26,
  gender: 'female'
};

delete user.age;
delete object[age];

console.log(user.age); // output: undefined

객체의 속성을 삭제할때는 delete 연산자를 사용한다. 점표기법, 대괄호 표기법 모두 사용 가능하다. 삭제된 속성을 콘솔로 찍는다면 모두 undefined를 리턴한다.

객체 안의 객체, 객체 안의 배열

객체의 value에는 모든 타입의 자료형을 데이터로 사용할 수 있기 때문에 객체 안에 객체를 넣는것, 객체 안에 배열을 넣는 것 또한 가능하다.

const user = {
  name: {
    first name : "Jenny",
    last name : "Kim"
  },
  age: 26,
  gender: 'female' 
 
}

const myCloths = [
    {
        type: "top",
        list: [
            "short-sleeve",
            "long-sleeve",
            "dress-shirt",
        ]
    },
    {
        type: "bottom",
        list: [
            "jean",
            "skirt",
        ]
    }
]

객체 안의 객체에 접근하는 방법

...

let userFirstName = user.name['first name'];

객체 안의 배열에 접근하는 방법

let foundJean = myCloths[1].list[0];

참고
Object - JavaScript | MDN
JavaScript 객체 기본 - Web개발 학습하기 | MDN
객체