객체

자바스크립트는 객체 기반의 스크립트 언이이다. 자바스크립트를 이루고 있는 거의 모든 것이 객체이다. 원시 타입을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체로 이루어져 있다.

객체는 여러가지 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입이다.

객체는 중괄호 {...}를 이용해 만들 수 있고 중괄호 안에는 '키(key) : 값(value)' 쌍으로 구성된 프로퍼티를 여러 개 넣을 수 있는데 키(key)엔 문자형, 값(value)엔 모든 자료형이 허용된다.

let user = {     // 객체
  name: "John",  // 키: "name",  값: "John"
  age: 30        // 키: "age", 값: 30
};

위 와 같이 클론(:)을 기준으로 왼쪽엔 키가 오른쪽엔 값이 위치한다. 객체 user에는 프로퍼티가 두 개가 존재한다.

1. 첫 번째 프로퍼티 : "name" 과 "John"
2. 두 번째 프로퍼티 : "age" 와 30

객체는 프로퍼티 값을 읽는 것도 가능하다.

console.log(user.name); // John
console.log(user.age); // 30

추가, 삭제, 수정

프로퍼티 값엔 모든 자료형이 올 수 있다. 프로퍼티를 추가할 수 도 있다는 말이다.

user.isAdmin = true;

console.log(user.isAdmin); // true

추가를 할 수 있다면 삭제도 할 수 있다.

delete user.age;

const로 선언된 객체는 수정도 가능하다.

const user = {
  name: "John"
};

user.name = "Pete"; // (*)

console.log(user.name); // Pete

프로퍼티 이름을 만들 때 여러 단어를 조합해서 만들고 싶다면 프로퍼티 이름을 따옴표(",')로 묶어줘야 한다.

let user = {
  name: "John",
  age: 30,
  "likes birds": true  // 복수의 단어는 따옴표로 묶어야 합니다.
};

따옴표를 써서 만든 프로퍼티 이름은 일반적으로 사용 했던 user.likes birds 와 같이 사용이 불가능하다.

대괄호 표기법

user.likes birds = true

자바스크립트는 위와 같은 코드를 이해하지 못한다. 변수 식별자엔 공백이 없어야 하고, $와_를 제외한 특수문자가 없어야 인식할 수 있다.

키가 유효한 변수 식별자가 아닌 경우엔 점 표기법 대신에 대괄호 표기법(square bracket notation)이라 불리는 방법을 사용할 수 있다.

let user = {};

// set
user["likes birds"] = true;

// get
console.log(user["likes birds"]); // true

// delete
delete user["likes birds"];

자바스크립트의 객체 구성

1. 네이티브 객체(Native Object)

자바스크립트 언어 규약(ECMAScript)으로 정의되어진 객체. 애플리케이션 전역의 공통 기능을 제공한다. 네이티브 객체는 애플리케이션의 환경과 관계없이 언제나 사용할 수 있다.

• Object, String, Number, Function, Array, RegExp, Date, Math, Boolean, Error(+기타 에러관련 obj), Symbol(ES6), JSON, Promise, Proxy, Map, Set...

2. 호스트 객체(Host Object)

실행 환경에서 제공하는 객체(OS, Web browser에 따라 제공 객체 달라짐)

• 전역객체, BOM, DOM

BOM(Browser Object Model)

브라우저 탭 또는 브라우저 창의 모델을 생성한다. BOM의 최상위 객체는 window 객체이다.

DOM(Document Object Model)

현재 웹페이지의 모델을 생성한다. DOM의 최상위 객체는 document 객체로 전체 문서를 표현한다.

• Event, Ajax

객체의 프로퍼티 참조

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

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

Dot Notation

let user = {
  name: "junsee",
  age: 50,
  getName : function(){
      return "My name i "+this.name
  }
}; // 객체 정의법

console.log(user.name) // junsee

객체의 key 값을 정확히 알고 있을 때 사용할 수 있는 방법이다.

Bracket Notation

let user = {
  name: "junsee",
  age: 50,
  getName : function(){
      return "My name i "+this.name
  }
}; // 객체 정의법

console.log(user['name']) // junsee

user['age']=50 // 객체 특정 키 값을 바꾸는법 2

Dot Notation과 사용법은 비슷하지만 가장 중요한 차이점은 Bracket 안에 변수를 담을 수 있다는 점이다.

객체의 메소드 참조

객체의 메소드를 참조할 때 메소드 뒤에 괄호()를 붙이지 않으면 메소드가 아닌 프로퍼티로 참조하게 된다.

let user = {
  name: "junsee",
  age: 50,
  getName : function(){
      return "My name i "+this.name
  }
}; // 객체 정의법

console.log(user.getName()) // junsee
console.log(user.getName) //return "My name i "+this.name

in 연산자로 프로퍼티 존재 여부

in 연산자를 사용하여 객체의 프로퍼티가 존재하는지 확인할 수 있다. boolean 값을 리턴한다.

let user = { name: "John", age: 30 };

console.log( "age" in user ); // user.age가 존재하므로 true가 출력됩니다.
console.log( "blabla" in user ); // user.blabla는 존재하지 않기 때문에 false가 출력됩니다.

‘for…in’ 반복문

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

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (let key in user) {
  console.log( key );  // name, age, isAdmin
  console.log( user[key] ); // John, 30, true
}

객체 정렬 방식

정수 프로퍼티는 자동으로 정렬되고 그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬된다.

let codes = {
  "49": "독일",
  "41": "스위스",
  "44": "영국",
  // ..,
  "1": "미국"
};

for (let code in codes) {
  alert(code); // 1, 41, 44, 49
}