2026-02-23

상위 호환성 vs 하위 호환성

자바스크립트는 매년 스펙이 추가된다. 하지만 모든 브라우저가 최신 스펙을 바로 지원하지는 않는다.

그래서 항상 등장하는 고민이 있다.

“최신 문법을 써도 괜찮을까?”

이 질문을 이해하려면 먼저 상위 호환성과 하위 호환성을 알아야 한다.

1. 상위 호환성 (Forward Compatibility)

상위 호환성은 예전 환경에서 작성된 코드가 새로운 환경에서도 동작하는 것을 의미한다. 자바스크립트는 기본적으로 상위 호환성을 지키려고 설계되었다. 예를 들어 ES5 문법으로 작성한 코드는 최신 브라우저에서도 문제없이 동작한다.

function add(a, b) {
  return a + b;
}

이 코드는 10년 전에도, 지금도 동일하게 동작한다. 즉, 과거 코드는 미래에서도 살아남는다.

하위 호환성은 새로운 문법이 예전 환경에서도 동작하는 것을 의미한다. 하지만 이건 자동으로 보장되지 않는다.

예를 들어 ES6의 let 문법은 구형 브라우저(예: 구형 Internet Explorer)에서는 동작하지 않는다.

let name = "hyun";

구형 브라우저에서는 문법 자체를 이해하지 못한다. 그래서 등장한 개념이 바로:

트랜스파일은 새로운 문법을 이전 문법으로 변환하는 것이다.

대표적인 도구는 Babel이다. 예를 들어 이런 코드가 있다고 해보자.

const add = (a, b) => a + b;

이 코드는 ES6 문법이다. 이를 ES5로 변환하면 다음과 같이 바뀐다.

var add = function(a, b) {
  return a + b;
};

화살표 함수가 일반 함수로 변환되었다.

즉,

문법을 “번역”해서 구형 환경에서도 실행 가능하게 만드는 것

이게 트랜스파일이다.

이런 문법 레벨 기능을 사용할 때 필요하다.

폴리필은 환경에 없는 기능을 대신 구현해주는 코드이다. 문법이 아니라 기능(메서드, API) 문제다.

예를 들어 Array.prototype.includes는 ES6에서 추가되었다.

const arr = [1, 2, 3];
arr.includes(2); // true

구형 브라우저에는 includes가 없다.

그래서 이렇게 직접 구현해줄 수 있다.

if (!Array.prototype.includes) {
  Array.prototype.includes = function(value) {
    return this.indexOf(value) !== -1;
  };
}

이 코드가 바로 폴리필이다.

없는 기능을 채워 넣는 것

구분	대상	해결 방식
트랜스파일	문법	코드를 변환
폴리필	기능(API)	기능을 구현

예시로 보면 이해가 더 쉽다.

Promise.resolve(1);

구형 브라우저에는 Promise 자체가 없다.

이건 문법 문제가 아니라 기능 문제다.

→ 폴리필이 필요하다.

자바스크립트는 상위 호환성은 잘 지키지만, 하위 호환성은 자동으로 해결되지 않는다.

그래서 우리는 두 가지 도구를 사용한다.

요즘은 대부분 Babel + core-js 조합을 사용한다.

결국 핵심은 이것이다.

최신 문법을 쓰고 싶다면, 실행 환경을 반드시 고려해야 한다.