Object(객체)란?

자바스크립트에서는 원시형(primitive type) 그리고 객체형(object type)로 데이터 타입이 나누어진다. 원시형은 오직 하나의 데이터(문자여르 숫자 등)만 담을 수 있다. 하지만 객체형은 원시형과 다르게 다양한 데이터를 담을 수 있다.

객체는 중괄호를 {...} 이용해 만들 수 있다. 중괄호 안에 'key: value' 커플로 구성된 property를 여러 개 넣을 수 있다. key엔 문자형 그리고 value엔 자료형이 허용된다.

객체를 쉽게 생각하려면 서랍장을 생각하자! 서랍장 안 파일은 property, 파일 각각에 붙어있는 name tag는 객체의 key라고 생각하자! 복잡한 서랍장 안에서 name tag를 보고 원하는 파일을 쉽게 찾을 수 있듯이, 객체에서는 key를 이용해 property를 쉽게 찾을 수 있다!

let user = new Object(); // '객체 생성자' 문법
let user = {};           // '객체 리터럴' 문법

리터럴과 프로퍼티

중괄호를 {...} 안에는 'key: value' 커플로 구성된 프로퍼티가 들어간다.

let user = {         // 객체
	name: 'Chris',   // key: 'name', value: 'Chris'
    age: 20          // key: 'age', value: 20
};

서랍장에 파일을 추가하고 뺄 수 있는것 처럼 프로퍼티도 추가 그리고 삭제할 수 있다.

alert(user.name); // Chris
alert(user.age);  // 20
delete user.age;  // property is deleted

여러 단어를 조합해 프로퍼티 이름을 만드는 경우엔 프로퍼티 이름을 "..."로 묶어야 한다.

let user = {
	name: 'Chris',
    age: 20,
    "likes golf": true // 복수의 단어는 따옴표로 묶는다.
};

대괄호 표기법

여러 단어를 조합해 property key를 만든 경우엔, 점 표기법을 사용할 수 없다.

user.likes golf = true // 문법 에러

'점'은 key가 '유효한 변수 식별자'인 경우에만 사용할 수 있다. 유효한 변수 식별자엔 공백이 없어야 한다 그리고 숫자로 시작하면 안되고 $ 와 _를 제외한 특수 문자가 없어야 한다.

let user = {};
user["likes golf"] = true;  // set
alert(user["likes golf"];   // get / true
delete user["likes golf"];  // delete

단축 property

가끔 property들의 key와 value가 동일한 경우가 있다. 이런 경우 아래와 같이 프로퍼티 값 단축 구문(property value shorthand)을 사용하면 된다.

function makeUser(name, age) {
  return {
    name: name,
    age: age,
  };
}

function makeUser(name, age) {
  return {
    name,  // name: name과 같음
    age,   // age: age와 같음
  };
}

'in' 연산자로 프로퍼티 존재 여부 확인하기

연산자 in을 사용하면 프로퍼티 존재 여부를 확인할 수 있다.

"key" in object

Example

let user = {name: "Chris", age: 20};
alert("age" in user);     // user.age는 존재하므로 true
alert("height" in user);  // user.height는 존재하지 않기 때문에 false

'for...in' 반복문

for...in 반복문을 사용하면 객체의 모든 key를 순회할 수 있다.

Grammar:

for (key in object) {
	// 각 property key를 이용하여 body를 실행한다.
}

Example: 아래 예시를 실행하면 객체user의 모든 프로퍼티가 출력됨.

let user = {
	name: "Chris",
    age: 20,
    isAdmin: true
};

for (let key in user) {
  alert(key);        // name, age, isAdmin
  alery(user[key]);  // Chris, 20, true

다음 블로그엔 배열을 알아보도록 하자...

Reference
https://ko.javascript.info/object