객체 만들기
let person = {
key: "value", //프로퍼티
key: "value1"
};//객체 리터럴방식
위 코드는 객체 리터럴방식으로 객체를 생성하고, 프로퍼티를 설정한다. (자바 클래스와 유사)
console.log(person.key) //점표기법
console.log(person["key"]) //괄호표기법
객체의 프로퍼티를 불러올 때에는 다음과 같이 점표기법과 괄호표기법을 사용할 수 있다.
주의할 점은 괄호표기법에서 key 이름은 꼭 string형으로 넣어주어야 한다는 점이다.
let person = {
name : "jack",
age : 22,
};
console.log(get("name"));
function get(key){
return person(key);
}
괄호표기법은 위와 같이 함수를 호출하여 리턴받는 기능을 구현할 때 사용하기 편하다.
프로퍼티 추가하기
person.location = "korea";
person["gender"] = "men";
이와 같은 명령어는 객체에 프로퍼티를 추가한다.
프로퍼티 수정하기
person.name = "soo";
person["name"] = "joy";
이 명령어는 객체에 이미 존재하는 프로퍼티의 값을 수정한다.
객체를 const로 선언했어도 에러가 나지 않는다.
프로퍼티 삭제
person.name = null;
person["name"] = null;
객체 내 메서드 출력
const act = {
say : function(){
console.log("안녕");
}
};
act.say(); //안녕 출력
act["say"](); // 안녕 출력
기존 함수 호출 방식과 동일하게 호출한다.
여기서의 함수를 메서드라고 한다.
const act = {
name = "joy",
say : function(){
console.log("안녕 ${this.name}");
console.log("안녕 ${this["name"]}");
}
};
act.say(); //안녕 joy 출력
act["say"](); // 안녕 joy 출력
객체 내에서 메서드가 프로퍼티를 사용할 때 이를 this.프로퍼티명으로 호출한다.
console.log("name : ${"name" in person}"); // name : true 출력
해당 프로퍼티가 존재하는지 알아보려면 "key명" in 객체명을 출력하면 된다.
'Front-end > javascript' 카테고리의 다른 글
[JavaScript] 반복문 (0) | 2023.07.12 |
---|---|
[JavaScript] 배열 (0) | 2023.07.12 |
[JavaScript] 콜백함수 (0) | 2023.07.10 |
[JavaScript] 호이스팅과 화살표함수 (0) | 2023.07.10 |
[JavaScript] 함수 (0) | 2023.07.10 |