[ES5] ECMAScript5 주요 특징 및 현재 사용 시 주의점

 

ECMAScript5 주요특징

엄격 모드 Strict Mode

ES5에서 추가된 기능 중 엄격모드가 있으며, 지시어로 활성화 할 수 있는 이 모드는 JavaScript 문법의 제약을 강화하고 불완전한 작업을 방지한다.

"use strict";
// 코드는 이제 엄격 모드로 실행됩니다

 

선언되지 않은 변수를 사용하거나, 읽기 전용 속성에 할당하거나, 매개변수 이름이 중복될 경우, 삭제할 수 없는 속성을 삭제할 경우 오류가 발생하며, with문 사용과 eval, argument를 함수명으로 사용하는 것이 금지된다. this의 기본값이 전역 객체 대신 undefined로 설정된다.

 

최신의 자바스크립트에서는 이 Strict 모드가 기본처럼 사용되고 있다. 특히 이후 버전인 ES6부터 도입된 클래스와 모듈은 기본이 Strict Mode, 엄격 모드 상태이다. 바벨과 타입스크립트도 Strict 모드를 기본으로 사용하고 있다.

 

JSON 지원

ES5는 JSON 데이터 형식을 네이티브로 지원한다.

// 객체를 JSON 문자열로 변환
var jsonString = JSON.stringify({name: "John", age: 30});

// JSON 문자열을 객체로 파싱
var obj = JSON.parse('{"name":"John","age":30}');

 

 

배열 메서드 확장

사용 가능

ES5 도입 배열 메서드	설명
forEach()	각 요소에 대해 콜백 실행
map()	요소 변환 후 새 배열 반환
filter()	조건 만족하는 요소만 새 배열 반환
reduce()	누적 계산
reduceRight()	오른쪽부터 누적 계산
every()	모든 요소가 조건 만족?
some()	일부 요소가 조건 만족?
indexOf()	특정 요소의 인덱스 찾기
lastIndexOf()	끝에서부터 요소 인덱스 찾기
isArray() (Array.)*	배열 여부 확인

 

사용 불가

ES6 이후 도입 배열 메서드	도입시기	설명	예시
find()	ES6	조건 만족 첫 요소 반환
findIndex()	ES6	조건 만족 첫 인덱스 반환
from() (Array.)*	ES6	유사 배열 → 배열	Array.from()
of() (Array.)*	ES6	인자들을 배열로	Array.of()
includes()	ES2016	값 포함 여부 확인	indexOf()보다 직관적
flat()	ES2019	배열 평탄화	다차원 배열 처리
flatMap()	ES2019	map 후 평탄화	고급 변환
at()	ES2022	음수 인덱스 지원	arr.at(-1)
toReversed()	ES2023	불변 .reverse()	원본 유지
toSorted()	ES2023	불변 .sort()	원본 유지
toSpliced()	ES2023	불변 .splice()	원본 유지
with()	ES2023	특정 인덱스 값 대체	arr.with(1, 'x')

 

예시

var arr = [1, 2, 3, 4, 5];

// forEach: 배열의 각 요소에 대해 함수 실행
arr.forEach(function(element, index) {
  console.log(element, index);
});

// map: 각 요소를 변환하여 새 배열 생성
var doubled = arr.map(function(element) {
  return element * 2;
}); // [2, 4, 6, 8, 10]

// filter: 조건에 맞는 요소만 포함하는 새 배열 생성
var evens = arr.filter(function(element) {
  return element % 2 === 0;
}); // [2, 4]

// reduce: 배열을 단일 값으로 축소
var sum = arr.reduce(function(accumulator, current) {
  return accumulator + current;
}, 0); // 15

// some: 하나 이상의 요소가 조건을 만족하는지 확인
var hasEven = arr.some(function(element) {
  return element % 2 === 0;
}); // true

// every: 모든 요소가 조건을 만족하는지 확인
var allEven = arr.every(function(element) {
  return element % 2 === 0;
}); // false

// indexOf 및 lastIndexOf: 요소의 인덱스 찾기
var index = arr.indexOf(3); // 2

 

 

객체 메서드 확장

사용 가능

ES5 도입 메서드	설명
Object.create(proto, [propertiesObject])	지정한 프로토타입 객체 및 속성으로 새 객체 생성
Object.defineProperty(obj, prop, descriptor)	객체에 새 속성 추가 또는 기존 속성 변경 (세부 설정 포함)
Object.defineProperties(obj, props)	여러 속성 한 번에 정의
Object.getOwnPropertyDescriptor(obj, prop)	주어진 객체의 특정 속성 설명자 반환
Object.keys(obj)	객체의 열거 가능한 자체 속성 이름을 배열로 반환
Object.getOwnPropertyNames(obj)	객체의 모든 자체 속성 이름(열거 가능 여부 무관)을 배열로 반환
Object.preventExtensions(obj)	객체 확장 금지
Object.isExtensible(obj)	객체가 확장 가능한지 여부 반환
Object.seal(obj)	객체 봉인: 확장 금지 + 속성 삭제 금지
Object.isSealed(obj)	객체가 봉인되었는지 여부 반환
Object.freeze(obj)	객체 동결: 확장 금지 + 속성 삭제 금지 + 속성 변경 금지
Object.isFrozen(obj)	객체가 동결되었는지 여부 반환

 

사용 불가

ES6 이후 도입 메서드	도입시기	설명
Object.assign(target, ...sources)	ES6	하나 이상의 출처 객체에서 대상 객체로 속성을 복사
Object.is(value1, value2)	ES6	두 값이 같은지 비교 (===과 유사하지만 NaN, +0/-0 처리 다름)
Object.entries(obj)	ES8	객체를 [key, value] 쌍의 배열로 반환
Object.values(obj)	ES8	객체의 값들을 배열로 반환
Object.getOwnPropertyDescriptors(obj)	ES8	모든 자체 속성의 설명자 객체를 반환
Object.fromEntries(iterable)	ES10	[key, value] 쌍의 iterable로부터 객체 생성
Object.hasOwn(obj, prop)	ES2022	객체가 주어진 속성을 자체적으로 가지고 있는지 확인 (기존 hasOwnProperty보다 안전)

 

예시

// Object.create: 지정된 프로토타입 및 속성으로 새 객체 생성
var person = {
  isHuman: true,
  printInfo: function() {
    console.log("Name: " + this.name + ", Human: " + this.isHuman);
  }
};

var john = Object.create(person);
john.name = "John";

// Object.defineProperty: 객체에 새 속성 추가 또는 기존 속성 수정
Object.defineProperty(john, 'age', {
  value: 30,
  writable: true,
  enumerable: true,
  configurable: true
});

// Object.defineProperties: 여러 속성 한 번에 정의
Object.defineProperties(john, {
  job: {
    value: 'Developer',
    writable: true
  },
  salary: {
    value: 50000,
    writable: false
  }
});

// Object.getOwnPropertyNames: 열거 가능 여부와 관계없이 모든 속성 이름 반환
var propNames = Object.getOwnPropertyNames(john); // ["name", "age", "job", "salary"]

// Object.keys: 열거 가능한 속성의 이름만 반환
var keys = Object.keys(john); // ["name", "age", "job"]

// Object.getPrototypeOf: 객체의 프로토타입 반환
var proto = Object.getPrototypeOf(john); // person 객체

// Object.preventExtensions: 객체에 새 속성 추가 방지
Object.preventExtensions(john);

// Object.isExtensible: 객체가 확장 가능한지 확인
var canExtend = Object.isExtensible(john); // false

// Object.seal: 속성 추가/삭제 방지 (값 수정은 가능)
Object.seal(john);

// Object.isSealed: 객체가 봉인되었는지 확인
var isSealed = Object.isSealed(john); // true

// Object.freeze: 속성 추가/삭제/수정 방지 (완전 불변)
Object.freeze(john);

// Object.isFrozen: 객체가 동결되었는지 확인
var isFrozen = Object.isFrozen(john); // true

 

 

Function.prototype.bind()

bind() 메서드는 함수의 this 값을 명시적으로 설정하고 미리 인수를 부분적으로 적용할 수 있다.

var user = {
  name: "John",
  sayHi: function() {
    console.log("Hi, " + this.name);
  }
};

var sayHiFunc = user.sayHi;
sayHiFunc(); // "Hi, undefined" (this가 전역 객체 참조)

var boundFunc = user.sayHi.bind(user);
boundFunc(); // "Hi, John" (this가 user 객체 참조)

// 인수를 부분적으로 적용
function multiply(a, b) {
  return a * b;
}

var double = multiply.bind(null, 2);
double(5); // 10

 

 

Getter와 Setter

var person = {
  firstName: "John",
  lastName: "Doe",
  
  // getter
  get fullName() {
    return this.firstName + " " + this.lastName;
  },
  
  // setter
  set fullName(name) {
    var parts = name.split(" ");
    this.firstName = parts[0];
    this.lastName = parts[1];
  }
};

console.log(person.fullName); // "John Doe"
person.fullName = "Jane Smith";
console.log(person.firstName); // "Jane"
console.log(person.lastName); // "Smith"

// Object.defineProperty로도 getter/setter 정의 가능
var counter = {count: 0};
Object.defineProperty(counter, 'increment', {
  get: function() {
    this.count++;
    return this.count;
  }
});

console.log(counter.increment); // 1
console.log(counter.increment); // 2

 

 

문자열 메서드 

trim이 추가되었다.

 

사용 불가

ES6이후 도입 메서드	도입시기	설명
String.prototype.startsWith(search, [pos])	ES6	주어진 문자열이 특정 문자열로 시작하는지 확인
String.prototype.endsWith(search, [length])	ES6	주어진 문자열이 특정 문자열로 끝나는지 확인
String.prototype.includes(search, [start])	ES6	문자열이 특정 문자열을 포함하는지 확인
String.prototype.repeat(count)	ES6	문자열을 주어진 횟수만큼 반복한 새 문자열 반환
String.prototype.codePointAt(pos)	ES6	주어진 위치의 UTF-16 코드 포인트 반환 (이모지 등 2바이트 문자에 유용)
String.fromCodePoint(...codePoints)	ES6	하나 이상의 유니코드 코드 포인트로부터 문자열 생성
String.prototype.padStart(targetLength, padString)	ES8	주어진 길이에 도달할 때까지 문자열 시작 부분에 다른 문자열 추가
String.prototype.padEnd(targetLength, padString)	ES8	주어진 길이에 도달할 때까지 문자열 끝 부분에 다른 문자열 추가
String.prototype.matchAll(regexp)	ES11	정규 표현식과 일치하는 모든 결과의 이터레이터 반환 (반복 가능한 매칭 결과 제공)
String.prototype.replaceAll(search, replacement)	ES12	문자열 내 모든 일치 항목을 교체 (기존 replace는 첫 번째만 교체됨)

 

예시

// trim: 문자열 앞뒤의 공백 제거
var str = "  Hello World  ";
var trimmed = str.trim(); // "Hello World"

// 부분 문자열 추출 메서드
var text = "JavaScript";
text.charAt(0); // "J"
text.charCodeAt(0); // 74 (J의 Unicode 값)
text.substring(0, 4); // "Java"
text.substr(4, 6); // "Script"
text.slice(0, 4); // "Java"
text.slice(-6); // "Script"

 

 

그 외에도 Date 객체 개선사항 등이 있다.

 

사용 시 주의점

var와 let, const 차이에 대해 주의해야한다. var의 경우 함수 스코프를 가지며 같은 이름으로 재선언 및 호이스팅이 가능하다. 블록 스코프 변수 선언이 필요한 경우 즉시 실행 함수로 대체해야하며 호이스팅으로 인해 예상치 못한 동작에 주의해야한다. 

 

함수 정의 시에는 함수 표현식과 함수 선언식만 가능하며 화살표함수를 사용할 수 없다. 기본 매개변수 값 문법이 없고 나머지 매개변수 문법도 없다.

// 함수 선언식
function add(a, b) {
  return a + b;
}

// 함수 표현식
var subtract = function(a, b) {
  return a - b;
};

// 즉시 실행 함수 표현식(IIFE)
(function() {
  var private = "비공개 변수";
  console.log(private);
})();

 

Promise가 네이티브로 지원되지 않는다. 콜백지옥이 발생할 수 있고, async, await 구문을 사용할 수 없다. Promise 폴리필 또는 라이브러리를 필요로 한다.

// 콜백 패턴
function getData(callback) {
  setTimeout(function() {
    callback("데이터");
  }, 1000);
}

getData(function(data) {
  console.log(data); // "데이터"
});

// Promise는 라이브러리(예: Bluebird, Q)를 통해 구현해야 함

 

네이티브 모듈 시스템이 없다. import, export 문법을 사용할 수 없으며 모듈 로더 또는 번들러를 필요로 한ㄷ. 전역 네임스페이스 오염에 주의하여야 한다.

// ES5에서는 전역 네임스페이스를 사용한 패턴
var MyModule = (function() {
  var privateVar = "비공개";
  
  function privateFunc() {
    console.log(privateVar);
  }
  
  return {
    publicVar: "공개",
    publicFunc: function() {
      privateFunc();
    }
  };
})();

// 또는 CommonJS(Node.js 스타일)
var module = require('./module');
module.doSomething();

// 또는 AMD(RequireJS 스타일)
define(['dependency'], function(dependency) {
  return {
    doSomething: function() {}
  };
});

 

객체 및 배열을 조작할 때 구조 분해 할당 및 스프레드 연산자가 없다. 스프레드 연산자 대신 concat(), apply() 사용이 필요하다. assign()의 경우 후기 버전에서만 사용 가능하다.

// 객체에서 값 추출
var person = { name: "John", age: 30 };
var name = person.name;
var age = person.age;

// 객체 복사/병합
var original = { a: 1, b: 2 };
var copy = {};

Object.keys(original).forEach(function(key) {
  copy[key] = original[key];
});

// ES5 후기에 추가된 Object.assign 사용
var merged = Object.assign({}, original, { c: 3 });

// 배열 복사
var arr = [1, 2, 3];
var arrCopy = arr.slice();

// 배열 병합
var arr1 = [1, 2];
var arr2 = [3, 4];
var merged = arr1.concat(arr2);

 

 

클래스 상속 시에는 프로토타입 기반 상속을 해야한다. ES6 클래스 문법은 당연히 사용 불가하며 super 키워드가 없다.

// 생성자 함수
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 프로토타입에 메서드 추가
Person.prototype.sayHello = function() {
  return "Hi, I'm " + this.name;
};

// 상속
function Employee(name, age, job) {
  // 상위 생성자 호출
  Person.call(this, name, age);
  this.job = job;
}

// 프로토타입 체인 설정
Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

// 하위 클래스에 메서드 추가
Employee.prototype.getJob = function() {
  return this.job;
};

var john = new Employee("John", 30, "Developer");
john.sayHello(); // "Hi, I'm John"
john.getJob(); // "Developer"

 

 

문자열 연결 시 + 연산자를 사용해야한다. 템플릿 리터럴``(백틱)은 사용불가하다.

var name = "John";
var age = 30;

// 문자열 연결
var message = "My name is " + name + " and I am " + age + " years old.";

// 여러 줄 문자열
var multiline = "This is a\n" +
                "multiline\n" +
                "string.";