티스토리 뷰

객체는 영어로는 Object라고 합니다. 지금까지는 변수에 문자열 하나, 숫자 하나, 불린 하나 이런 식으로 값을 하나씩만 저장했는데 만약 여러 가지 값을 한 번에 저장하고 싶다면 객체라는 것을 사용하면 됩니다.

 

'자바스크립트의 모든 것이 다 객체다'라는 말이 있을 정도로 객체는 Javascript의 거의 모든 문법에 녹아있는 개념이기 때문에 자바스크립트를 잘 다루려면 객체를 잘 이해하는 것이 중요합니다.

 

객체를 만드는 방법

객체는 중괄호{}를 통해서 만들 수 있습니다. 이 중괄호 안에는 여러 가지 다양한 값들을 쉼표(,)로 구분해서 저장할 수 있습니다. 객체는 이렇게 다양한 값들이 들어갈 수 있기 때문에 각 값들을 좀 더 명확하게 하기 위해 콜론(;)과 함께 이 값의 이름을 붙여 줘야 합니다. 그래서 들을 영어로 '밸류(Value)'라고 부르고 이 값의 이름들은 '키(Key)'라고 부르는데 이렇게 Key-Value 한 쌍을 객체의 속성, 영어로는 Property라고 부릅니다. 그래서 왼편에 키를 프로퍼티 이름, 영어로는 프로퍼티 네임(Property Name)이라고도 부르고 value는 프로퍼티 값, 프로퍼티 밸류(Property Value)라는 영어로도 부릅니다.

{
  brandName: '코드잇',
  bornYear: 2017,
  isVeryNice: true,
  worstCourse: null
  bestCourse: {
  	title: '자바스크립트 프로그래밍 기초',
    language: 'JavaScript'
  }
}

먼저 프로퍼티 네임은 문자열 타입을가지고 있습니다. 그래서 사실은 프로퍼티 네임을 작성할 때 따옴표로 감싸주어야 하지만 따옴표를 생략하더라도 JavaScript가 암묵적으로 문자열로 형변환을 하기 때문에 일반적으로는 이렇게 따옴표를 생략하고 작성합니다.

 

하지만 따옴표를 생략할 경우에는 변수의 이름을 지을 때와 비슷하게 몇 가지 주의해야 될 부분이 있는데 

Property Name 주의 사항

1. 첫 번째 글자는 반드시 문자, 밑줄(_), 달러기호 ($) 중 하나로 시작!

2. 두 번째는 띄어쓰기를 할 수 없고 

3. 세 번째는 하이픈(-)을 쓸 수가 없습니다.

 

만약에 불가피하게 이런 규칙을 벗어나는 경우에는 반드시 따옴표로 감싸줘야 합니다.

'brand Nmae'처럼 가운데 띄어쓰기가 있거나 'born-Year'처럼 가운데 하이픈이 있거나 혹은'1stCourse'처럼 프로퍼티 네임에 첫 글자에 숫자가 들어가더라도 따옴표로 감싸주면 문제없이 객체를 만들 수는 있습니다. 

 

반면에 프로퍼티 밸류는 모든 자료형 값을 사용할 수가 있는데 문자열, 숫자, 불린, null도 프로퍼티 값이 될 수 있고 심지어 객체 안에 객체를 넣을 수도 있습니다. bestCourse라는 프로퍼티 안에 title과 language라는 프로퍼티가 생기는 것입니다.

이런 식으로 객체를 활용하면 훨씬 더 다양하고 복잡한 데이터 구조를 짤 수도 있습니다.

console.log(typeof{
  brandName: '코드잇',
  bornYear: 2017,
  isVeryNice: true,
  worstCourse: null
  bestCourse: {
  	title: '자바스크립트 프로그래밍 기초',
    language: 'JavaScript'
  }
})

마지막으로 typeof 연산자를 통해서 객체를 콘솔에 출력하게 되면 typeof 연산자는 피연산자의 자료형을 문자열로 리턴해주는 연산자이기 때문에 'object'라는 문자열이 출력되면서 이 값의 자료형이 object, 객체라는 것을 확인할 수 있습니다.

'프론트엔드 > JavaScript' 카테고리의 다른 글

[객체] 03. 객체에서 데이터 접근하기  (0) 2022.09.24
[제어문] 01.if문  (0) 2022.09.23
[추상화] 13. 상수  (0) 2022.09.22
[추상화] 11.변수의 scope  (0) 2022.09.21
[추상화] 09.옵셔널 파라미터  (1) 2022.09.20
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함