[JavaScript] 객체의 프로퍼티(property) 접근 방법, 속성과 메소드 차이

🙌객체(Object)

- 자바스크립트는 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 “모든 것”이 객체이다. 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다.

 

속성(property)과 메소드(method)의 차이

- 자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다. 프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다. 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드(객체에 제한되어 있는 함수)라 부른다.

- 객체는 데이터를 의미하는 프로퍼티(property)와 데이터를 참조하고 조작할 수 있는 동작(behavior)을 의미하는 메소드(method)로 구성된 집합이다.

 

객체 프로퍼티(property) 생성 방법

- 프로퍼티 키는 문자열이므로 따옴표(‘’ 또는 ““)를 사용한다. 

- 하지만 자바스크립트에서 사용 가능한 유효한 이름인 경우, 따옴표를 생략할 수 있다. 반대로 말하면 자바스크립트에서 사용 가능한 유효한 이름이 아닌 경우, 반드시 따옴표를 사용하여야 한다. 

- 프로퍼티 값이 함수인 경우 이를 메소드라 한다.

var person = {
  'first-name': 'Ung-mo',
  'last-name': 'Lee',
  gender: 'male',
  1: 10,
  function: 1 // OK. 하지만 예약어는 사용하지 말아야 한다.
};

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에서 추가된 예약어

 

✨객체 프로퍼티(property) 접근하는 방법

객체의 프로퍼티 값에 접근하는 방법은 마침표(.) 표기법과 대괄호([]) 표기법이 있다. 예제를 통해 이 두 방법의 차이를 살펴보자.

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

console.log(person);

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

1. 프로퍼티 키가 유효한 자바스크립트 이름이고 예약어가 아닌 경우  

=> 마침표 표기법, 대괄호 표기법 모두 사용할 수 있다.

ex) gender, name, age, color ... => 마침표(.) , 대괄호([ ])  둘 다 가능

 

2. 유효한 자바스크립트 이름이 아니거나 예약어인 경우

=> 대괄호 표기법으로 읽어야 한다. => 대괄호 내에 들어가는 프로퍼티 이름은 반드시 문자열이어야 한다.

ex) new, const, my-name, color-list ... => 대괄호([ ])로 접근, 대괄호는 반드시 문자열이어야 함

 

= 정리하자면,

1) . 닷으로 접근 : 코딩할 때 확실히 그 key의 해당하는 값을 가져오고 싶을 때(기본적으로 코딩하면서 name의 값을 출력할 때)

2) [ 'key' ] 로 접근 : 예약어이거나, 정확하게 어떤 key가 필요한지 모를 때(실시간으로 결정될 때 > 실시간으로 원하는 key의 값을 받아오고 싶을 때 , 동적으로 key의 value를 받아오고 싶을 때)

function printValue(obj, key) {
  console.log(obj[key]);
}
printValue(ellie, "name");
printValue(ellie, "age");

 

 

<참고>

https://poiemaweb.com/js-object

Object | PoiemaWeb