반응형
객체
자바스크립트에서 객체란 이름(name)과 값(value)로 구성된 프로퍼티의 정렬되지 않은 집합이다.
프로퍼티의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메소드라고한다.
let user = new Object(); // '객체 생성자' 문법
let user = {}; // '객체 리터럴' 문법- 객체를 선언할 땐 주로 객체 리터럴 방법을 사용한다.
리터럴과 프로퍼티
let user = { // 객체
name: "John", // 키: "name", 값: "John"
age: 30 // 키: "age", 값: 30
};- 콜론 : 을 기준으로 왼쪽엔 키가, 오른쪽엔 값이 위치한다.
- 프로퍼티 키는 프로퍼티 '이름' 혹은 '식별자'라고도 부른다.
// 프로퍼티 값 얻기
alert( user.name ); // John
alert( user.age ); // 30- 점 표기법(dot notation)을 이용하면 프로퍼티 값을 읽을 수 있다.
user.isAdmin = true;- 프로퍼티 값엔 모든 자료형이 올 수 있다.
- 키에는 문자형만 올 수 있다.
delete user.age;- delete 연산자를 사용하면 프로퍼티 삭제 가능
let user = {
name: "John",
age: 30,
"likes birds": true // 복수의 단어는 따옴표로 묶어야 합니다.
};- 여러 단어를 조합해 프로퍼티 이름을 만든 경우엔 프로퍼티 이름을 따옴표로 묶어줘야 한다.
let user = {
name: "John",
age: 30,
}- 마지막 프로퍼티 끝은 쉼표로 끝날수 있다.
- 이런 쉼표를 ‘trailing(길게 늘어지는)’ 혹은 ‘hanging(매달리는)’ 쉼표라고 부른다.
- 이렇게 끝에 쉼표를 붙이면 모든 프로퍼티가 유사한 형태를 보이기 때문에 프로퍼티 추가, 삭제, 이동이 쉬워진다.
상수 객체는 수정될 수 있다
const user = {
name: "John"
};
user.name = "Pete"; // (*)
alert(user.name); // Pete- const 는 user의 값을 고정하지만, 그 내용은 고정하지 않는다.
- 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"을 입력한 경우)- 변수 key 는 런타임에 평가되기 때문에 사용자 입력값 변경 등에 따라 값이 변경될 수 있다.
어떤 경우든, 평가가 끝난 이후의 결과가 프로퍼티 키로 사용된다. - 점 표기법은 이런 방식이 불가능하다.
계산된 프로퍼티 (computed property)
객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우, 이를 계산된 프로퍼티라고 부른다.
let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
let bag = {
[fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 옵니다.
};
alert( bag.apple ); // fruit에 "apple"이 할당되었다면, 5가 출력됩니다.- [fruit] 는 프로퍼티 이름을 변수 fruit에서 가져오겠다는 것을 의미한다.
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- 프로퍼티 이름과 값이 변수의 이름과 동일한 경우 프로퍼티 값 단축 구문을 사용해 코드를 짧게 줄일 수 있다.
function makeUser(name, age) {
return {
name, // name: name 과 같음
age, // age: age 와 같음
// ...
};
}- 한 객체에서 일반 프로퍼티와 단축 프로퍼티를 함께 사용하는 것도 가능하다.
프로퍼티 이름의 제약사항
변수 이름에는 예약어를 사용하면 안 되지만 객체 프로퍼티엔 이런 제약이 없다.
// 예약어를 키로 사용해도 괜찮습니다.
let obj = {
for: 1,
let: 2,
return: 3
};
alert( obj.for + obj.let + obj.return ); // 6- 어떤 문자형, 심볼형 값도 프로퍼티 키가 될 수 있다.
- 문자형이나 심볼형에 속하지 않은 값은 문자열로 자동 형 변환된다.
let obj = {
0: "test" // "0": "test"와 동일합니다.
};
// 숫자 0은 문자열 "0"으로 변환되기 때문에 두 얼럿 창은 같은 프로퍼티에 접근합니다,
alert( obj["0"] ); // test
alert( obj[0] ); // test (동일한 프로퍼티)- 키에 숫자 0을 넣으면 문자열"0"으로 자동 변환된다.
'in' 연산자로 프로퍼티 존재 여부 확인
자바스크립트 객체의 중요한 특징 중 하나는 다른 언와 달리, 존재하지 않는 프로퍼티에 접근하려 해도
에러가 발생하지 않고 undefined를 반환한다는 것이다.
let user = {};
alert( user.noSuchProperty === undefined ); // true는 '프로퍼티가 존재하지 않음'을 의미합니다.- 이런 특징을 응용하면 프로퍼티 존재 여부를 쉽게 확인할 수 있다.
let user = { name: "John", age: 30 };
alert( "age" in user ); // user.age가 존재하므로 true가 출력됩니다.
alert( "blabla" in user ); // user.blabla는 존재하지 않기 때문에 false가 출력됩니다.- in 왼쪽엔 반드시 프로퍼티 이름이 와야 한다. 프로퍼티 이름은 보통 따옴표로 감싼 문자열이다.
- 따옴표를 생략하면 엉뚱한 변수가 조사 대상이 된다.
'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 codes = {
"49": "독일",
"41": "스위스",
"44": "영국",
// ..,
"1": "미국"
};
for (let code in codes) {
alert(code); // 1, 41, 44, 49
}- 정수 프로퍼티는 자동으로 정렬된다.
let user = {
name: "John",
surname: "Smith"
};
user.age = 25; // 프로퍼티를 하나 추가합니다.
// 정수 프로퍼티가 아닌 프로퍼티는 추가된 순서대로 나열됩니다.
for (let prop in user) {
alert( prop ); // name, surname, age
}- 키가 정수가 아닌 경우엔 작성된 순서대로 프로퍼티가 나열된다.
정수 프로퍼티
정수에서 왔다 갔다 할 수 있는 문자열을 의미한다.
문자열 "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)과 다르므로 정수 프로퍼티가 아닙니다.
반응형