[Javascript] 객체
객체
원시타입이 아닌 객체타입의 자료형이며 여러 가지 값을 동시에 저장할 수 있는 자료형
객체를 이용하면 현실세계에 존재하는 어떤 사물이나 개념을 표현하기 용이
객체를 선언하는 방법은 두 가지 있음
1. Object 사용
let 변수명 = new Object();
2. 객체 리터럴 → 훨씬 더 간단
let 변수명 = {};
객체 프로퍼티(객체 속성)
객체 내부의 실제 정보를 담고 있는 역할
key : value로 구성
객체 프로퍼티는 key의 이름으로 불림, 개수 제한 없음
value에 올 수 있는 값의 형 제한 없음
key 값은 문자와 숫자만 가능, 띄어쓰기가 있는 경우 ""로 묶어주기
let 객체이름 = {
key : value,
key : value,
key : value,
}
let me = {
name: "mm_스터디",
age: 27,
country: "대한민국",
"tistory record": true,
};
특정 프로퍼티에 접근하기
점 표기법, 괄호 표기법 사용하여 접근 가능
1. 점 표기법
let 변수 = 객체이름.접근할프로퍼티이름;
let name = me.name;
console.log(name);
존재하지 않는 프로퍼티에 접근하면
let name2 = me.name2;
console.log(name2); → 스크립트 오류는 안 나지만 결괏값 : undefined
2. 괄호 표기법
let 변수 = 객체이름["접근할 프로퍼티이름"];
key를 꼭 "" 사용해 문자열로 표기해야함 → "" 사용 안 하면 변수로 인식해 오류 발생
let age = me["age"];
이때 "" 사용 안 하면 Uncaught ReferenceError: Cannot access 'age' before initialization 오류 발생
새로운 프로퍼티 추가
점표기법과 괄호 표기법으로 가능
객체이름.추가할 프로퍼티 key이름 = "추가할 value값";
객체이름["추가할 프로퍼티 key이름"] = "추가할 value값 ";
me.hobby = "listenMusic";
me["favroriteFood"] = "떡볶이";
console.log(me);
→ {name: 'mm_스터디', age: 27, country: '대한민국', tistory record: true, hobby: 'listenMusic', favroriteFood: '떡볶이', }
프로퍼티 수정
점표기법과 괄호 표기법으로 가능
객체이름.수정할 프로퍼티 key이름 = "추가할 value값";
객체이름["수정할 프로퍼티 key이름"] = "추가할 value값 ";
me.hobby = "playing piano";
me["favroriteFood"] = null;
console.log(me);
→ {name: 'mm_스터디', age: 27, country: '대한민국', tistory record: true, hobby: 'playing piano', favroriteFood: null, }
프로퍼티 삭제
delete 연산자 사용, 점 표기법, 괄호 표기법 모두 가능
delete 객체이름.삭제할 프로퍼티 key이름;
delete 객체이름["삭제할 프로퍼티 key이름"];
delete me.hobby;
delete me["favroriteFood"];
console.log(me);
→ {name: 'mm_스터디', age: 27, country: '대한민국', tistory record: true }
프로퍼티 존재 유무 확인 방법
in 연산자 사용하여 확인 가능
let 변수 = "존재 확인하고 싶은 프로퍼티" in 객체이름;
let check1 = "name" in me;
console.log(check1);
let check2 = "hobby" in me;
console.log(check2);
상수 객체
const를 사용하여 객체 생성
const me = {
name: "mm_스터디",
favoriteColor: "sky blue",
};
console.log(me);
상수를 선언하면 값을 바꿀 수 없음 → 그러나 새로운 객체 프로퍼티 생성이나 수정 삭제 가능
me.age = 27;
delete me.favoriteColoer;
console.log(me);
메서드
값이 함수인 프로퍼티
let me = {
name: "mm_스터디",
age: 27,
"favorite color": "sky blue",
value 값이 함수를 가질 때
sayHello: function () {
console.log("Hello");
},
→ 이런 형식의 익명함수를 값으로 가질 수 있음
sayLove: () => {
console.log("Love yourself");
},
→ 이런 형식의 화살표 함수를 값으로 가질 수 있음
sayBye() {
console.log("bye thank you");
},
→ 이런 형식처럼 화살표 함수보다 더 간단하게 선언 가능
→ 이런 형태를 메서드 선언이라고 하고 객체 동작을 정의할 때 사용한다
};
메서드들도 점표기법, 괄호 표기법으로 호출 가능
me.sayHello();
me["sayLove"]();