객체 (Object)
함수, 배열, 정규 표현식 등 변형 가능한 데이터들의 집합
객체 종류
- 코어 객체(Array, Math, Date, Number, String, ...)
- DOM 객체
- BOM 객체
기본 구조
{
키(key): 값(value); <- 속성(property)
}
// key엔 문자형, value엔 모든 자료형(함수, 배열, 객체, 변수, 문자열, ...)이 허용
함수 표현식
const fn = function() {}
함수 표현식에는 함수 키워드가 들어간다.
객체 표현식(객체 리터럴 문법)
const obj = {}
let obj1 = {}; //빈 객체 생성.
console.log(typeof obj1); // object객체 생성자 함수
//new 생성자 함수 키워드를 이용. 객체 선언과 동시에 대입
let obj2 = new Object(); // 빈 객체 생성리터럴과 프로퍼티
객체 리터럴 안에는 { 키(key): 값(value) }로 구성된 프로퍼티가 포함되어 있으며개발자는 프로퍼티를 추가/제거 할 수 있다.
프로퍼티 키(key) : 프로퍼티 이름 or 프로퍼티 식별자라고도 부른다.
점(.) 표기법으로 프로퍼티 추가
let obj1 = {}; //빈 객체 선언.
console.log(typeof obj1);
obj1.coffee = '아메리카노'
//obj1 리터럴 안에 아메리카노(값 value)를 가진 coffee(키 key)라는 프로퍼티를 추가
console.log(obj1);
//obj1에 포함된 프로퍼티 전부를 출력.
점(.)표기법으로 객체 리터럴 내 특정 프로퍼티 읽기
let obj1 = {}; //빈 객체 선언.
console.log(typeof obj1);
console.log(obj1);
obj1.coffee = '아메리카노'
obj1.price = 4500;
console.log(obj1);
//프로퍼티 읽기
console.log(obj1.coffee);
//price:4500은 제외하고 coffee:아메리카노만 출력함수도 프로퍼티로 들어갈 수 있다.
let obj2 = new Object();
obj2.coffee = "카페라떼";
obj2.price = 5500;
obj2.order = () => console.log(`주문하신 ${obj2.coffee} 나왔습니다.`);
obj2.order();
console.log(`총 ${obj2.price}원 입니다.`);
객체 내부에 있는 함수는 메서드(Method)라고 한다.
delete 키워드를 작성해 프로퍼티를 삭제할 수 있다.'delete 객체리터럴.프로퍼티식별자'
console.log(obj2);
delete obj2.price;
console.log(obj2);
객체 특징
- 키와 값에 인용 부호 작성 가능. 키는 생략 가능하나 값이 문자열인 경우 반드시 작성.
- JS에서 식별자의 이름은 키워드와 같은 이름 작성을 권장하지 않으나 객체 안의 키 이름은 상관 없음
- 객체 안에 프로퍼티로 작성된 함수는 method라고 함.
- 프로퍼티 식별자(키) 이름은 띄어쓰기가 가능하나 인용 부호를 반드시 작성. 띄어쓰기가 있는 경우 점표기법으로 읽지 못 함.
const menu = {
"var": "변수", // 키 var는 변수의 키워드로 예약어지만 객체 내에서는 상관 없다.
new: 1, // 키 let은 문자열이지만 ""를 작성하거나 생략해도 된다.
string: "아메리카노", // 단, 값이 문자열인 경우 따옴표 필수로 작성.
// 마지막 프로퍼티라도 뒤에 ,쉼표로 마무리해도 된다.
boolean: true,
array: [1,2,3,4],
method: function() {},
"한 글": "프로퍼티 식별자에 한글 사용 가능, 띄어쓰기도 가능하나 반드시 인용 부호 작성"
// 띄어쓰기가 가능하지만 사용은 권장하지 않음.
}띄어쓰기가 있는 프로퍼티 식별자 불러오기
대괄호 [] 표기법
console.log(menu["한 글"]);
console.log(menu['method']);전역 변수를 객체 내부의 프로퍼티에 복사하는 것이 가능하다.
<script>
let name = "순이",
age = 3,
hobby = "냥냥펀치";
var cat = {
// 전역 변수에서 값을 가져와 객체에 적용 가능.
name: name,
age: age,
hobby: hobby,
특징: function () {
console.log(`${cat.name}는 미친굉이입니다.`);
},
};
console.log(cat);
cat.특징();
</script>
단축 프로퍼티
- 프로퍼티의 키와 값이 동일하다면 생략이 가능.
- 함수의 function 키워드 생략 가능
- this 키워드 : function 작성시 객체 내부를 지칭
- 전역 변수를 객체 내부로 가져와 값 재할당 가능
<script>
let name = "순이",
age = 3,
hobby = "냥냥펀치";
var cat = {
// 전역 변수에서 값을 가져와 객체에 적용 가능.
name: name,
age: age,
hobby: hobby,
특징: function () {
console.log(`${cat.name}는 미친굉이입니다.`);
},
};
console.log(cat);
cat.특징();
/* ------------------------------------------------ */
let dog = {
// 단축 프로퍼티
name,
age,
hobby: '미사일펀치',
특징 (food = '사료') { // function 키워드 생략 가능
console.log(`${food}를 먹는 ${this.name}는 강아지`)
// this 키워드.. function 작성시 객체 내부 지칭.
}
}
console.log(dog);
console.log(dog.hobby);
dog.특징();
dog.특징('개껌');
</script>
객체 내 프로퍼티 확인
'in' 연산자를 작성해 객체 내 프로퍼티의 유무를 확인.
'key' in 객체명;
true, false로 반환
<script>
const obj = {
id: 1,
name: '객체',
done: false,
apple () { console.log(`객체 메서드`) }
}
console.log(obj);
console.log(obj.id);
console.log('id' in obj); // true
console.log('name' in obj); // true
console.log('age' in obj); // false
console.log('apple' in obj); // true
</script>for ... in
순회를 통해 객체의 키를 확인해서 배열로 반환.
for (key in 객체) {}<script>
const obj = {
id: 1,
name: "객체",
done: false,
apple() {
console.log(`객체 메서드`);
},
};
/*
순회를 통해 객체의 키를 확인해서 배열로 반환.
for (key in 객체) {}
*/
for (let i in obj) {
console.log(`${i}`); // id, name, done, apple 로 키를 반환
console.log(`${obj.i}`); // i라는 프로퍼티가 없기 때문에 undefined 4번 반환.
console.log(`obj[i]: ${obj[i]}`); // 키와 값을 모두 반환
// 1, 객체, false, f()
}
</script>객체 내 일반 함수와 화살표 함수의 this 키워드 차이점
일반 함수 : 객체 내부의 메소드에서 객체 자신(noName)을 가리키는 키워드.
화살표 함수 : 객체를 벗어나 window 객체를 인식함. 혹은 상황에 따라 다른 객체를 참조하기도 함.
<script>
const noName = {
// 일반 함수
// this 키워드
func: function() {
console.log(this)
},
// 화살표 함수
arrow : () => {
console.log(this)
}
}
noName.func();
noName.arrow();
</script>
생성자 함수 객체 생성 방식의 규칙
- 함수의 첫 글자는 대문자로 시작
- 반드시 new 연산자를 붙여 실행
동일한 객체를 간단하게 여러 개 생성할 수 있으며 템플릿처럼 사용 가능.
const num = new Number(10); //숫자 객체
console.log(typeof num, num);
const str = new String("1"); //문자 객체
const bool = new Boolean(true); //불린 객체
console.log(typeof str, str);
console.log((str.add = "더하기"));
console.log(str);
console.log(typeof bool, bool);
console.log(`----- 생성자함수 만들기 -----`);
function Menu(name, price, size = 'tall') {
this.name = name; // 객체의 프로퍼티 값은 생성자 함수의 매개변수 값을 받아온다.
this.price = price;
this.size = size;
this.order = function () {
console.log(
`주문하신 커피는 ${this.name}이고 가격은 ${this.price}입니다.`
);
};
}
let coffee = new Menu('아메리카노', 4000);
// 생성자 함수 Menu의 매개변수에 원하는 값을 대입해서 여러 객체를 만들어 활용할 수 있음.
console.log(`coffee: ${coffee}`);
// objec, object
console.log(coffee);
coffee.order();
coffee = new Menu('카페라떼', 5000);
coffee.order();
계산된 프로퍼티
객체를 만들 때 객체 리터럴 안의 프로퍼티 키를 [](대괄호)로 작성한 것.-> 이 경우 해당 프로퍼티는 프로퍼티 키를 동적으로 받아오게 된다.
전역 객체
모든 객체의 유일한 최상위 객체를 의미
- window 객체
// 브라우저
console.log(this === window);
- global 객체(node.js 쪽)
전역 객체의 자식 객체를 사용할 때는 전역 객체인 window 생략 가능
window.document.getElementById('id');
//전역 객체의 자식 객체를 사용할 때는 전역 객체인 window 생략 가능
document.getElementById('id');
'JavaScript' 카테고리의 다른 글
| [JavaScript] String 메서드 (0) | 2022.12.05 |
|---|---|
| [JavaScript] JSON (0) | 2022.12.05 |
| [JavaScript] 콜백 함수 (0) | 2022.12.02 |
| [JavaScript] 중첩 함수/ 내부 함수 (0) | 2022.12.02 |
| [JavaScript] 즉시 실행 함수 (0) | 2022.12.02 |