Javascript 객체(object) 사용법, Dot notation, Bracket notation

객체를 사용하는 이유

let userFirstName = 'Steve';
let userLastName = 'Lee';
let userEmail = 'steve@abcdefg.com';
let userCity = 'Seoul';

let userFirstName = 'Jason';
let userLastName = 'Jeong';
let userEmail = 'jason@abcdefg.com';
let userCity = 'Busan';

 

개인 주소록을 만든다고 했을 때, 매번 이런 방식으로 여러 개의 변수를 선언해야한다면 상당히 불편할 것이다.

 

let user = [
  'Steve',
  'Lee',
  'steve@abcdefg.com',
  'Seoul'
]

let user2 = [
  'Jason',
  'Jeong',
  'jason@abcdefg.com',
  'Busan'
]

user[0] // 'Steve'

 

배열로 표현한다면? 위와 같이 나타낼 순 있으나 index로 배열을 조회할 경우 가독성이 심히 떨어질 수 있다.

 

위와 같은 문제점을 보완하기 위해선 객체를 사용할 수 있다.

 

let user = { // 중괄호 (curly bracket)을 이용하여 객체 생성
  firstName: 'Steve',
 // 키(Key)  // 값(Value)
  lastName: 'Lee',
  email: 'steve@abcdefg.com',
  city: 'Seoul'
}

 

객체는 키와 값 쌍(key-value pair)으로 이루어져있다.

키와 값 사이는 콜론(:)으로 구분할 수 있다.

 

그럼 객체를 생성한 이후에 어떻게 사용해야 할까?

 

객체 사용법

Dot notation

let user = {
  firstName: 'Steve',
  lastName: 'Lee',
  email: 'steve@abcdefg.com',
  city: 'Seoul'
}

user.firstName; // 'Steve'
user.city; // 'Seoul'

 

Bracket notation

let user = {
  firstName: 'Steve',
  lastName: 'Lee',
  email: 'steve@abcdefg.com',
  city: 'Seoul'
}

user['firstName']; // 'Steve'
user['city']; // 'Seoul'

 

Dot notation과의 큰 차이점이라면 따옴표의 유무이다.

점 표현법은 키값에 대해 따옴표가 없어도 키를 그대로 인식하여 조회할 수 있으나, bracket notation을 사용할 때에는, bracket 안쪽의 내용을 문자열 형식으로 전달해야 한다.

따옴표를 사용하지 않을 경우?

 

 

위 에러는 정의되지 않은 변수를 참조할 때 발생한다.

firstName이 변수로 취급된 것이다.

 

이 특성에 유의하여 사용할 경우 매우 편리한 코드 작성이 가능할 것이다.