오늘은 모던 자바스크립트 튜토리얼에 있는 객체 파트를 정독했다..
다음은 내가 생각했을 때 중요한 정보를 모아보았다.
<빈객체를 만드는 법>
let user = new Object(); // '객체 생성자' 문법
let user = {}; // '객체 리터럴' 문법"리터럴과 프로퍼티"
<프로퍼티 추가>
user.isAdmin = true;<프로퍼티 삭제>
delete user.age;<여러 단어를 조합해 프로퍼티 이름을 만든 경우>
let user = {
name: "John",
age: 30,
"likes birds": true // 복수의 단어는 따옴표로
};<상수로 선언된 객체는 수정될 수 있다>
const user = { // const로 선언
name: "John"
};
user.name = "Pete"; // (*)
alert(user.name); // Pete const는 user=... 를 전체적으로 설정하려고 할 때만 오류가 발생
"대괄호 표기법"
여러 단어를 조합해 프로퍼티 키를 만든 경우엔, 점 표기법을 사용해 프로퍼티 값을 읽을 수 없다.
// 공백이 생겨 문법 에러가 발생
user.likes birds = true'점'은 키가 '유효한 변수 식별자'인 경우에만 사용할 수 있다.
- 유효한 변수 식별자엔 공백이 없어야 한다.
- 숫자로 시작하지 않아야 하며 $와 _를 제외한 특수 문자가 없어야 한다.
let user = {};
// set
user["likes birds"] = true;
// get
alert(user["likes birds"]); // true
// delete
delete user["likes birds"];대괄호 표기법에서 문자열을 사용할때에는 따옴표로 묶어줘야한다. (종류상관없음)
// 변수를 이용할 수도 있다.
let key = "likes birds";
// user["likes birds"] = true; 와 같음
user[key] = true;변수 방식을 응용하면 아래와 같다.
let user = {
name: "John",
age: 30
};
let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "name");
// 변수로 접근
alert( user[key] ); // John (프롬프트 창에 "name"을 입력한 경우)점 표기법은 변수를 사용할 수 없다. (아래코드 참고)
let user = {
name: "John",
age: 30
};
let key = "name";
alert( user.key ) // undefined<계산된 프로퍼티>
객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우, 이를 계산된 프로퍼티(computed property) 라고 부른다.
let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
let bag = {
[fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 옵니다.
};
alert( bag.apple ); // fruit에 "apple"이 할당되었다면, 5가 출력됩니다.fruit 변수에 'apple'을 입력받아 객체의 프로퍼티 키로 넣어준 뒤
5가 출력된다.
만약, 'banana'를 입력했다면 'apple'이라는 프로퍼티가 없기 때문에 undefined가 출력된다.
다음 예시처럼 복잡한 표현식이 올 수도 있다.
let fruit = 'apple';
let bag = {
[fruit + 'Computers']: 5 // bag.appleComputers = 5
};"단축 프로퍼티"
function makeUser(name, age) {
return {
name: name,
age: age,
// ...등등
};
}
let user = makeUser("John", 30);
alert(user.name); // John위 코드와 같이 프로퍼티의 이름과 값이 같은 경우 아래처럼 생략할 수 있다.
let user = {
name, // name: name 과 같음
age: 30
};"프로퍼티 존재 여부 확인하기"
자바스크립트 객체는 존재하지 않는 프로퍼티에 접근하려 해도 에러가 발생하지 않고 undefined를 반환한다.
따라서 다음과 같은 방법으로 프로퍼티 존재 유무를 파악할 수 있다.
let user = {};
alert( user.noSuchProperty === undefined ); // true가 나오면 존재하지 않는 것.여기서 만약 실제로 프로퍼티가 존재하고 value값에 undefined가 있다면 위 방법은 true가 출력되어 결국 예외사항이 발생한다.
연산자 in을 사용하면 해결이 가능하다. "key" in object
let user = { name: "John", age: 30 , job : undefined };
alert( "age" in user ); // user.age가 존재하므로 true가 출력
alert( "gender" in user ); // user.gender가 존재하지 않기 때문에 false가 출력
alert( "job" in user ); // user.job은 존재하므로 true가 출력그러나 보통 비어있는 값을 생성할때에는 Null을 사용한다.
위 예시처럼 의도적으로 undefined를 할당하는 경우는 없다고 보면 된다.
"for…in 반복문"
for..in 반복문을 사용하면 객체의 모든 키를 순회할 수 있다.
let user = {
name: "John",
age: 30,
isAdmin: true
};
for (let key in user) {
// 키
alert( key ); // name, age, isAdmin
// 키에 해당하는 값
alert( user[key] ); // John, 30, true
}let key 말고도 let prop등 사용자가 원하는 다른 변수명을 쓰는 것도 가능하다.
<객체 정렬 방식>
객체는 정렬되는 자료형이 아니라고는 하지만 정렬방식이 있다.
객체는 특별한 방식으로 정렬된다.
- 정수 프로퍼티(integer property)는 자동으로 정렬되고,
- 그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬된다.
let codes = {
"49": "독일",
"41": "스위스",
"44": "영국",
// ..,
"1": "미국"
};
for (let code in codes) {
alert(code); // 1, 41, 44, 49
}내가 입력한 순서대로 출력하고 싶어도 정수프로퍼티가 정렬되어 key값이 작은 순서대로 출력된다.
정수프로퍼티 : 변형 없이 정수에서 왔다 갔다 할 수 있는 문자열을 의미
문자열 "49"는 정수로 변환하거나 변환한 정수를 다시 문자열로 바꿔도 변형이 없기 때문에 정수 프로퍼티이다. 하지만 '+49’와 '1.2’는 정수 프로퍼티가 아니다.
// 함수 Math.trunc는 소수점 아래를 버리고 숫자의 정수부만 반환
alert( String(Math.trunc(Number("49"))) );
// '49'가 출력. 기존에 입력한 값과 같으므로 정수 프로퍼티.
alert( String(Math.trunc(Number("+49"))) );
// '49'가 출력. 기존에 입력한 값(+49)과 다르므로 정수 프로퍼티가 아님.
alert( String(Math.trunc(Number("1.2"))) );
// '1'이 출력. 기존에 입력한 값(1.2)과 다르므로 정수 프로퍼티가 아님.따라서 정수프로퍼티로 취급되지 않게 다음과 같이 번호앞에 +를 붙여준다.
let codes = {
"+49": "독일",
"+41": "스위스",
"+44": "영국",
// ..,
"+1": "미국"
};
for (let code in codes) {
alert( +code ); // 49, 41, 44, 1
}그러면 작성한 순서대로 출력할 수 있다.
"요약"
객체는 몇 가지 특수한 기능을 가진 연관 배열(associative array).
객체는 프로퍼티(키-값 쌍)를 저장한다.
- 프로퍼티 키는 문자열이나 심볼이어야 한다. 보통은 문자열이다.
- 값은 어떤 자료형도 가능하다.
아래와 같은 방법을 사용하면 프로퍼티에 접근할 수 있다.
- 점 표기법: obj.property
- 대괄호 표기법 obj["property"]. 대괄호 표기법을 사용하면 obj[varWithKey]같이 변수에서 키를 가져올 수 있다.
객체엔 다음과 같은 추가 연산자를 사용할 수 있다.
- 프로퍼티를 삭제하고 싶을 때: delete obj.prop
- 해당 key를 가진 프로퍼티가 객체 내에 있는지 확인하고자 할 때: "key" in obj
- 프로퍼티를 나열할 때: for (let key in obj)
자바스크립트에는 일반 객체 이외에도 다양한 종류의 객체가 있다.
- Array – 정렬된 데이터 컬렉션을 저장할 때 쓰임
- Date – 날짜와 시간 정보를 저장할 때 쓰임
- Error – 에러 정보를 저장할 때 쓰임
- 기타 등등
지금까지는 '순수 객체(plain object)'라 불리는 일반 객체에 대해 알아보았다.
객체를 그동안 알고 있었다고 생각했는데 정수프로퍼티와 같이 몰랐던 객체 정렬 방식이 있었다. (저번에 프로그래머스 문제풀이에서 이 부분을 몰라서 막혔던 적이 있다.)
내가 다 알고 있다고 생각하지말고 기본부터 다시 차근차근 다져야겠다.
모던 자바스크립트를 완독하는 그날까지...
