JS/시나리오 코드
객체 리터럴 표기법
by 개발자공부
2024. 7. 19.
<!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>
<h1>index4.html 파일입니다.</h1>
<script>
// 객체 리터럴 표기법 (사용자 정의 프로토타입 설계)
// const -> 상수값 표현
const student = {
name : "John",
age:30
};
console.log(student.name);
console.log(student.age);
</script>
</body>
</html>
<!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>
<h1>index5.html 파일입니다.</h1>
<script>
// ES6 - 객체 리터럴 표기법
const person ={
firstName:'길동',
lastName:'홍',
age:30,
address:{
street:'연수로 123번길',
city:'부산',
zip:'33123'
},
hobbies:['독서','등산','요리','코딩'], // 배열
sayHello:function(){
//alert("안녕");
// 백틱 사용 - // ES6 - 템플릿 리터럴 -> ${ } (이거는 생략 가능하지만 연산자를 쓰려면 필수!!)
console.log(`Hello, my name is ${this.firstName} ${this.lastName} !!`)
}
};
// person.sayHello();
// person.firstName = "순신";
// console.log(person.firstName);
// console.log("---------------------------");
// const name = "티모";
// // name = "야스오";
// console.log(name);
// 객체 속성에 접근하기
console.log(person.firstName);
console.log(person.lastName);
// 중첩된 객체 속성에 접근하기
console.log(person.address.city);
// 배열 속성 0번 인덱스 접근
console.log(person.hobbies[0]);
// 객체에 메서드 출력
console.log(person.sayHello());
person.sayHello();
console.log("-------------------------");
// 해당하는 객체에 새로운 속성을 추가하고 싶다면?
// 객체에 속성 추가
person.email = "a@nate.com";
console.log(person.email);
// 객체에 상태가 변경
person.age=100;
console.log(person.age);
// 객체 속성을 삭제해 보자.
delete person.hobbies;
console.log(person.hobbies);
</script>
</body>
</html>
