(JS) 객체 기본, 순수 객체

자바스크립트에는 여덟가지 자료형이 있다.

그 중 일곱개(숫자형, 문자열, 불린값 등)는 오직 하나의 데이터만 담을 수 있어 원시형(Primitive type)라고 불린다.

 

객체형은 원시형과 달리 다양한 데이터를 담을 수 있다.

(키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장할 수 있다.)

객체는 자바스크립트의 거의 모든 면에 녹아있는 개념이므로 자바스크립트를 잘 다루려면 객체를 잘 이해하고 있어야 한다.

 

객체는 중괄호 {...}를 이용해 만들 수 있다.

중괄호 안에는 '키(key) : 값(value)' 쌍으로 구성된 프로퍼티(property)를 여러개 넣을 수 있는데

키에는 문자형, 값엔 모든 자료형이 허용된다.

프로퍼티 키는 프로퍼티 이름이라고도 불리운다.

 

 

서랍장을 상상하면 객체를 이해하기 쉽다.

 

복잡한 서랍장에서도 이름표(key)를 보고 쉽게 원하는 자료를 찾을 수 있다.

객체라는 서랍장 안에서 키를 이용해 프로퍼티를 쉽게 찾아서 작업을 할 수 있다.

 

빈 객체를 만드는 방법

빈 객체를 만드는 방법은 두 가지가 있다.

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

{ }를 이용해 객체를 선언하는 것을 객체 리터럴(object literal)이라고 부른다.

객체를 선언할 땐 주로 이 방법을 이용한다.

 

리터럴과 프로퍼티

중괄호 { } 안에는 '키:값' 쌍으로 구성된 프로퍼티들이 들어간다.

let user = {
  name: 'John', // 키 : 'name', 값: 'John'
  age: 30, // // 키 : 'age', 값: '30'
};

콜론 : 을 기준으로 왼쪽에는 키가, 오른쪽엔 값이 위치한다.

프로퍼티 키는 프로퍼티 '이름' 혹은 '식별자'라고도 부른다.

 

 

서랍장(객체 user)안에 파일 두개(프로퍼티 두개)가 담겨있는데, 각 파일에 'name', 'age'라는 이름표가 붙어있다라고 생각해보자.

user라는 객체(서랍장)에 name, age라는 프로퍼티(파일)가 있다.

 

개발자는 객체에 프로퍼티를 추가하고 삭제할 수 있다.

점 표기법(dot notation)을 이용하면 프로퍼티 값(property value)을 읽는 것도 가능하다.

// 프로퍼티 값 읽기
console.log(user.name); // John
console.log(user.age); // 30

 

프로퍼티 값(property value)엔 모든 자료형이 올 수 있다.

불린형 프로퍼티를 추가해보자.

user.isAdmin = true;

위와 같이 입력하면 isAdmin이라는 프로퍼티가 생긴다.

isAdmin이라는 키와 true값을 가진 프로퍼티가 user 객체 안에 생성되었다.

 

delete 연산자를 사용하면 프로퍼티를 삭제할 수 있다.

delete user.age;

 

 

 

객체의 프로퍼티에서, 키의 이름으로는 문자열이 허용된다.

이 때 여러단어를 조합해 프로퍼티 이름을 만든 경우에는 이름을 따옴표로 묶어줘야한다.

let user = {
  name: "John",
  age: 30,
  "like birds": true, // 키에 띄어쓰기가 있으면 따옴표로 묶어줘야한다.
} // 마지막 프로퍼티의 끝은 쉼표로 끝날 수 있다. (trailing, hanging)

---

대괄호 표기법

// 문법 에러가 발생한다
user.likes birds = true

자바스크립트는 위와 같은 코드를 이해하지 못한다.

user.likes 까지는 이해하다가 예상치 못한 띄어쓰기 이후의 birds를 만나면 문법 에러를 뱉어낸다.

 

'점'은 유효한 변수 식별자인 경우에만 사용이 가능하며 유효한 변수 식별자엔 공백이 없다.

또한 숫자로 시작하지 않아야하며 $와 _를 제외한 특수문자가 없어야 한다.

 

키가 유효한 식별자가 아닌 경우에는 점 표기법 대신 '대괄호 표기법(square bracket notation)'이라 불리는 방법을 사용할 수 있다. 대괄호 표기법은 키에 어떤 문자열이 있던간에 동작한다.

// declaration object
let user = {};

//set
user['like birds'] = true;

//get
console.log(user['like birds']);  // true

// delete
delete user['like birds'];

 

대괄호 표기법은 문자열 뿐만 아니라 모든 표현식의 평가 결과를 프로퍼티 키로 사용할 수 있다.

// declaration object
let user = {};

//set
user['like birds'] = true;
let key = 'like birds';

console.log(user[key]);

표현식 key의 값은 'like birds' 이다.

이것을 user[key] 처럼 입력한다면

user[key = 'like birds'] 처럼 읽혀서 결국은 user['like birds']가 되어 true가 반환된다.

이런식으로 모든 표현식의 평가 결과를 프로퍼티 키로 사용할 수 있다.

 

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

let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "name");

// 변수로 접근
alert( user[key] ); // 30 (프롬프트 창에 "age"을 입력한 경우)

점 표기법으로는 이러한 방식을 사용할 수 없다.

---

계산된 프로퍼티(Computed property)

객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러쌓여 있는 경우, 이를 계산된 프로퍼티(computed property라고 한다.

let fruit = prompt('어떤 과일을 구매하시나요?', 'orange');

let bag = {
    [fruit] : 5,
};

alert(bag.orange);

위 예시에서 [fruit]는 프로퍼티 이름을 변수 fruit에서 가져오겠다는 것을 의미한다.

사용자가 대화상자에 orange를 입력했다면 bag엔 {orange : 5}가 할당된다.

ooo를 입력했다면 {ooo : 5}가 할당되었을 것이다.

 

let fruit = prompt('어떤 과일을 구매하시나요?', 'orange'); // fruit에 할당받음.
let bag = {}; // bag 객체 생성
console.log(fruit); // fruit에 할당받은 값 확인 
bag[fruit] = 5; // bag.fruit(동적)의 값은 5가 됨.
console.log(bag); // fruit(동적) : 5

 

let fruit = 'apple';
let bag = {
    [fruit + 'Computers'] : 5
}
console.log(bag.appleComputers);

이런식으로 다소 복잡하게 운용도 해볼 수 있다.

---

프로퍼티 값 단축 구문(property value shorthand)

실무에서 프로퍼티 값을 기존 변수에서 받아와 그대로 사용해야 하는 경우가 있다.

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

let user = makeUser("John", 30)
console.log(user.name);
console.log(user.age);

 

이런 경우

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

let user = makeUser("John", 30)
console.log(user.name);
console.log(user.age);

이런 식으로 프로퍼티 길이를 단축할 수 있다.

 

---

프로퍼티 이름의 제약사항

변수 이름(키)엔 'for', 'let', 'return' 같은 예약어를 쓰면 안된다.

하지만 객체프로퍼티에는 이러한 제약이 없다.

// 예약어를 키로 사용해도 괜찮습니다.
let obj = {
  for: 1,
  let: 2,
  return: 3
};

alert( obj.for + obj.let + obj.return );  // 6

 

__proto__의 경우에는 제약이 되는데

이는 나중에 공부하는대로 포스팅하겠다.

---

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

자바스크립트 객체의 중요한 특징 중 하나는 다른 언어와는 달리, 존재하지 않는 프로퍼티에 접근하려 해도

에러가 발생하지 않고 undefined를 반환한다는 것이다.

 

이런 특징을 응용하면 프로퍼티의 존재 여부를 쉽게 확인할 수 있다.

let user = {};
console.log(user.dddddd === undefined); // true

 

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

'key' in object

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

console.log('age' in user); // true
console.log('kukulza' in user); // false

in 왼쪽엔 반드시 프로퍼티 이름이 와야하며, 프로퍼티 이름은 보통 따옴표로 감싼 문자열이다.

따옴표를 생략하면 엉뚱한 변수가 조사 대상이 된다.

let user = { age: 30 };

let key = "age";
console.log( key in user ); // true, 변수 key에 저장된 값("age")을 사용해 프로퍼티 존재 여부를 확인한다.

 

'for...in' 반복문

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

let user = {
    name: "John",
    age: 30,
    isAdmin: true
  };
  
  for (let ppap in user) {
    // 키
    console.log(ppap);  // name, age, isAdmin
    // 키에 해당하는 값
    console.log(user[ppap]);; // John, 30, true
  }

 

 

---

요약

객체는 몇가지 특수한 기능을 가진 연관 배열(associative array)이다.

객체는 프로퍼티(키:값 쌍)를 저장한다.

(프로퍼티는 보통은 문자열이고, 값은 어떠한 자료형도 가능하다.)

 

• 점표기법 : obj.property
• 대괄호표기법 : obj["property"]

 

객체엔 다음과 같은 추가 연산자를 사용할 수 있다.

• 프로퍼티를 삭제하고 싶을 때 : delete obj.property
• 해당 key를 가진 프로퍼티가 객체 내에 있는지 확인하고자 할 때 : "key" in obj
• 프로퍼티를 나열할 때 : (let key in obj)

지금까지는 순수 객체(plain object)라 불리는 일반 객체에 대해 학습했다.

자바스크립트에는 일반 객체 이외에도 다양한 종류의 객체가 있다.

• Array - 정렬된 데이터 컬렉션을 저장할 때 쓰임
• Date - 날짜와 시간 정보를 저장할 때 쓰임
• Error - 에러 정보를 저장할 때 쓰임
• 기타 등등...