새로운 자료형, 객체를 배우다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 객체 (object) : 속성과 값으로 구성되어있는 데이터의 집합
// 1. 객체의 선언
// 객체의 괄호 : 중괄호 {}
let person = {
name: "장원영",
birthYear: 2004,
group: "아이브"
}
// 2. 객체의 출력
console.log(person)
// 3. 객체 내 데이터에 접근하는 방법
// Case 1) 객체이름.key이름
console.log(person.name)
// Case 2) 객체이름["key이름"]
console.log(person["birthYear"])
// 4. 객체 내 데이터 변경하기
person.name = "안유진"
console.log(person)
console.log(person.name)
// 배열 안에 객체를 넣을 수 있고, 객체 안에 배열을 넣을 수 있다.
// (1) 배열 안에 객체를 넣기
let orderList = [{
name : "아메리카노",
place : "takeout",
stamp : true
}, {
name : "카페라떼",
place : "here",
stamp : false
}, {
name : "밀크티",
place : "here",
stamp : true
}]
console.log("배열 안에 객체", orderList)
console.log("배열 안에 객체 내 데이터 접근", orderList[1].name)
// (2) 객체 안에 배열을 넣기
let person2 = {
name : "임휘훈",
feature : ["음악", "공포", "표정"]
};
console.log(person2)
console.log(person2.feature[1])
// 신문법 [비구조화 할당]
let {hhd, syp, jbk} = {
hhd : "아이스티",
syp : "아메리카노",
jbk : "아메리카노"
}
console.log(syp)
</script>
</body>
</html>
내 주관적인 생각에 객체에서 기억해야 될 것은 2가지다. 객체의 요소에 접근하는 방법과 신문법.
객체의 요소에 접근하는 방법은 2가지가 있는데 ( .key이름 )을 사용하거나 [ key이름]를 사용하거나.
- 객체이름.key이름
- 객체이름[key이름]
객체와 배열은 서로가 서로의 요소가 될 수 있다. 그때 요소에 접근하는 방법도 하던대로 해주면 된다. 바깥에서부터 안으로 하나씩 접근..
신문법은 알고있으면 안좋을 거 없는 방법이다. 코드가 직관성있기 때문에 보기 편하다.
'Front-End > 3. JavaScript 실전' 카테고리의 다른 글
| [JS] Ex07_DOM.html (6 없음) (0) | 2023.06.19 |
|---|---|
| [JS] Ex05_객체실습.html (0) | 2023.06.19 |
| [JS] Ex03_햄버거실습.html (0) | 2023.06.19 |
| [JS] Ex02_함수실습_소수.html (0) | 2023.06.15 |
| [JS] Ex01_함수.html (0) | 2023.06.15 |
