// 객체 심화
1. 축약 표현
// 프로퍼티 축약 표현
const name = "kim";
const age = 20;
const obj = {
name: name,
age: age
};
obj // {name: 'kim', age: 20}
// 축약
const obj = {
name,
age
};name, age라는 변수를 obj객체에 프로퍼티 값으로 할당할 때 각 변수이름과 똑같은 키값을 사용하고 있다.
키값과 변수 값이 동일한 경우 키값(프로퍼티 이름) 생략 가능
// 메서드 축약 표현
객체는 변수, 값, 함수를 프로퍼티로 가질 수 있다. 객체의 프로퍼티로 선언된 함수를 메서드라고 한다.
const obj = {
greeting: function() {
console.log('Hi!');
}
// or
greeting() {
console.log('Hi!');
}
};
obj.greeting();
*연습 문제* 유저 객체 - 이름 나이 직업, 이름출력메서드
const user = {
name: 'John',
age: '20',
job: 'Designer',
getName() {
console.log(this.name);
}
}
user.getName();
2. 객체 반복
// for in : 객체의 키 개수만큼 반복 첫번째 키값부터 마지막 키값까지 순회하는 반복문
// 배열은 forEach() map() 사용
const obj = {
x: 10,
y: 20,
z: 30
};
for (value in obj) {
console.log(value); // x y z
}
3. 열거
// Object.keys() : 주어진 객체의 키값들을 배열로 반환
// Object.values() : 객체의 값을 배열로 반환
// Object.entries() : 키와 값의 쌍을 각각의 배열로 반환
// hasOwnProperty() : 객체가 주어진 프로퍼티를 가지고 있는지 t f
const obj = {
x: 10,
y: 20,
z: 30
};
// Object.keys(obj)
Object.keys(obj); // ['x', 'y', 'z']
// Object.values(obj)
Object.values(obj); // [10, 20, 30]
// Object.entries(obj)
Object.entries(obj);
// [['x', 10], ['y', 20], ['z', 30]];
// hasOwnProperty()
obj.hasOwnProperty('x'); // t
4. 선택적 연결 연산자
// optional chaining
// 존재하지 않을수도 있는 프로퍼티에 안전하게 접근할 수 있도록 해주는 ?. 연산자
const data = {};
console.log(data.user.name); // 타입에러
console.log(data.user?.name);
// ?. 연산자 앞에 위치한 대상이 null 또는 undefined인 경우
// 더이상 하위객체로 접근하지 않고 undefined를 반환한다.
// 에러는 발생 x
5. 프로퍼티 키 동적생성
const arr = ['name', 'age', 'job'];
const obj = {
arr[0]: 'John',
} // 에러
// 프로퍼티 값 동적 생성
const obj = {};
obj[arr[0]] = 'John';
obj[arr[1]] = 20;
obj[arr[2]] = 'Rock star';
obj // {name: 'John', age: 20, job: 'Rock star'}
// 사용자가 입력한 값을 사용해 프로퍼티 키를 동적으로 생성하는 코드
const obj = {};
const key = prompt();
obj[key] = key;
※ 자바스크립트 독학백서 정리
'Web > Java Script' 카테고리의 다른 글
| [js 독학백서] 따라하는 걸음마 문제 #2 현재 시간 출력 (clock.js) (0) | 2022.01.12 |
|---|---|
| [js 독학백서] 따라하는 걸음마 문제 #1 할 일 등록하기 (TodoList) (0) | 2022.01.12 |
| [js 독학백서] 4. 배열 심화 (0) | 2021.12.30 |
| [js 독학백서] 3. 문자열 심화 (0) | 2021.12.23 |
| [js 독학백서] 기초 문법 part. 2 ( 조건문, 반복문, 함수) (0) | 2021.12.23 |