객체(Object)
- 자바스크립트 객체는 {} key:vlaue가 모여 있는 Map 형식이다.
- 자바스크립트 객체 형식 : { K: V, K:V, K:V }
- 객체내 Value에는 String, Number, Boolean, Array, Object, null, 함수까지 다양한 자료형이 올 수 있다.
- 객체의 key는 무조건 String으로 저장된다.
- 자바스크립트 객체 모양의 문자열을 JSON(JavaScript Object Notation, 자바스크립트 객체 표기법) 한다.
- JSON의 형식 : "{ K:V, K:V, K:V }"
📍 프로퍼티(property)란?
- 객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.
- 이름과 값으로 구성된 정렬되지 않은 집합
- 프로퍼티는 함수도 저장할 수 있음 ➡️ 프로퍼티 메서드
객체 생성 방법
1. 객체 리터럴
2. Object() 생성자 함수
// 객체 리터널
let 객체명 = {};
// Object() 생성자
let 객체명 = new Object();1. 객체 리터럴
{} 를 사용하여 객체를 생성한다.
객체에는 속성(property)과 속성에 담는 값(value)을 담을 수 있습니다.
이 값에는 원시 데이터 타입인 숫자, 문자열, 불리언, null 등도 담을 수 있고
참조 데이터 타입인 객체(배열, 함수, 객체)도 담을 수 있습니다.
모든 값을 담을 수 있다고 볼 수 있습니다.
📝 객체 리터럴 형태
var 객체명 = {키:값, 키:값, 메서드명:function(매개변수){ 실행할 코드 } };2. Object() 생성자 함수
new 연산자와 Object 생성자 함수를 호출하여 빈 객체를 생성할 수 있습니다.
빈 객체 생성 이후 프로퍼티 또는 메소드를 추가하여 객체를 완성 하는 방법입니다.
📝 Object() 생성자 함수 형태
let 객체명 = new Object();
객체 프로퍼티 추가/조회/수정/삭제
객체 프로퍼티 접근방법 2가지
- 참조 연산자 . 사용
- 대괄호 [] 사용
// ▶ 1. Dot notation : 객체 + .(점) + 키 값의 형태
// → 속성접근
객체명.key
// → 기능접근
객체명.메서드명(인자값)
// ▶ 2. Bracket notation : 키 값이 대괄호[] 안에 '문자열' 형태
객체명['key']📝 프로퍼티 추가
// *존재하지 않는 key에 값을 대입하면 어떻게 될까? 객체에 새로운 K:V가 생성된다!
객체명.key = 값;
객체명['key] = 값;
📝 프로퍼티 조회
객채명.key
객체명['key']
📝 프로퍼티 수정
객체명.key = 새로운 값;
📝 프로퍼티 삭제
delete 객체명.key;
객체 반복문 (for in문)
객체 프로퍼티 순회하는 방법 3가지
- 객체의 프로퍼티 키(key) 가져오기
- 객체의 프로퍼티 값(value) 가져오기
- 객체의 프로퍼티 키(key), 값(value) 가져오기
1. 객체의 프로퍼티 키(key) 가져오기
📝 객체 내 모든 속성 가져오기 형태
for(var key in 객체명) {
docement.write(key);
}
2. 객체의 프로퍼티 값(value) 가져오기
📝 객체 내 모든 값 가져오기 형태
for(var key in 객체명) {
docement.write(객체명[key]);
}
3. 객체의 프로퍼티 키(key), 값(value) 가져오기
📝 객체 내 모든 속성과 값을 가져오기 형태
for(var key in 객체명) {
docement.write(key + ‘:’ + 객체명[key]);
}
객체 this 키워드
만약 동일한 변수명을 사용하는 전역변수와 객체내의 지역변수가 있다면,
객체 내부 함수에서 변수명 작성 시(console.log(변수명)); 해당 객체의 변수가 아닌 전역변수가 선택된다.
따라서, 객체 내의 변수(key)를 선택하기 위해서는 this를 통해 현재 객체 내 변수를 사용하겠다는 것을 명시해야 한다.
다만 동일 함수 내에 변수가 있다면 변수명 선택 시 그 변수를 사용한다.
➡️ 전역변수 /객체내 변수 / 함수내 변수 구분할 것 !
this 바인딩 : this를 현재 객체와 연결하는 행위
자바스크립트에서는 생략을 해버리면 자기 자신의 객체의 속성이라고 생각을 안하므로
무조건 this. 혹은 키의 이름을 넣어줘서 자기 자신의 객체임을 분명하게 표시해야만한다.
사용예시
let A = {
prop: 'Hello',
sayHello: function() {
console.log( this.prop );
}
};
