변수 분할 성능
소개
JavaScript로 작업할 때, 변수 분할이라는 개념을 접해볼 수 있습니다. 이는 객체나 배열에서 값을 추출하여 개별 변수에 할당하는 것을 가능하게 합니다. 분할은 편리하고 간결한 구문을 제공하지만, 성능에 어떤 영향을 미치는지 궁금할 수 있습니다. 이 글에서는 변수 분할과 전통적인 할당 방식 간의 잠재적인 성능 차이를 탐색해보겠습니다.
성능 비교
성능을 평가하기 위해 두 가지 시나리오를 비교해보겠습니다. 첫 번째 시나리오에서는 객체에서 값을 추출하기 위해 전통적인 할당을 사용합니다:
const color = props.color;두 번째 시나리오에서는 변수 분할 할당을 사용합니다:
const { color } = props;최신 JavaScript 엔진이 최적화하고 불필요한 코드를 제거하는 것으로 가정하기는 유혹스러울 수 있지만, 항상 그렇지는 않습니다. 2020년 현재, 모든 최신 브라우저는 변수 분할을 네이티브로 지원합니다. 그러나 전통적인 할당과 변수 분할 할당 간에 잠재적인 성능 차이가 있음을 보여주는 증거가 있습니다.
Google Chrome의 JavaScript 엔진인 V8에서 생성된 바이트 코드를 살펴보면, 변수 분할 할당이 전통적인 할당보다 더 상세한 바이트 코드를 생성하는 것을 관찰할 수 있습니다. 이는 변수 분할 할당이 계산 효율이 떨어질 수 있다는 것을 나타냅니다. 예를 들어, 전통적인 할당에 대해 생성된 바이트 코드는 다음과 같습니다:
[add 함수에 대한 바이트 코드 생성]
매개변수 개수 3
프레임 크기 0
74 E> 0x2a2a0affd2a2 @ 0 : 91 스택 확인
96 S> 0x2a2a0affd2a3 @ 1 : 1d 02 a1 값을 로드
111 E> 0x2a2a0affd2a5 @ 3 : 2b 03 00 a0에 [0]을 더함
121 S> 0x2a2a0affd2a8 @ 6 : 95 반환
변수 분할 할당에 대해 생성된 바이트 코드는 다음과 같습니다:
[add 함수에 대한 바이트 코드 생성]
매개변수 개수 2
프레임 크기 40
74 E> 0x2c1d63b7d312 @ 0 : 91 스택 확인
0x2c1d63b7d313 @ 1 : 1f 02 fb r0에 a0 값을 복사
0x2c1d63b7d316 @ 4 : 1d fb r0 값을 로드
0x2c1d63b7d318 @ 6 : 89 06 [6]으로 점프하지 않는다면, undefined인지 확인
0x2c1d63b7d31a @ 8 : 1d fb r0 값을 로드
0x2c1d63b7d31c @ 10 : 88 10 [16]으로 점프하지 않는다면, null인지 확인
0x2c1d63b7d31e @ 12 : 03 3f [63]을 로드
0x2c1d63b7d320 @ 14 : 1e f8 r3에 할당
0x2c1d63b7d322 @ 16 : 09 00 [0]을 로드
0x2c1d63b7d324 @ 18 : 1e f7 r4에 할당
0x2c1d63b7d326 @ 20 : 53 e8 00 f8 02 CallRuntime [NewTypeError], r3-r4
76 E> 0x2c1d63b7d32b @ 25 : 93 Throw
76 S> 0x2c1d63b7d32c @ 26 : 20 fb 00 02 r0으로부터 [0], [2]에 있는 명명된 속성 로드
0x2c1d63b7d330 @ 30 : 1e fa r1에 할당
85 S> 0x2c1d63b7d332 @ 32 : 20 fb 01 04 r0으로부터 [1], [4]에 있는 명명된 속성 로드
0x2c1d63b7d336 @ 36 : 1e f9 r2에 할당
98 S> 0x2c1d63b7d338 @ 38 : 1d f9 r2 값을 로드
113 E> 0x2c1d63b7d33a @ 40 : 2b fa 06 r1에 [6]을 더함
123 S> 0x2c1d63b7d33d @ 43 : 95 반환
보시는 바와 같이, 변수 분할 할당을 사용할 때 바이트 코드 줄 수가 더 많아져 잠재적인 성능 영향이 생길 수 있음을 알 수 있습니다.
고려사항
전통적인 할당과 변수 분할 할당 사이에는 성능 차이가 있을 수 있지만, 잠재적인 성능 영향은 구체적인 사용 사례와 JavaScript 엔진에 따라 다를 수 있음을 이해하는 것이 중요합니다. 또한, 현대적인 JavaScript 컴파일러와 미니파이어는 코드를 최적화하여 일부 잠재적인 성능 이슈들을 완화시킵니다.
React를 사용할 때 코드가 변환되므로 성능 영향이 더욱 줄어들 수 있습니다. React의 변환 과정을 통해 코드가 단순화되고 최적화되어 전통적인 할당과 동등해질 수 있습니다.
결론
변수 분할 할당과 전통적인 할당 중 어떤 것을 사용할지 결정할 때는 특정 시나리오와 잠재적인 성능 영향을 고려하는 것이 중요합니다. 대부분의 경우, 성능 차이는 미미하며 눈에 띄는 영향을 미치지 않을 것입니다. 그러나 계산 집약적인 코드 또는 성능이 중요한 경우에는 변수 분할 할당의 사용을 피하거나 최소화하는 것을 고려해볼 수 있습니다.
코드 가독성과 유지 관리성 역시 중요한 요소라는 점을 기억해야 합니다. 변수 분할 할당은 코드의 가독성을 크게 향상시키며, 이해와 유지 관리를 쉽게 만들어줍니다. 따라서 성능 고려 사항과 함께 코드의 명확성과 개발자 생산성을 우선시하는 것이 좋습니다.
참고 자료 :
https://stackoverflow.com/questions/47099510/destructuring-variables-performance
같은 카테고리의 다른 글 보기 :
