JavaScript Engine 편집하기 (부분)

== 최적화 기법들 ==

=== 히든 클래스 (Hidden Classes) ===

자바스크립트는 동적 타입 언어이지만, 실제로는 비슷한 구조의 객체들이 많이 생성된다. 엔진은 이를 활용해 '''히든 클래스'''를 생성하여 프로퍼티 접근을 빠르게 만든다.

<syntaxhighlight lang="javascript">
function Point(x, y) {
    this.x = x;  // 히든 클래스 변경
    this.y = y;  // 히든 클래스 변경
}

var p1 = new Point(1, 2);
var p2 = new Point(3, 4);  // p1과 같은 히든 클래스 재사용
</syntaxhighlight>

~~똑같은 구조면 굳이 매번 새로 만들 필요가 있나~~

=== 인라인 캐싱 (Inline Caching) ===

프로퍼티나 메서드에 접근할 때의 결과를 '''캐시'''해두는 기법이다.

처음 `obj.property` 접근:
# 객체의 히든 클래스 확인
# 프로퍼티 위치 검색
# 결과를 캐시에 저장

두 번째 접근부터:
# 히든 클래스가 같은지 확인
# 캐시된 위치에서 바로 접근

~~한 번 찾은 건 기억해두자~~

=== 함수 인라이닝 (Function Inlining) ===

작은 함수들을 호출하는 대신 코드를 직접 삽입하는 최적화.

<syntaxhighlight lang="javascript">
function add(a, b) {
    return a + b;
}

function calculate() {
    return add(1, 2) + add(3, 4);  // 인라이닝 후: return (1 + 2) + (3 + 4);
}
</syntaxhighlight>

=== 루프 최적화 ===

==== 루프 불변 코드 이동 ====

루프 내부의 변하지 않는 계산을 루프 밖으로 이동시킨다.

<syntaxhighlight lang="javascript">
// 최적화 전
for (let i = 0; i < arr.length; i++) {
    process(arr[i] * Math.PI);  // Math.PI는 상수
}

// 최적화 후
const pi = Math.PI;
for (let i = 0; i < arr.length; i++) {
    process(arr[i] * pi);
}
</syntaxhighlight>

==== 루프 언롤링 ====

루프의 반복 횟수를 줄이고 대신 한 번에 여러 작업을 수행한다.

~~컴파일러들의 오래된 트릭~~

=== 타입 추론 ===

자바스크립트는 동적 타입이지만, 실행 중에 변수의 타입을 추론해서 최적화한다.

<syntaxhighlight lang="javascript">
function add(a, b) {
    return a + b;  // 숫자로 추론되면 정수 덧셈으로 최적화
}

add(1, 2);     // 정수 덧셈
add(1.5, 2.3); // 부동소수점 덧셈
add("a", "b"); // 문자열 연결 (탈최적화!)
</syntaxhighlight>

~~타입이 바뀌면 최적화가 물거품이 된다~~