오늘은 모던 자바스크립트 튜토리얼에 있는 객체 파트를 정독했다..
다음은 내가 생각했을 때 중요한 정보를 모아보았다.
<빈객체를 만드는 법>
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
반복문을 사용하면 객체의 모든 키를 순회할 수 있다.
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
등 사용자가 원하는 다른 변수명을 쓰는 것도 가능하다.
<객체 정렬 방식>
객체는 정렬되는 자료형이 아니라고는 하지만 정렬방식이 있다.
객체는 특별한 방식으로 정렬된다.
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).
객체는 프로퍼티(키-값 쌍)를 저장한다.
아래와 같은 방법을 사용하면 프로퍼티에 접근할 수 있다.
객체엔 다음과 같은 추가 연산자를 사용할 수 있다.
자바스크립트에는 일반 객체 이외에도 다양한 종류의 객체가 있다.
지금까지는 '순수 객체(plain object)'라 불리는 일반 객체에 대해 알아보았다.
객체를 그동안 알고 있었다고 생각했는데 정수프로퍼티와 같이 몰랐던 객체 정렬 방식이 있었다. (저번에 프로그래머스 문제풀이에서 이 부분을 몰라서 막혔던 적이 있다.)
내가 다 알고 있다고 생각하지말고 기본부터 다시 차근차근 다져야겠다.
모던 자바스크립트를 완독하는 그날까지...