안녕하세요
7월19일43일차 - 객체생성, 메소드 , 비구조화할당 본문
객체 생성 방법입니다.
// 1. 객체 리터럴 표기법을 이용한 객체 생성
const young = {
name: "영",
age: 31,
};
console.log(young);
// 2. 객체 생성자함수를 이용한 객체 생성
const han = new Object();
han.name = "한";
han.age = 29;
console.log(han);
객체의 메소드 : 객체는 속성(property)과 함수(method)를 가집니다. property (key: value)
const you = {
name: "유",
하는일: function () {
console.log("허리 펴기");
},
};
console.log(you["name"], you.name);
you.하는일();
객체에서의 this
const gentry = {
name: "젠트리",
age: 19,
하는일: function () {
console.log(this.name + " 허리 펴기");
},
};
gentry.하는일();
객체의 메소드로 ()=> 화살표 함수
const sakura = {
name: "벚꽃",
age: 19,
하는일: () => {
console.log("오치루");
},
};
sakura.하는일();
setInterval 함수로 딜레이를 줄 수 있습니다.
객체 안 일반적인 함수(무명)에서의 this 바인딩. function 안에서 this를 쓰려면 화살표 함수를 이용합니다.
const ame = {
name: "비",
하는일: function () {
setInterval(() => {
console.log(this.name + " 후루");
}, 1000);
},
};
ame.하는일();
// etc. 이벤트리스너에서의 this
// id는 바로 선택을 할 수 있지만 권장하는 방법이 아닙니다.
// document.quarrySelector('#App'), document.getElementById('App')
App.addEventListener("click", function () {
console.log(this); // 이벤트리스너 function에서의 this는 App
});
This.addEventListener("click", () => {
console.log(this); // 화살표함수에서의 this는 window
});
console.log(this) // this는 window
스프레드 연산자를 이용해 객체의 property를 가져올 수 있습니다.
const 동물 = {
leg: 4,
type: "animal",
};
const 소 = {
...동물,
sound: "음머",
};
console.log(동물, 소);
출력결과 : {leg: 4, type: 'animal'} {leg: 4, type: 'animal', sound: '음머'}
비구조화할당, javascript 구조분해할당.
패킹 언패킹과 비슷하지만 위치에 영향을 받지 않고 같은 이름인 변수의 키와 값만이 할당됩니다.
const 객체 = {
name: "han",
age: 10,
nickname: "young",
};
const { a, b, c, name } = 객체;
console.log(a, name);
출력결과 : undefined 'han'
'프론트엔드 국비교육' 카테고리의 다른 글
7월22일46일차 - js로 시계 구현 (0) | 2022.07.24 |
---|---|
7월21일45일차 - 배열2 화살표함수 (0) | 2022.07.21 |
7월18일42일차 - 함수, 호이스팅 (0) | 2022.07.18 |
7월11일37일차 - javascript기초시작, rolling letter (0) | 2022.07.11 |
6월24일28일차 -[html]select, option tag [jquery] change함수 (0) | 2022.06.24 |