일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- 주소창에 naver 입력시 일어나는 일
- 가상 dom
- polyfill
- 자바스크립트의 클래스
- CSS
- 이벤트 캡처링
- async/await
- 자바스크립트 함수
- 스코프 체인
- 서버 사이드 렌더링
- 깊은 복사
- 리액트의 생명 주기
- 실행 컨텍스트
- 세션 스토리지
- 호이스팅
- 리액트
- 자바스크립트
- 브라우저 렌더링원리
- CORS
- react
- MPA
- 변수 생성 단계
- webpack
- 클라이언트 사이드 렌더링
- props와 state 차이점
- 프로미스
- 얕은 복사
- 이벤트 버블링
- 로컬 스토리지
- undeclared
Archives
- Today
- Total
Gapus Dev Blog
[자바스크립트] 객체 본문
객체란?
- 객체는 다양한 데이터를 묶어 각 데이터를 키(key)와 값(value)으로 연결하여 구성한다.
- 구성하는 방법은 { 키: 값 } 형식으로 구성하고 추가 데이터 있으면 콤마(,)로 묶어준다.
- 여러 형식의 데이터를 저장할 때는 배열을 사용하는 것보단, 객체를 사용하는 것이 좋다.
// 기본 구성 방식
let data = {
key: value,
key: value,
};
// 여러 형식의 데이터를 객체로 가능
let info = {
name: "가프스",
age: 30,
job: "개발자",
}
객체의 특징
// 객체 선언
let info = {
name: "가프스",
age: 30,
job: "개발자",
}
// 값 꺼내기
info.name // '가프스'
info['name'] // '가프스'
// 키와 값 삭제
delete info.age // 나이의 키와 값 삭제
info //{ name: '가프스', job: '개발자'}
객체와 배열 같이 사용
// 객체들을 배열에 담아서 선언하기
const info = [
{
name: "가프스", // 1번째 객체
age: 30,
job: "개발자"
},
{
name: "가트넷", // 2번째 객체
age: 25,
job: "학생"
},
{
name: "스넷", // 3번째 객체
age: 35,
job: "기획자"
}
]
// 위 객체들을 깔끔하게 한줄로 적기
const info = [
{ name: "가프스", age: 30, job: "개발자" },
{ name: "가트넷", age: 25, job: "학생" },
{ name: "스넷", age: 35, job: "기획자" }
]
// 배열안의 객체에서 뽑아내기
info[0].name // 가프스
info[0].age // 30
info[0].job // 개발자
// 배열 안의 객체에서 원하는 객체(30살 이상)만 뽑아내기
info.filter((data) => (data.age >= 30))
// classmates = [
// { name: "가프스", age: 30, job: "개발자" },
// { name: "스넷", age: 35, job: "기획자" },
// ]
'프론트엔드 > JavaScript' 카테고리의 다른 글
[자바스크립트] 호이스팅 (0) | 2023.10.19 |
---|---|
[자바스크립트] 조건문 (0) | 2023.01.10 |
[자바스크립트] 데이터타입 (0) | 2023.01.09 |
[자바스크립트] 배열, 문자열 (0) | 2023.01.06 |
[자바스크립트] 변수, 상수 (0) | 2023.01.06 |