[자바스크립트] 마침표 표기법, 대괄호 표기법에 대한 비교

자바스크립트 성능 최적화라는 책을 읽다가 

' 브라우저 대부분에서 마침표 표기법(object.name)과 대괄호 표기법(object ['name']) 사용 시 눈에 띄는 차이는 없습니다. 사파리에서는 마침표 표기법이 빠르지만, 대괄호 표기법을 쓰지 말라고 권할 정도는 아닙니다.'

이라는 대목을 봤습니다. 그래서 사파리는 그렇다치고 평소에 자주 쓰는 크롬에선 어떨까 싶어 테스트를 해보게 되었습니다.

일단 마침표 표기법과 대괄호 표기법에 대한 설명을 간단히 하고 가겠습니다.

let testObject = {
	testName : 'Kang'
};

console.log(testObject.testName) // Kang
console.log(testObject['testName']) // Kang

위의 예시를 보면 아주 간단합니다. 마침표로 접근하냐 객체의 키로 접근하냐 그 차이가 있습니다.

저는 일반적으로 마침표 표기법을 주로 사용하나 대괄호 표기법을 사용해야 할 때가 있습니다.

let testObject = {
	'testName' : 'Kang',
   	'test-Name' : 'Park'
};

첫번째로 key 유효한 값이 들어가지 않았을때입니다. 

여기서 말한 유효한 값은 유효한 변수 식별자를 의미한다.

유효한 변수 식별자는 아래와 같이 3가지 조건을 가진다.

1. 공백이 없어야 합니다.
2. 숫자로 시작하지 않습니다.
3. $, _ 를 제외한 특수 문자가 없어야 합니다.

console.log(testObject.test-Name) // Uncaught ReferenceError: Name is not defined
console.log(testObject['test-Name']) // Park

위의 log를 봐서 알 수 있듯이 마침표 표기법은 저런 경우를 처리하지 못합니다.

가끔씩 css나 html를 건드리는 경우에 해당 키값들이 -등으로 연결되어 있거나 넘겨받은 object 자체에 부호가 끼어 있을 수도 있습니다. 이럴 때 대괄호 표기법 사용하게 되면 처리가 가능합니다.

두번째로 동적으로 키를 받는 경우입니다.

let testObject = {
	'testName' : 'Kang',
   	'test-Name' : 'Park'
};

console.log(testObject['test'+'Name']); // Kang

function getValue(obj,key) {
    return obj[key];
}
getValue(testObject,"testName"); // Kang

보시다시피 런타임시에 값을 계산해서 동적으로 키를 만들 후에 배열을 조회했다.

---

다시 내용으로 돌아와 둘의 속도 비교를 한번 해보겠습니다.

var nStart = new Date().getTime();      //시작시간 체크(단위 ms)

let test = { index : 0 };
for(let i = 0 ; i < 2000000000; i++){
    
}
var nEnd =  new Date().getTime();      //종료시간 체크(단위 ms)

var nDiff = nEnd - nStart;      //두 시간차 계산(단위 ms)
console.log(nDiff) // 933

 

var nStart = new Date().getTime();      //시작시간 체크(단위 ms)

let test = { index : 0 };
for(let i = 0 ; i < 2000000000; i++){
    test.index = i;
}
var nEnd =  new Date().getTime();      //종료시간 체크(단위 ms)

var nDiff = nEnd - nStart;      //두 시간차 계산(단위 ms)
console.log(nDiff) // 1639

 

var nStart = new Date().getTime();      //시작시간 체크(단위 ms)

let test = { index : 0 };
for(let i = 0 ; i < 2000000000; i++){
    test['index'] = i;
}
var nEnd =  new Date().getTime();      //종료시간 체크(단위 ms)

var nDiff = nEnd - nStart;      //두 시간차 계산(단위 ms)
console.log(nDiff) // 1399

코드는 보시다시피 아주 간단합니다. for 문을 20억번 돌면서 해당 index 키를 가진 객체에 i 값을 때려 박는 코드입니다.

<실험 결과>

	1회	2회	3회	4회	5회	6회	7회	8회	9회
None	949	960	963	938	959	962	958	964	945
마침표	1439	1445	1444	1451	1442	1440	1451	1436	1445
대괄호	1641	1497	1439	1440	1443	1443	1443	1448	1422

보시면 아무작업을 안 할 때가 보통 950ms로 단순 for문을 도는 시간입니다. 

음.. 20억번 조회하는데 10ms 차이라.. 

네. 제가 내린 결론의 책의 설명대로 무의미하다. 

입니다.

근데 생각해보면 자바스크립트 엔진이 적절한 최적화 과정을 거치기 때문에 속도가 같지 않을까 생각합니다. 그러니

일반적은 상황에서는 마침표 표기법을 쓰고 유효한 변수 식별자가 아닐 경우, 또는 동적으로 배열의 키를 조회할 경우에 쓰도록 합시다.

 

오늘도 Deep한 코딩을 위해~~