티스토리 뷰
객체는 영어로는 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
- 비교 연산자
- filter
- some
- null
- 얕은복사
- redux middleware
- 기본형 데이터
- 타입변환
- 참조형 데이터
- 느슨한 타입(loosely typed)
- findindex
- EVERY
- redux
- undefined
- 동적(dynamic) 언어
- redux thunk
- 불변 객체
- foreach
- map
- redux-middleware
- find
- redux-thunk
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |