-
객체 (Object)FRONTEND/Javascript 2022. 7. 18. 11:44
객체
원시형(primitive type)
자바스크립트 여덟 가지 자료형 중 일곱 개는
오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있음객체(object)
다양한 데이터를 담을 수 있음.
키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장.
주소록에 적합한 자료 구조.객체는 자바스크립트 거의 모든 면에 녹아있는 개념이므로 자바스크립트를 잘 다루려면 객체를 잘 이해해야함
1. 객체 선언
let objectName = {
keyName1 :'valueName1',
keyName2 :'valueName2',
keyName3 :'valueName3'
}
(객체 리터럴 문법)
중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property) 를 여러 개 넣을 수 있는데, 키엔 문자형, 값엔 모든 자료형이 허용.let user = { firstName : ‘yebbang', lastNanme : ‘kim’, email : mm@gmail.com, city : ‘Busan’ } 여기서 firstName은 key ‘yebbang’은 value. (key - value pair)
- const로 선언된 객체는 수정 가능
const user = { name: "John" }; user.name = "Pete"; // (*) alert(user.name); // Pete
(*)로 표시한 줄 오류 발생 x.
const는 key만 고정, value는 고정 x
user=...를 전체적으로 설정하려고 할 때만 오류 발생.2. 조회
1) dot notation
key값이 정적일 때
user.firstName ; // 'yebbang'
2) bracket notation
key값이 동적일 때
User[‘firstName’]; // ‘webbing’
3) in 연산자
object에 해당하는 key가 있는지 확인
tweet { writer : ’yebbang’; createAt:2022-01-01 12-03:33; content :'댓글’; } ‘content’ in tweet; // true ‘age’ in tweet; // false
ex) tweet에서 key ‘writer’ 값을 불러올 때
tweet { writer : ’yebbang’; createAt:2022-01-01 12-03:33; content :'댓글’; } tweet.writer; // ‘yebbang’ tweet[‘writer’]; ‘yebbang' let keyname = ‘writer' tweet[keyname] // ‘yebbang' tweet[keyname] === tweet[‘writer’]
3.추가
objectName[ ‘keyName’ ] = ‘value'
objectName.keyName = ‘value'ex)tweet에 key, value 값을 추가할 때
tweet { writer : ’yebbang’; createAt:2022-01-01 12-03:33; content :'댓글’; } tweet[ ‘category’ ] = ‘잡담' tweet.isPublic = true; tweet.tags = [‘#일상’, ‘#소통’]
4.변경
tweet { writer : ’yebbang’; createAt:2022-01-01 12-03:33; content :'댓글’; } tweet.writer = 'doong' tweet['writer']= 'doong' // tweet.writer === 'doong'
5.삭제
delete objectName['keyName']
delete tweet[‘writer’]
6. key값들의 배열 만들기
const obj = { a: 1, b: 2, c: 3, }; Object.keys(obj) // [a, b, c]
'FRONTEND > Javascript' 카테고리의 다른 글
스코프 (Scope) (0) 2022.07.18 원시 자료형과 참조 자료형 (0) 2022.07.18 배열 (Array) (0) 2022.07.18 자료형의 종류와 설명 (0) 2022.07.18 변수 선언 방법과 차이 (let / var / const) (0) 2022.07.18