[JavaScript] 객체(1) - 기본

 JavaScript에는 여덟 가지 자료형이 존재하면서 이 중 일곱 가지 자료형은 문자열, 숫자와 같이 오직 한 종류의 데이터를 저장하는 원시형과 이번 게시글에서 다룰 객체다.

 

 한 종류의 데이터만 담을 수 있는 원시형과 달리 객체는 여러 종류의 데이터를 담을 수 있고, 이 데이터들을 키로 구분한다. 객체는 JavaScript에서 거의 모든 면에 녹아있기 때문에 JavaScript를 잘 다루려면, 객체를 잘 이해하고 있어야 한다.

 

 객체를 만드는 방법은 객체 생성자 문법을 이용하여 만드는 방법과 객체 리터럴을 이용하여 만드는 방법이 존재한다.

const obj = new Object(); // 객체 생성자 문법
const obj = {} // 객체 리터럴 문법

 

 한 객체를 살펴보며 객체에 대해 좀 더 자세히 살펴보자.

const user = {
  name: "Jaeyoon", // 키: "name", 값: "Jaeyoon"
  age: 24, // 키: "age", 값: 24
 }

 객체에는 키: 값 쌍으로 구성된 프로퍼티가 들어가게 되고 ':'를 기준으로 왼쪽에 존재하는 것이 키, 오른쪽에 존재하는 것이 값이다. 키에는 문자열과 심볼형, 두 가지 자료형만 가능하고 값에는 모든 자료형이 가능하다. 따라서, 현재 user라는 객체에는 두 가지 프로퍼티가 존재하는 것이며, 표현하자면 name 프로퍼티와 age 프로퍼티가 존재한다고 생각하면 된다.

 

 객체에 저장된 정보는 접근 추가, 수정, 삭제가 가능하다.

// 접근
console.log(user.name) // 'Jaeyoon'

// 추가
user.address = "Suwon"
console.log(user.address) // 'Suwon'
console.log(user["address"]) // 'Suwon'

// 수정
user.address = "Seoul"
console.log(user.address) // 'Seoul'

// 삭제
delete user.address
console.log(user.address) // undefined

 추가 문맥에서 두 가지 방법으로 객체에 추가한 정보를 접근하는 방법이 나와있는데, user.address와 같이 obj.key로 표기하는 방법을 점 표기법, obj[key]로 표기하는 방법을 대괄호 표기법이라고 한다. 점 표기법과 대괄호 표기법의 차이점은 키가 복수의 단어로 이루어져 있을 때, 점 표기법을 이용하면 에러를 보게 되지만 대괄호 표기법은 에러를 보지 않는다. 예시와 함께 살펴보자.

// 추가
user["likes JavaScript"] = true

console.log(user) // {name: 'Jaeyoon', age: 24, likes JavaScript: true}

console.log(user["likes JavaScript"]) // true
console.log(user.likes JavaScript) // Uncaught SyntaxError: Unexpected identifier

user라는 객체에 키는 "likes JavaScript, 값은 true라는 boolean 자료형의 데이터를 프로퍼티로 넣어주었고, console.log(user)를 통해 넣어주려는 프로퍼티가 잘 들어갔는지 확인할 수 있다. 하지만, 접근할 때 추가한 것처럼 user["likes JavaScript"]는 문제없이 잘 되지만, user.likes JavaScript는 에러 나는 것을 확인할 수 있다. 점은 키가 '유효한 변수 식별자'인 경우에만 사용할 수 있다.

 

유효한 변수 식별자란, 변수가 숫자로 시작하지 아니하고, 공백이 없어야 하며, $와_를 제외한 특수문자가 들어가지 않는 변수를 말한다.

 

따라서, 유효한 변수 식별자가 아닌 프로퍼티에 접근할 때는 대괄호 표기법을 이용하여 객체에 접근해야 한다.

 

 

게시글에 문법 오류나 맞춤법에 틀린 것이 있다면 jaeyoon4819@naver.com으로
메일 주세요!