자바스크립트-객체지향 개념의 객체(object)
// 1. Literals and properties
const name = 'chan';
const age = 4;
printA(name, age);
function printA(name, age) {
console.log(name);
console.log(age);
}
// 하지만 주소, 가족관계, 학교출신 등등 여러가지 요소가 추가되면 매번 불편해진다.
//이를 해결하기 위해 object를 사용한다.
function printB(person) {
console.log(person.name);
console.log(person.age);
}
//object = { key:value }
const user1 = { name: 'chan', age: 4 }
printB(user1);
const obj1 = {}; //'object literal'
const obj2 = new Object(); //'object constructor'
// 두개는 같은 출력이다.
//object추가
user1.hasJob = true;
console.log(user1.hasJob);
//object삭제
delete user1.hasJob;
console.log(user1.hasJob);
// 2. COmputed properties
console.log(user1.name);
console.log(user1['name']);
// 같은 출력이다.
// 대신 ''가 들어가야한다.
user1['hasJob'] = true;
console.log(user1.hasJob);
// 3. Property value shorthand
const person1 = { name: 'minsoo', age: 2 };
const person2 = { name: 'chan', age: 3 };
const person3 = { name: 'jin', age: 4 };
const person4 = makePerson('hyun', 30);
console.log(person4);
function makePerson(name, age) {
return {
name,
age,
};
}
// 4. Constructor function
const person5 = Person('mom', 45);
function Person(name, age) {
// this = {};
this.name = name;
this.age = age;
// return this;
}
// 5. in operator: property existence check (key in obj)
// 해당하는 키가 object에 있는지
console.log('name' in person1);
// 6. for..in / for..of
for (whatkey in person1) {
console.log(whatkey);
}
/*
for (whatvalue of person1) {
console.log(whatvalue);
}
iterable이 아니기때문에 오류
*/
const array = [1, 2, 3, 4]
for (whatvalue of array) {
console.log(whatvalue);
}
// 6. assign
const userA = { name: 'chan', age: '20' };
const userB = {};
Object.assign(userB, userA);
console.log(userB);
//{name: "chan", age: "20"}
Javascript
👉 pinia기본
2023.05.05
👉 github pages에서 vue router 404 에러
2023.04.03
👉 object의 변수인 경우 ref와 reactive 어느 것을 사용할까
2023.04.02
👉 Route
2023.04.01
👉 Template ref
2023.03.26
👉 provide와 inject
2023.03.25
👉 slots
2023.03.24
👉 nonProps
2023.03.23
👉 v-model을 통한 3depth 양방향 바인딩
2023.03.22
👉 emit, component와 v-model을 통한 양방향 바인딩
2023.03.21
👉 props
2023.03.20
👉 watch
2023.03.19
👉 양방향 바인딩
2023.03.18
👉 event Parameter
2023.03.17
👉 Scope와 Closure
2023.03.17
👉 classStyleBinding
2023.03.16
👉 computed
2023.03.15
👉 Ref와 Reactive
2023.03.14
👉 notion page를 웹사이트에 삽입하기
2022.01.25
👉 Json
2021.04.16
👉 Javascript 배열
2021.04.15
👉 Javascript 객체
2021.04.14
👉 Javascript 클래스
2021.04.13
👉 Javascript 함수
2021.04.12
👉 Javascript 변수심화
2021.04.11
👉 Javascript 변수
2021.04.10
Frontend
👉 pinia기본
2023.05.05
👉 github pages에서 vue router 404 에러
2023.04.03
👉 object의 변수인 경우 ref와 reactive 어느 것을 사용할까
2023.04.02
👉 Route
2023.04.01
👉 Template ref
2023.03.26
👉 provide와 inject
2023.03.25
👉 slots
2023.03.24
👉 nonProps
2023.03.23
👉 v-model을 통한 3depth 양방향 바인딩
2023.03.22
👉 emit, component와 v-model을 통한 양방향 바인딩
2023.03.21
👉 props
2023.03.20
👉 watch
2023.03.19
👉 양방향 바인딩
2023.03.18
👉 event Parameter
2023.03.17
👉 Scope와 Closure
2023.03.17
👉 classStyleBinding
2023.03.16
👉 computed
2023.03.15
👉 Ref와 Reactive
2023.03.14
👉 notion page를 웹사이트에 삽입하기
2022.01.25
👉 간단한 반응형 메뉴갖는 웹 만들기
2021.08.04
👉 Json
2021.04.16
👉 Javascript 배열
2021.04.15
👉 Javascript 객체
2021.04.14
👉 Javascript 클래스
2021.04.13
👉 Javascript 함수
2021.04.12
👉 Javascript 변수심화
2021.04.11
👉 Javascript 변수
2021.04.10
👉 CSS Centering
2021.04.09
👉 CSS flexbox
2021.04.08
👉 CSS 변수
2021.04.07
👉 CSS Size
2021.04.06
👉 CSS layout
2021.04.05
👉 CSS 기본
2021.04.04
👉 HTML5 Data 속성
2021.04.03
👉 HTML의 다양한 태그
2021.04.02
👉 Visual studio code의 유용한 툴
2021.04.01
👉 HTML 기초
2021.04.01
댓글 쓰기