[TIL / JavaScript] 객체 (2)

Changyun Go·2021년 7월 31일

프로퍼티 키

프로퍼티 키는 일반적으로 문자열을 지정하며 따옴표를 사용한다.
문자열 타입의 값으로 수렴될 수 있는 표현식도 가능하다. → 표현식을 프로퍼티 키로 사용하려면 대괄호로 묶어야 한다.
프로퍼티 값은 모든 값과 표현식이 올 수 있으며 프로퍼티 값이 함수인 경우 이를 메소드라 한다.

var person = {
  'first-name': 'Ung-mo',
  'last-name': 'Lee',
  gender: 'male',
  1: 10,
  function: 1
};

console.log(person);

예약어를 프로퍼티 키로 사용하여도 에러는 발생하지 않지만 예상치 못한 에러가 발생할 수 있으므로 사용해서는 안된다.

abstract  arguments boolean break byte
case  catch char  class*  const
continue  debugger  default delete  do
double  else  enum* eval  export*
extends*  false final finally float
for function  goto  if  implements
import* in  instanceof  int interface
let long  native  new null
package private protected public  return
short static  super*  switch  synchronized
this  throw throws  transient true
try typeof  var void  volatile
while with  yield
// *는 ES6에서 추가된 예약어

프로퍼티 값 읽기

객체의 프로퍼티 값에 접근하는 방법은 마침표 표기법과 대괄호 표기법이 있다.
프로퍼티 키가 유효한 JavaScript 이름이고 예약어가 아닌 경우 프로퍼티 값은 마침표 표기법, 대괄호 표기법 모두 사용할 수 있다.
프로퍼티 이름이 유효한 JavaScript 이름이 아니거나 예약어인 경우 프로퍼티 값은 대괄호 표기법으로 읽어야 한다.
대괄호([]) 표기법을 사용하는 경우, 대괄호 내에 들어가는 프로퍼티 이름은 반드시 문자열이어야 한다.
객체에 존재하지 않는 프로퍼티를 참조하면 undefined를 반환한다.

var person = {
  'first-name': 'Ung-mo',
  'last-name': 'Lee',
  gender: 'male',
  1: 10
};

console.log(person);  
// {1: 10, first-name: 'Ung-mo', last-name: 'Lee', gender: 'male'}

console.log(person.first-name);    // NaN: undefined-undefined
console.log(person[first-name]);   // ReferenceError: first is not defined
console.log(person['first-name']); // 'Ung-mo'

console.log(person.gender);    // 'male'
console.log(person[gender]);   // ReferenceError: gender is not defined
console.log(person['gender']); // 'male'

console.log(person['1']); // 10
console.log(person[1]);   // 10 : person[1] -> person['1']
console.log(person.1);    // SyntaxError

console.log(person.age); // undefined

프로퍼티를 중첩해서 사용할 수 있다,

var grades = {
    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80}
    }
alert(grades['list']['egoing']);  // 10

프로퍼티 값 갱신

객체가 소유하고 있지 않은 프로퍼티 키에 값을 할당하면 하면 주어진 키와 값으로 프로퍼티를 생성하여 객체에 추가한다.

var person = {
  'first-name': 'Ung-mo',
  'last-name': 'Lee',
  gender: 'male',
};

person.age = 20;
console.log(person.age); // 20

프로퍼티 삭제

delete 연산자를 사용하면 객체의 프로퍼티를 삭제할 수 있다.

var person = {
  'first-name': 'Ung-mo',
  'last-name': 'Lee',
  gender: 'male',
};

delete person.gender;
console.log(person.gender); // undefined

// 피연산자가 프로퍼티 키이어야 한다.
delete person;
console.log(person); // Object {first-name: 'Ung-mo', last-name: 'Lee'}

for...in 문

for...in 문을 사용하면 객체(배열 포함)에 포함된 모든 프로퍼티에 대해 루프를 수행할 수 있다.
배열과 달리 순서가 보장되지 않는다.

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
for(key in grades) {
    document.write("key : "+key+" value : "+grades[key]+"<br />");
}
/* key :   egoing value : 10
	 key :   k8805 value : 6
	 key :   sorialgi value : 80 */

grades라는 변수에 담겨있는 값들을 하나씩 가져와서 반복문을 실행한다.

list 태그를 이용해서 구현할 수 있다.

document.write("<li>""key : "+key+" value : "+grades[key]+"</li>");

배열에서도 for...in 문을 사용할 수는 있다.

for (var index in array) {
  console.log(index + ': ' + array[index]);
}

/*
0: one
1: two
*/

for...in 문은 인덱스의 순서가 중요한 배열에서 사용하지 않는 것이 좋다.
- 본질적으로 배열은 일반적인 객체와 속성이 같기 때문에 for...in 문을 사용하면 순서를 보장할 수 없다.
- 배열 요소만을 순회하지 않는다.
```
var array = ['one', 'two'];
array.name = 'my array';

for (var index in array) {
  console.log(index + ': ' + array[index]);
}

/*
0: one
1: two
name: my array
*/
```
  for...of 문
- 배열의 요소를 순회하기 위해 for...of 문을 사용한다.
```
const array = [1, 2, 3];
array.name = 'my array';

for (const value of array) {
  console.log(value);
}

/*
1
2
3
*/
```

객체 지향 프로그래밍

var grades = {
    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},
    'show' : function(){
        for(var name in this.list){
            document.write(name+':'+this.list[name]+"<br />");
        }
    }
};
grades.show();

grades라는 객체는 list라는 데이터와 show라는 함수를 그룹화 한 것이다. → JavaScript를 이용한 객체 지향 프로그래밍 기법의 핵심이 되는 성질로, 취지에 따라 로직을 객체에 그룹화하고 객체라는 부품을 조립해서 소프트웨어라는 완제품을 만들 수 있게 해준다.