🚩 object 만드는 법
객체 리터럴(Object literal)
📝 설명
- 중괄호를 이용하여 객체를 만드는 방법
{ key: value, key: value }의 형태로 되어 있다.
✒ 사용법
입력
js
let apple = {
name: "apple",
display: "🍎",
};
console.log(apple); // { name: "apple", display: "🍎" }출력
- 이미지로 대체
Object class (생성자 함수)
📝 설명
- new Object()를 사용하여 객체를 만드는 방법.
- 중괄호가 new Object를 축약시켜놓은 것이라고 봐도 됨
- Object의 첫 글자는 항상 대문자
✒ 사용법
입력
js
let apple = {
name: "apple",
display: "🍎",
};
console.log(apple); // { name: "apple", display: "🍎" }예제1
js
let apple = {
name: "apple",
// fruit_display: "🍎" // key값으로 특수문자를 쓸 수 없음 ❌ ($, _는 사용 가능하지만 잘 사용❌)
"fruit-display": "🍎", // 문자열에서는 특수문자 가능
1: 200, // key 값은 숫자도 가능 - 맨 앞에 출력
// ["fruit-display"]: "🍏", // 대괄호는 없는 취급.(위의 빨간 사과가 초록 사과로 변경됨)
["fruit-display2"]: "🍏",
};
// 속성, 데이터에 접근하기 위해서 사용
console.log(apple);
console.log(apple.name); // 마침표 표기법 dot notation
console.log(apple["fruit-display2"]); // 대괄호 표기법 braket notation - 대괄호로 불러올 때 .생략 (배열)
// 속성 추가
apple.home = "대구";
console.log("속성 추가", apple);
// 속성 삭제
delete apple["fruit-display2"];
console.log("속성 삭제", apple);출력
- 이미지로 대체
예제1
🔗 참고 링크 & 도움이 되는 링크
🚩 속성 접근자
Dot Notation / Bracket Notation
📝 설명
- 점 또는 괄호로 객체의 속성에 접근한다. 주로 점을 많이 사용함
✒ 사용법
입력
js
const obj = {
name: "누리",
age: 4,
};
// 코딩하는 시점에 정적으로 접근 (이미 코딩된 파일 내용을 실행)
console.log(obj.name); // 누리
// 동적으로 속성에 접근 (함수코드를 실행하는 단계) - 대괄호 표기법 사용
function getValue(a, key) {
// return a.key; // undefined
return a[key];
}
console.log(getValue(obj, "name")); // 누리
// 동적으로 추가
function addKey(aa, bb, cc) {
aa[bb] = cc;
}
addKey(obj, "job", "cute"); // 함수 실행
// key값도 문자열 형식으로 작성해야 함
console.log("addKey 함수 실행", obj); // addKey 함수 실행 { name: '누리', age: 4, job: 'cute' }
// 동적으로 삭제
function deleteKey(a, b) {
delete a[b];
}
deleteKey(obj, "age");
console.log("deleteKey 실행", obj); // { name: '누리', job: 'cute' }출력
- 이미지로 대체
🔗 참고 링크 & 도움이 되는 링크
🚩 축약형
중복코드 축약
📝 설명
- key 이름과 value(참조하고 있는 변수)의 이름이 같으면 생략이 가능하다.
✒ 사용법
입력
js
const x = 0;
const y = 50;
// const coodinate = { x: x, y: y };
// key 이름과 value(참조하고 있는 변수)의 이름이 같으면 생략 가능
const coodinate = { x, y };
console.log("좌표값은?", coodinate); //좌표값은? { x: 0, y: 50 }
function makeObj(name, age) {
// return { name: name, age: age };
return { name, age };
}
console.log(makeObj("전지현", 20)); // { name: '전지현', age: 20 }출력
- 이미지로 대체
🔗 참고 링크 & 도움이 되는 링크
🚩 객체와 메소드
method
📝 설명
- 객체에는 함수(method)를 섞어서 쓸 수 있다.
✒ 사용법
입력
js
const apple = {
name: "apple",
home: "대구",
display: function () {
console.log("🍎");
},
};
console.log(apple);
console.log(apple.home);
apple.display();
console.log();
const fruit = {
name: "green apple",
home: "대구",
display: function () {
console.log(`${this.name}: 🍏`);
// this : 오브젝트 안에서 자기 자신의 속성에 접근할 때 사용 -> fruit(this) 안에 있는 name
}, // => display() {} 로 축약하여 사용 가능
};
console.log(fruit);
console.log(fruit.home);
fruit.display();
출력
- 이미지로 대체
🔗 참고 링크 & 도움이 되는 링크
🚩 객체 응용
호텔 예약정보
✒ 코드 작성
입력
html
<style>
body { background: lightblue; }
body > div {
width: 500px;
margin: 200px auto;
padding: 50px;
text-align: center;
background: rgba(255, 255, 255, .7);
}
#p1 {
font-size: 30px;
border: 2px solid lightblue;
border-right: 0;
border-left: 0;
padding: 20px 0;
}
#p2 {
color: lightblue;
font-size: 30px;
line-height: 50px;
}
</style>
<body>
<div>
<h2>예약정보</h2>
<p id="p1">호텔이름</p>
<p id="p2">빈방수</p>
<p id="p3">개의 방이 남아있습니다.</p>
</div>
<script>
</script>
</body>js
// 객체 생성
let hotel = {
hotelName: "shilla hotel", // property
rooms: 40,
booked: 25,
// binRooms: function(){} // 메소드
// binRooms: () => {}
binRooms() {
/*
전부 동일하게 동작하는 코드
let free = hotel.rooms - hotel.booked;
return free;
return free = (this.rooms) - (this.booked);
return this.rooms - this.booked;
*/
return free = this.rooms - this.booked;
}
}
const elP1 = document.getElementById("p1");
// const elP2 = document.getElementById("p2");
elP1.textContent = hotel.hotelName;
document.getElementById("p2").textContent = hotel.binRooms();
출력
- 이미지로 대체
🚩 객체 응용2
Object 클래스를 이용한 호텔 예약정보
✒ 코드 작성
입력
html
<style>
body { background: lightblue; }
body > div {
width: 500px;
margin: 200px auto;
padding: 50px;
text-align: center;
background: rgba(255, 255, 255, .7);
}
#p1 {
font-size: 30px;
border: 2px solid lightblue;
border-right: 0;
border-left: 0;
padding: 20px 0;
}
#p2 {
color: lightblue;
font-size: 30px;
line-height: 50px;
}
</style>
<body>
<div>
<h2>예약정보</h2>
<p id="p1">호텔이름</p>
<p id="p2">빈방수</p>
<p id="p3">개의 방이 남아있습니다.</p>
</div>
<script>
</script>
</body>js
// 객체 생성 - Object 클래스 이용
let hotel = new Object; // Object 클래스를 이용해서 hotel 객체 생성
hotel.hotelName = "shilla hotel"; // 오브젝트의 프로퍼티 속성 정의
hotel.rooms = 40;
hotel.booked = 25;
hotel.binRooms = () => {
return hotel.rooms - hotel.booked;
}
// let hotel = {
// hotelName: "shilla hotel", // property
// rooms: 40,
// booked: 25,
// binRooms() {
// return free = this.rooms - this.booked;
// }
// }
const elP1 = document.getElementById("p1");
// const elP2 = document.getElementById("p2");
elP1.textContent = hotel.hotelName;
document.getElementById("p2").textContent = hotel.binRooms();
출력
- 이미지로 대체
공부하는 벨로그