▶ JavaScript Versions

JavaScript 2009 (ES5)

JavaScript 2009 (ES5): ECMAScript 5의 주요 기능과 특징

*ECMAScript 5 (ES5)**는 2009년에 발표된 JavaScript 표준으로, JavaScript의 성능과 기능을 대폭 개선한 중요한 업데이트입니다. ES5는 개발자가 안전한 코드 작성과 유지보수를 쉽게 할 수 있도록 많은 기능을 추가했습니다. **엄격 모드(Strict Mode)**와 새로운 배열 메서드 등이 대표적인 기능으로, 오늘날 대부분의 브라우저와 환경에서 지원됩니다.

이 가이드는 ES5에서 도입된 주요 기능과 개선 사항을 다루고, 각 기능의 사용 예시를 제공합니다.

1. 엄격 모드 (Strict Mode)

엄격 모드는 JavaScript를 보다 엄격하게 해석하여, 잠재적인 오류를 미리 발견하고, 안전한 코드 작성을 돕는 기능입니다. **"use strict";**를 코드 상단에 추가하면 스코프 관리와 잘못된 변수 사용 등에서 보다 엄격한 검사를 수행합니다.

1.1. 엄격 모드의 사용법

"use strict";

x = 10;  // ReferenceError: x is not defined

1.2. 엄격 모드의 특징

암시적 전역 변수 사용 금지: 변수를 선언하지 않고 사용하는 경우 오류 발생.
삭제할 수 없는 속성 삭제 금지: delete 연산자로 객체의 속성 삭제 시 오류 발생.
함수 파라미터의 중복 허용 금지: 중복된 매개변수 이름을 사용할 수 없음.

2. 배열 메서드 확장

ES5에서는 배열 처리를 더 쉽고 직관적으로 할 수 있도록 다양한 배열 메서드가 추가되었습니다. 이 메서드들은 배열의 순회, 필터링, 정렬 등을 간편하게 처리할 수 있게 해줍니다.

2.1. `forEach()`

*forEach()*는 배열의 각 요소를 반복적으로 처리할 때 사용됩니다.

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => {
    console.log(num);
});

2.2. `map()`

*map()*은 배열의 각 요소를 변환하여 새로운 배열을 반환합니다.

const numbers = [1, 2, 3];
const squares = numbers.map(num => num * num);
console.log(squares);  // [1, 4, 9]

2.3. `filter()`

*filter()*는 배열의 각 요소에 대해 조건을 검사하고, 조건을 만족하는 요소들로만 새로운 배열을 생성합니다.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers);  // [2, 4]

2.4. `reduce()`

*reduce()*는 배열의 모든 요소를 순회하면서 하나의 값으로 축약합니다.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum);  // 10

2.5. `some()`과 `every()`

some(): 배열의 일부 요소가 조건을 만족하는지 확인.
every(): 배열의 모든 요소가 조건을 만족하는지 확인.

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.some(num => num > 3));  // true
console.log(numbers.every(num => num > 0));  // true

3. 객체 메서드 확장

ES5에서는 객체 처리와 관련된 새로운 메서드들도 추가되었습니다. 이 메서드들은 객체의 속성에 대한 제어와 정보 접근을 더 쉽게 만듭니다.

3.1. `Object.keys()`

*Object.keys()*는 객체의 키 목록을 배열로 반환합니다.

const person = { name: 'Alice', age: 25 };
const keys = Object.keys(person);
console.log(keys);  // ['name', 'age']

3.2. `Object.create()`

*Object.create()*는 프로토타입을 지정하여 새로운 객체를 생성합니다.

const personPrototype = {
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

const alice = Object.create(personPrototype);
alice.name = 'Alice';
alice.greet();  // Hello, my name is Alice

3.3. `Object.defineProperty()`와 `Object.defineProperties()`

*Object.defineProperty()*와 **Object.defineProperties()*는 객체의 속성을 정밀하게 제어할 수 있도록 합니다. 속성의 특성(writable, enumerable, configurable 등)을 정의할 수 있습니다.

const person = {};
Object.defineProperty(person, 'name', {
    value: 'Alice',
    writable: false  // 속성 값 변경 불가
});
console.log(person.name);  // Alice
person.name = 'Bob';  // 무시됨
console.log(person.name);  // 여전히 Alice

4. JSON 지원

ES5에서는 JSON 데이터 처리를 위한 **JSON.parse()**와 **JSON.stringify()**가 도입되었습니다. 이 두 가지 메서드는 JSON 형식의 데이터를 JavaScript 객체로 변환하거나, JavaScript 객체를 JSON 문자열로 변환하는 데 사용됩니다.

4.1. `JSON.parse()`

*JSON.parse()*는 JSON 문자열을 JavaScript 객체로 변환합니다.

const jsonString = '{"name": "Alice", "age": 25}';
const person = JSON.parse(jsonString);
console.log(person.name);  // Alice

4.2. `JSON.stringify()`

*JSON.stringify()*는 JavaScript 객체를 JSON 문자열로 변환합니다.

const person = { name: 'Alice', age: 25 };
const jsonString = JSON.stringify(person);
console.log(jsonString);  // '{"name":"Alice","age":25}'

5. `Function.prototype.bind()`

bind() 메서드는 함수의 this 값을 명시적으로 고정할 수 있도록 합니다. 이를 통해 콜백 함수나 이벤트 핸들러에서 **this**가 예상대로 동작하도록 만들 수 있습니다.

5.1. `bind()`의 사용 예시

const person = {
    name: 'Alice',
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

const greet = person.greet.bind(person);
setTimeout(greet, 1000);  // Hello, my name is Alice

6. `Object.freeze()`와 `Object.seal()`

ES5에서는 객체를 동결하거나 봉인하여 변경을 막는 기능을 도입했습니다.

6.1. `Object.freeze()`

*Object.freeze()*는 객체의 속성 추가, 삭제, 수정을 완전히 금지합니다.

const person = { name: 'Alice', age: 25 };
Object.freeze(person);
person.age = 30;  // 무시됨
console.log(person.age);  // 25

6.2. `Object.seal()`

*Object.seal()*은 객체의 속성 추가와 삭제를 금지하지만, 속성 값의 수정은 허용합니다.

const person = { name: 'Alice', age: 25 };
Object.seal(person);
person.age = 30;  // 수정 가능
delete person.name;  // 무시됨
console.log(person);  // { name: 'Alice', age: 30 }

7. 프로퍼티 접근자

ES5에서는 객체의 속성에 접근하는 방식도 개선되었습니다. Getter와 Setter를 통해 속성 값을 동적으로 계산하거나, 속성 설정 시 특정 작업을 수행할 수 있게 되었습니다.

7.1. Getter와 Setter 예시

const person = {
    firstName: 'Alice',
    lastName: 'Doe',
    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    },
    set fullName(name) {
        [this.firstName, this.lastName] = name.split(' ');
    }
};

console.log(person.fullName);  // Alice Doe
person.fullName = 'Bob Smith';
console.log(person.fullName);  // Bob Smith

요약

ES5는 JavaScript에서 매우

중요한 전환점이 된 버전으로, 여러 가지 기능을 통해 개발자가 안전하고 효율적인 코드를 작성할 수 있도록 도왔습니다.

*엄격 모드(Strict Mode)**를 도입하여 코드의 오류를 사전에 방지하고, 더 엄격한 문법을 강제.
배열 메서드(forEach(), map(), filter(), reduce() 등)를 통해 배열 처리 로직을 간단하게 작성 가능.
객체 메서드(Object.keys(), Object.create(), Object.defineProperty())로 객체의 속성에 대한 제어를 강화.
JSON 지원을 통해 JSON 데이터를 쉽게 처리할 수 있게 개선.
*bind()*를 통해 함수의 this 값 고정을 가능하게 하여, 콜백 함수나 이벤트 핸들러에서의 오류를 방지.

ES5의 기능을 잘 활용하면 안정적이고 유지보수하기 쉬운 코드를 작성할 수 있습니다.

코딩 스쿨 JavaScript