[JavaScript/기초] 객체 속성접근자 Object Property Accessors

속성접근자는 자바스크립트에서 가장 기본적으로 객체의 속성 즉 프로퍼티에 접근하는 방법이다.

오늘은 자바스크립트에서 지원하는 속성 접근방식에 대하여 알아보고, 어떤 상황에서 사용하면 좋을지에 대해 알아보겠다.

​

1. 점표기법 Dot Notation

자바스크립트에서 기본적인 프로퍼티 접근방법은 아래와 같다

obj = {
   prop1: 'a',
   prop2: 'b'
}

console.log(obj.prop1); // 'a'
console.log(obj[prop2]); // 'b'

첫번째 obj.prop1 은 점 표기법(Dot Notation) 이며, 두번째 방식은 괄호표기법(Bracket Notation) 이라고한다. 두 방식모두 같은 기능을 보여주지만 용도가 다르기 때문에 일반적으로는 점표기법의 접근방식을 가장 많이 사용할 것이다.

​

점 표기법은 다른 언어에서도 사용하듯이 접근방식이 대중적이다. 자바의 경우 생성자에 의해 초기화되거나 만들어진 인스턴트에서 속성을 접근할 때 동일하게 사용한다. 자바스크립트는 클래스기반의 인스턴스가 아닌 객체기반의 프로토타입이기에 정의만 다를뿐 개념자체는 비슷하다. 그냥 너무 자연스러운 방식이라 객체내 정의된 함수(메소드)나 변수 모두 호출하는 방식이다. this 로 접근할 때도 동일하게 사용하고, 전달하거나 바인딩하거나 모두 동일한 의미로 사용된다. 가장 기본적인 문법이다.

​

​

​

2. 괄호표기법 (Bracket Notation)

console.log(obj[prop2]); // 'b'

두번째 방식은 괄호 표기법인데 이 녀석이 꽤나 쓸만하다. 프로퍼티의 이름을 객체에 입력한다. 이방식은 자바스크립트를 처음해보는 사람은 '왜 이걸 쓰나'라는 생각을 할 수 있다. 그렇다면 자바스크립트의 프로토타입에 대해서 알고 넘어가야할 필요가 있다.

우선 형태만 봐서는 배열의 접근방식과 동일하다. 우리는 일반적으로 배열의 요소를 호출하고자할 때, 아래처럼 사용해왔다.

const array = [1,2,3,4,5]
console.log("index: 0, value:", array[0]); //index: 0, value: 1

익숙한 문법이다. 언제나 배열은 인덱스를 통해 접근할 수 있기 때문이다. 하지만 자바스크립트의 배열도 객체다. 무슨 말일까. 자바스크립트는 사실상 모든 것이 객체다. 프로토타입 기반의 언어로서 원시자료형을 제외한 참조자료형인 클래스, 함수, 배열 등 모두 객체가 된다. 자바스크립트의 모든객체는 프로토타입을 가지면서 valueOf() 로부터 속성을 알 수 있다. 객체의 자세한 설명은 다음 포스트에서 기록하도록 한다. 여기서 알고 넘어갈 부분은 배열이나 객체나 사실상 객체 프로토타입을 갖는다는 것이다.

const object = {
    "1": 1,
    "2": 2,
    "3": 3
}
const array = [1,2,3]

console.log(typeof object); // Object
console.log(typeof array ); // Object

특정 배열을 출력해보면 그 의미를 대충 알 수 있다. 배열을 출력하면 배열도 프로퍼티를 가지게 되고, 그 프로퍼티의 key 즉 프로퍼티 이름은 숫자 인덱스다. 그렇기 때문에 우리는 배열의 인덱스로 알려진 값으로(0부터) 요소하나하나씩 호출 하고 있던 것이다.

그렇다면 이제 우리는 객체나 배열이나 괄호표기법으로 속성을 호출할 수 있다는 것을 알고 있다. 이 방식이 두 배열과 객체, 사실상 둘다 객체이긴하지만 동일하게 프로퍼티를 호출하는 방식이라고 사용할 수 있다.

array[0]
object[property_name]

특이한 점이라면 위처럼 했을때 둘중하나는 오류를 던지고 있다는 점이다. 이것은 자바스크립트의 객체 속성은 숫자로 시작하는 방식으로는 점 표기법이 불가능하다.

const array = [1,2,3];
array[0] // 1
array.0 // error

const array = {
   "1": 1,
   "2": 2,
   "3": 3
}
array["1"] // 1
array.1 // error

이방식은 몇가지 장점이 있다. 아직 선언되지않은 프로퍼티를 접근할 때, 점표현식을 사용하면 접근할 수없는 오류가 발생하지만 괄호표현식은 가능하다. 또한 특정 기능을 구현하고자할 때, for 루프 대신 효율적으로 사용할 수 있다.

아래는 내가 겪었던 방식이었다.

const users = [
    {
        id: '1',
        name: 'park',
    },
    {
        id: '2',
        name: 'kim',
    },
    {
        id: '3',
        name: 'lee',
    }
]

id를 알고있지만 3번 사용자에 접근하기위해서는 반복문으로 id가 3인 객체를 찾아야한다. 이럴 경우 O(n) 의 시간복잡도가 발생하지만 미리 유저를 뽑아놓고 여러 객체에 유저를 매핑시킬때는 O(n^2)의 시간복잡도가 발생할 것이다. 이경우에 유용한 것이 괄호표기법인데, user를 배열 대신 객체로 가지고 있는 것이다.

const users = {
    1: {
        id: 1,
        name: 'park'
    },
    2: {
        id: 2,
        name: 'kim'
    },
    3: {
        id: 3,
        name: 'lee'
    }
}

이렇게 되면 객체의 속성에 직접적으로 접근할 수 있는 방법인 괄호표기법을 이용할 수 있다. 시간복잡도는 O(1)이 되면서 시간복잡도를 어렵게 만드는 일을 피할 수 있다.

컴퓨팅 성능이 좋은 경우 데이터 처리속도엔 영향이 없을 수 있지만, 이런 부하들이 하나씩 쌓이다보면 결국 서버는 메모리 부족으로 터지거나 cpu가 치솟는 무서운 경험을 할 수 있다. 기본 코드부터 안정성있도록 개발을 하면 나중이 편해질 것이라, 항상 추천하는 방식이다.