객체 : 기본

모던 JavaScript 튜토리얼 내용을 정리 요약한 내용입니다. 자세한 내용은 원본 링크를 참고하시고, 원문에 첨부된 과제도 꼭 풀어보세요!

객체형은 원시형(문자열, 숫자 등)과 달리 다양한 데이터를 담을 수 있습니다. 키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장합니다. 객체는 중괄호 {} 를 이용해 만들 수 있고, 중괄호 안에는'키 : 값' 으로 구성된 프로퍼티를 여러 개 넣을 수 있습니다. 중괄호를 사용해 객체를 선언하는 방법을 객체 리터럴이라고 부릅니다.

let object = {
    name: 'javascript',
    age: 50,
}

프로퍼티의 키는 이름 혹은 식별자라고 부릅니다. 점 표기법을 이용하면 프로퍼티의 키로 값을 출력할 수 있습니다.

object.name 
object.age

객체에 특정 값을 추가하거나 삭제할 수 있습니다.

object.level = "starter" // 추가
delete object.age // 삭제 

여러 단어를 조합해 키를 만들었다면 대괄호 표기법을 사용합니다.

let object = {
    name: 'javascript',
    age: 50,
    "my subject": front-end,
}

object.my subject // 이렇게 쓸 수 없고
object["my subject"] // 대괄호로 표기해야 함

점은 키가 유요한 변수 식별자인 경우 사용할 수 있습니다. 유효한 변수 식별자에는 공백이 없어야 합니다. 이때 변수 키는 런타임에 평가되므로 사용자 입력값 변경에 따라 값이 변경될 수 있습니다. 대신 점 표기법은 아래와 같은 경우 undefined 를 반환하니 주의합니다.

let object = {
    name: 'javascript',
    age: 50,
}

let key = "name"

object[key] // javascript
object.key // undefined

계산된 프로퍼티는 객체 리터럴 안의 프로퍼티 키가 대괄호로 묶여 있습니다. 대괄호를 사용한 계산된 프로퍼티는 기존 점 표기법보다 이름과 값의 제약을 줄여줍니다. 작성은 번거롭지만 더 강력합니다. 그래서 초반에는 점표기법을 사용하다 복잡한 상황이 발생하면 대괄호 표기법으로 바꾸곤 합니다.

let data = "coding"

let object = {
    [data]: 10,
}

object.coding // 10

// 아래처럼 [] 안의 키 조합도 가능

let object = {
    [data + 'study']: 20 // object.codingstudy = 20
};

프로퍼티의 값을 기존 변수에서 받아와 사용하는 경우에는 단축 프로퍼티를 사용할 수 있습니다.

function getInfo(name, age) {
    return {
        name: name,
        age: age,
    },
}	

// 아래처럼 단축 가능

function getInfo(name, age) {
    return {
        name,
        age,
    },
}

자바스크립트 객체는 존재하지 않는 프로퍼티에 접근하려 해도 에러가 나지 않고 undefined 를 반환합니다. 이런 특징을 사용해 프로퍼티의 존재 여부를 확인할 수 있습니다.

let object = {};

object.name === undefined // true

undefined 와 비교하는 것 외에 in 연산자를 사용할 수 있습니다. 프로퍼티의 값 자체가 undefined 라면 undefined로 비교해서 확인할 수 없으니 in 을 사용해야 합니다. 다만 undefined 변수가 프로퍼티의 값인 경우는 흔치 않습니다. 값을 알 수 없거나 비어있다는 것을 나타낼 때는 주로 null 을 사용합니다.

let object = {
    name: 'javascript',
    age: 50,
    number: undefined,
}

'name' in object // true
'grade' in object // false 
'number' in object // ture, 

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

let object = {
    name: 'javascript',
    age: 50,
}

for (let key in object) { // 반복 변수 key 는 다른 이름을 지어도 됨
    alert(key); // name, age
    alert(object[key]) // javascript, 50
}

객체는 특별한 방식으로 정렬됩니다. 정수 프로퍼티는 자동으로 정렬되고, 그 외 프로퍼티는 객체에 추가한 순서대로 정렬됩니다. 정수 프로퍼티는 문자열을 정수 프로퍼티로 변환하거나 변환한 정수를 다시 문자열로 바꿔도 변형이 없습니다. ("49" - 49 는 정수 프로퍼티 "+49" - 49 나 "1.2" - 1 은 정수 프로퍼티 아님)

let grade = {
  "10": "민지",
  "8": "남수",
  "9": "박정",
  "3": "국선"
};

for (let key in grade) {
  alert(key); // 3, 8, 9, 10 - 정수라서 순서대로 정렬
}

// 아래처럼 + 붙여 정수가 아니게 하면 추가된 순서대로 나열

let grade = {
  "+10": "민지",
  "+8": "남수",
  "+9": "박정",
  "+3": "국선"
};

for (let key in grade) {
  alert(key); // 10, 9, 8, 3 - 정수라서 순서대로 정렬
}

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

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