객체형
- 다양한 데이터 담을 수 있음
- 키로 구분된 데이터 집합이나 복잡한 개체(entity) 저장
객체
- 프로퍼티(키-값 쌍)로 구성
- 키 : 문자형 | 값 : 모든 자료형 허용
- 빈 객체 만들기
let user = new Object();
let user = {};
리터럴과 프로퍼티
- {} 안에는 ‘키:값 ’ 쌍으로 구성된 프로퍼티 들어감
let user = {
name : "JSON.test",
age: 30
};
//프로퍼티 값 얻기
console.log(user.name); //JSON.tes
console.log(user.age); // 30
- 프로퍼티 값엔 모든 자료형 올 수 있음
- 불린형
user.isAdmin = true;
- 프로퍼티 삭제
delete user.age;
- 여러 단어를 조합해 프로퍼티 이름을 만든 경우 프로퍼티 이름을 따옴표로 묶어줘야 함
let user = {
name : "JSON.test",
age: 30,
"likes birds": true //복수 단어 따옴표로
};
※ const로 선언된 객체는 수정 가능
const user = {
name: "John"
};
user.name = "Pete"; // (*)
console.log(user.name); 대괄호 표기법
- 여러 단어 조합해 만든 프로퍼티 키는 점 표기법 사용 불가
let user = {}; //set user["likes birds"] = true; //get alert(user["likes birds"]); //delete delete user["likes birds"];
- 문자열을 사용할 땐 문자열을 따옴표 종료와 무관하게 묶어줘야 함
- 모든 표현식의 평가 결과를 프로퍼티 키로 사용 가능
//문자열 let key = "likes birds"; // user["likes birds"] = true; 와 같습니다. user[key] = true; - 프로퍼티 이름과 값의 제약을 없애주기 때문에 점 표기법보다 훨씬 강력 ⇒ 번거로움
계산된 프로퍼티
- 객체를 만들때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우
let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
let bag = {
[fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 옵니다.
};
alert( bag.apple ); // fruit에 "apple"이 할당되었다면, 5가 출력됩니다.
let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
let bag = {};
// 변수 fruit을 사용해 프로퍼티 이름을 만들었습니다.
bag[fruit] = 5; ↑ 둘 다 사용 가능단축 프로퍼티
- 프로퍼티 값 기존 변수에 받아와 사용
function makeUser(name, age){
return {
name: name,
age: age
};
}
let user_prop = makeUser("jimin", 28);
console.log(user_prop);
console.log(user_prop.name);
console.log(user_prop.age);//프로퍼티 값 단축 구문 사용
function makeUser(name, age){
return {
name,
age
};
}
letuser_prop= makeUser("jimin", 28);
console.log(user_prop);
console.log(user_prop.name);
console.log(user_prop.age); ↑ 동일 값 출력- 한 객체에서 일반 프로퍼티와 단축 프로퍼티를 함께 사용 가능
let user = { name, // name: name 과 같음 age: 30 };
프로퍼티 이름 제약사항
- 변수 이름엔 ‘for’, ‘let’, ‘return’ 같은 예약어 사용 불가 ⇒ 객체 프로퍼티엔 이런 제약 X
let obj ={ for : 1, let : 2, return : 3 }; console.log(obj.for+obj.let+obj.return);
- 문자형이나 심볼형에 속하지 않은 값은 문자열로 자동 형변환
let oobj ={ 0: "test" }; // 동일 console.log(oobj[0]); console.log(oobj["0"]);
- proto : 객체 프로퍼티 키에 쓸 수 있는 문자열엔 제약이 없지만 역사적 이유로 특별 대우 받음
let obj1 = {}; obj1.__proto__ = 5; console.log(obj1.__proto__); //[Object: null prototype] {}
‘in’ 연산자로 프로퍼티 존재 여부 확인
- 자바스크립트 객체 중요한 특징 중 하나는 존재하지 않는 프로퍼티에 접근하려해도 에러 발생하지 않고
undefined반환한다는 것 → 프로퍼티 존재 여부 쉽게 확인let user = {} console.log(user.noSuchProperty === undefined); //true
undefined와 비교하는 것 이외에도 연산자in을 사용하면 프로퍼티 존재 여부를 확인"key" in object let user = { name: "John", age: 30 }; console.log("age" in user); //true console.log("balbal" in user); //false- in 왼쪽엔 프로퍼티 이름이 와야함
- undefined와 in의 차이
- in은 true/false로 프로퍼티 유무를 제대로 확인할 수 있음
- undefined인 경우 프로퍼티 존재 여부 확실히 확인 불가
‘for...in’반복문
- for .. in 반복문을 사용하면 객체의 모든 키 순회
for (key in object) { // 각 프로퍼티 키(key)를 이용하여 본문(body)을 실행합니다. }let for_user = { name: 'john', age: 30, isAdmin: true }; for (let key in user){ console.log(key); //name | age console.log(for_user[key]); // john | 30 }
객체 정렬 방식
- 객체는 특별한 방식으로 정렬
- 정수 프로퍼티 : 자동 정렬
let codes = { "49": "독일", "41": "스위스", "44": "영국", // .., "1": "미국" }; for (let code in codes) { console.log(code); // 1, 41, 44, 49 } - 49(독일나라번호)를 가장 위에 출력되도록 하기
-
나라 번호가 정수 취급 되지 않도록 각 나라 앞에 + 붙이기
let codes = { "+49": "독일", "+41": "스위스", "+44": "영국", // .., "+1": "미국" }; for (let code in codes) { console.log( +code ); // 1, 41, 44, 49 }
-
- 그 외 프로퍼티 : 객체에 추가한 순서대로 정렬
let etc_user = { name : 'JoHn', surname: 'smith', other_name: '알아서 뭐하게' }; for (let prop in etc_user){ console.log(prop) // name, surname, other_name }
- 정수 프로퍼티 : 자동 정렬
요약
객체는 몇 가지 특수한 기능을 가진 연관 배열(associative array)입니다.
객체는 프로퍼티(키-값 쌍)를 저장합니다.
- 프로퍼티 키는 문자열이나 심볼이어야 합니다. 보통은 문자열입니다.
- 값은 어떤 자료형도 가능합니다.
아래와 같은 방법을 사용하면 프로퍼티에 접근할 수 있습니다.
- 점 표기법:
obj.property - 대괄호 표기법
obj["property"]. 대괄호 표기법을 사용하면obj[varWithKey]같이 변수에서 키를 가져올 수 있습니다.
객체엔 다음과 같은 추가 연산자를 사용할 수 있습니다.
- 프로퍼티를 삭제하고 싶을 때:
delete obj.prop - 해당 key를 가진 프로퍼티가 객체 내에 있는지 확인하고자 할 때:
"key" in obj - 프로퍼티를 나열할 때:
for (let key in obj)
지금까진 '순수 객체(plain object)'라 불리는 일반 객체에 대해 학습했습니다.
자바스크립트에는 일반 객체 이외에도 다양한 종류의 객체가 있습니다.
- Array – 정렬된 데이터 컬렉션을 저장할 때 쓰임
- Date – 날짜와 시간 정보를 저장할 때 쓰임
- Error – 에러 정보를 저장할 때 쓰임
과제
-
let user = { name : 'John', surname: 'Smith' }; user.name = 'Pete'; delete user.name; console.log(user);
- 틀린코드
function isEmpty(obj){ if(!isEmpty()){ return true; }else{ return false; } } let schedule ={}; console.log(isEmpty(schedule)) // Maximum call stack size exceeded 발생 -> 함수들이 서로가 서로를 호출해서 call stack 터짐
- for .. in사용
function isEmpty(obj){ for (let key in obj){ return false; } return true; } let schedule ={}; console.log(isEmpty(schedule)) // true
-
에러 없이 실행! -> const의 객체값은 변화 가능!
- 하드 코딩
let salaries ={ John : 100, Ann: 160, Pete : 130 } let sum = (salaries.John + salaries.Ann + salaries.Pete); console.log(sum); - for in 사용 코딩
let salaries ={ John : 100, Ann: 160, Pete : 130 } let sum = 0; for(let key in salaries){ sum += salaries[key]; } console.log(sum);
-
let menu ={ width:200, height: 300, title : "My menu" }; function multiplyNumeric(obj){ for( let key in obj){ if(typeof obj[key] == "number"){ obj[key] *= 2 } } } console.log(multiplyNumeric(menu)); //undefined가 나온다....
- 해결 : return 값을 명시 안해줘서 값이 안나왔다.
let menu ={ width:200, height: 300, title : "My menu" }; function multiplyNumeric(obj) { for (let key in obj) { if (typeof obj[key] == 'number') { obj[key] *= 2; } } return obj; } console.log(multiplyNumeric(menu));
