자바스크립트 ES5

ES5라고도 알려진 ECMAScript 2009는 JavaScript의 첫 번째 주요 개정판입니다.

이 장에서는 ES5의 가장 중요한 기능에 대해 설명합니다.

ES5 기능

브라우저 지원

ES5모든 최신 브라우저에서 완벽하게 지원됩니다.


Chrome	IE	Edge	Firefox	Safari	Opera
Yes	9.0	Yes	Yes	Yes	Yes

"엄격한 사용" 지침

"use strict"JavaScript 코드가 "엄격한 모드"에서 실행되어야 함을 정의합니다.

예를 들어 엄격 모드에서는 선언되지 않은 변수를 사용할 수 없습니다.

모든 프로그램에서 엄격 모드를 사용할 수 있습니다. 선언되지 않은 변수를 사용하지 못하도록 하는 것과 같이 보다 깔끔한 코드를 작성하는 데 도움이 됩니다.

"use strict"는 단지 문자열 표현식입니다. 오래된 브라우저는 이해하지 못한다면 오류를 던지지 않을 것입니다.

JS Strict Mode 에서 더 읽어보세요 .

문자열에 대한 속성 액세스

이 charAt()메서드는 문자열의 지정된 인덱스(위치)에 있는 문자를 반환합니다.

예시

var str = "HELLO WORLD";
str.charAt(0); // returns H

ES5는 문자열에 대한 속성 액세스를 허용합니다.

예시

var str = "HELLO WORLD";
str[0]; // returns H

문자열에 대한 속성 액세스는 약간 예측할 수 없습니다.

JS String Methods 에서 더 읽어보세요 .

여러 줄에 걸친 문자열

ES5는 백슬래시로 이스케이프된 경우 여러 줄에 대한 문자열 리터럴을 허용합니다.

예시

"Hello \
Dolly!";

\ 메소드는 보편적인 지원을 하지 않을 수 있습니다.
이전 브라우저는 백슬래시 주변의 공백을 다르게 처리할 수 있습니다.
일부 구형 브라우저는 \ 문자 뒤에 공백을 허용하지 않습니다.

문자열 리터럴을 분리하는 더 안전한 방법은 문자열 추가를 사용하는 것입니다.

예시

"Hello " +
"Dolly!";

속성 이름으로 예약어

ES5는 예약어를 속성 이름으로 허용합니다.

개체 예

var obj = {name: "John", new: "yes"}

문자열 다듬기()

이 trim()메서드는 문자열의 양쪽에서 공백을 제거합니다.

예시

var str = " Hello World! ";
alert(str.trim());

JS String Methods 에서 더 읽어보세요 .

Array.isArray()

이 isArray()메서드는 개체가 배열인지 확인합니다.

예시

function myFunction() {
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
x.innerHTML = Array.isArray(fruits);
}

JS 배열 에서 더 읽어보세요 .

forEach() 배열

이 forEach()메서드는 각 배열 요소에 대해 한 번씩 함수를 호출합니다.

예시

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value) {
txt = txt + value + "<br>";
}

JS 배열 반복 방법 에서 자세히 알아보세요 .

배열 맵()

이 예에서는 각 배열 값에 2를 곱합니다.

예시

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value) {
return value * 2;
}

JS 배열 반복 방법 에서 자세히 알아보세요 .

배열 필터()

이 예에서는 18보다 큰 값을 가진 요소에서 새 배열을 만듭니다.

예시

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value) {
return value > 18;
}

JS 배열 반복 방법 에서 자세히 알아보세요 .

배열 축소()

이 예에서는 배열에 있는 모든 숫자의 합을 찾습니다.

예시

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
return total + value;
}

JS 배열 반복 방법 에서 자세히 알아보세요 .

배열 reduceRight()

이 예에서는 배열에 있는 모든 숫자의 합도 찾습니다.

예시

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value) {
return total + value;
}

JS 배열 반복 방법 에서 자세히 알아보세요 .

배열마다()

이 예에서는 모든 값이 18을 초과하는지 확인합니다.

예시

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value) {
return value > 18;
}

JS 배열 반복 방법 에서 자세히 알아보세요 .

배열 some()

이 예에서는 일부 값이 18을 초과하는지 확인합니다.

예시

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);

function myFunction(value) {
return value > 18;
}

JS 배열 반복 방법 에서 자세히 알아보세요 .

배열 indexOf()

배열에서 요소 값을 검색하고 해당 위치를 반환합니다.

예시

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

JS 배열 반복 방법 에서 자세히 알아보세요 .

배열 lastIndexOf()

lastIndexOf()와 indexOf()같지만 배열의 끝에서 검색합니다.

예시

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

JS 배열 반복 방법 에서 자세히 알아보세요 .

JSON.parse()

JSON의 일반적인 용도는 웹 서버에서 데이터를 수신하는 것입니다.

웹 서버에서 다음 텍스트 문자열을 받았다고 상상해 보십시오.

'{"name":"John", "age":30, "city":"New York"}'

JavaScript 함수 JSON.parse()는 텍스트를 JavaScript 객체로 변환하는 데 사용됩니다.

var obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}');

JSON 튜토리얼 에서 더 읽어보세요 .

JSON.stringify()

JSON의 일반적인 용도는 웹 서버에 데이터를 보내는 것입니다.

웹 서버에 데이터를 보낼 때 데이터는 문자열이어야 합니다.

JavaScript에 이 객체가 있다고 상상해보십시오.

var obj = {name:"John", age:30, city:"New York"};

JavaScript 함수 JSON.stringify()를 사용하여 문자열로 변환합니다.

var myJSON = JSON.stringify(obj);

결과는 JSON 표기법을 따르는 문자열입니다.

myJSON은 이제 문자열이며 서버로 보낼 준비가 되었습니다.

예시

var obj = {name:"John", age:30, city:"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

JSON 튜토리얼 에서 더 읽어보세요 .

날짜.지금()

Date.now() returns the number of milliseconds since zero date (January 1. 1970 00:00:00 UTC).

Example

var timInMSs = Date.now();

Date.now() returns the same as getTime() performed on a Date object.

Learn more in JS Dates.

Date toISOString()

The toISOString() method converts a Date object to a string, using the ISO standard format:

Example

const d = new Date();
document.getElementById("demo").innerHTML = d.toISOString();

Date toJSON()

toJSON() converts a Date object into a string, formatted as a JSON date.

JSON dates have the same format as the ISO-8601 standard: YYYY-MM-DDTHH:mm:ss.sssZ:

Example

d = new Date();
document.getElementById("demo").innerHTML = d.toJSON();

Property Getters and Setters

ES5 lets you define object methods with a syntax that looks like getting or setting a property.

This example creates a getter for a property called fullName:

Example

// Create an object:
var person = {
firstName: "John",
lastName : "Doe",
get fullName() {
return this.firstName + " " + this.lastName;
}
};

// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.fullName;

This example creates a setter and a getter for the language property:

Example

This example uses a setter to secure upper case updates of language:

Example

var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
};

// Set an object property using a setter:
person.lang = "en";

// Display data from the object:
document.getElementById("demo").innerHTML = person.language;

Learn more about Gettes and Setters in JS Object Accessors

Object.defineProperty()

Object.defineProperty() is a new Object method in ES5.

It lets you define an object property and/or change a property's value and/or metadata.

Example

// Create an Object:
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
};

// Change a Property:
Object.defineProperty(person, "language", {
value: "EN",
  writable : true,
  enumerable : true,
  configurable : true
});

// Enumerate Properties
var txt = "";
for (var x in person) {
txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Next example is the same code, except it hides the language property from enumeration:

Example

// Create an Object:
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
};

// Change a Property:
Object.defineProperty(person, "language", {
value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});

// Enumerate Properties
var txt = "";
for (var x in person) {
txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

This example creates a setter and a getter to secure upper case updates of language:

Example

/// Create an Object:
var person = {
firstName: "John",
lastName : "Doe",
language : "NO"
};

// Change a Property:
Object.defineProperty(person, "language", {
get : function() { return language },
set : function(value) { language = value.toUpperCase()}
});

// Change Language
person.language = "en";

// Display Language
document.getElementById("demo").innerHTML = person.language;

E5 Object Methods

ES5 added a lot of new Object Methods to JavaScript:

Managing Objects

// Create object with an existing object as prototype
Object.create(parent, donor)

// Adding or changing an object property
Object.defineProperty(object, property, descriptor)

// Adding or changing object properties
Object.defineProperties(object, descriptors)

// Accessing Properties
Object.getOwnPropertyDescriptor(object, property)

// Returns all properties as an array
Object.getOwnPropertyNames(object)

// Accessing the prototype
Object.getPrototypeOf(object)

// Returns enumerable properties as an array
Object.keys(object)

Protecting Objects

// Prevents adding properties to an object
Object.preventExtensions(object)

// Returns true if properties can be added to an object
Object.isExtensible(object)

// Prevents changes of object properties (not values)
Object.seal(object)

// Returns true if object is sealed
Object.isSealed(object)

// Prevents any changes to an object
Object.freeze(object)

// Returns true if object is frozen
Object.isFrozen(object)

Learn more in Object ECMAScript5.

Trailing Commas

ES5 allows trailing commas in object and array definitions:

Object Example

person = {
firstName: "John",
lastName: " Doe",
age: 46,
}

Array Example

points = [
1,
5,
10,
25,
40,
100,
];

WARNING !!!

JSON does not allow trailing commas.

JSON Objects:

// Allowed:
var person = '{"firstName":"John", "lastName":"Doe", "age":46}'
JSON.parse(person)

// Not allowed:
var person = '{"firstName":"John", "lastName":"Doe", "age":46,}'
JSON.parse(person)

JSON Arrays:

// Allowed:
points = [40, 100, 1, 5, 25, 10]

// Not allowed:
points = [40, 100, 1, 5, 25, 10,]

❮ Previous Next ❯

JS 튜토리얼

JS 버전

JS 객체

JS 함수

JS 클래스

JS 비동기

JS HTML DOM

JS 브라우저 BOM

JS 웹 API

JS 아약스

JS JSON

JS 대 jQuery

JS 그래픽

JS 예제

JS 참조

자바스크립트 ES5

ES5 기능

브라우저 지원

"엄격한 사용" 지침

문자열에 대한 속성 액세스

예시

예시

여러 줄에 걸친 문자열

예시

예시

속성 이름으로 예약어

개체 예

문자열 다듬기()

예시

Array.isArray()

예시

forEach() 배열

예시

배열 맵()

예시

배열 필터()

예시

배열 축소()

예시

배열 reduceRight()

예시

배열마다()

예시

배열 some()

예시

배열 indexOf()

예시

배열 lastIndexOf()

예시

JSON.parse()

JSON.stringify()

예시

날짜.지금()

Example

Date toISOString()

Example

Date toJSON()

Example

Property Getters and Setters

Example

Example

Example

Object.defineProperty()

Example

Example

Example

E5 Object Methods

Managing Objects

Protecting Objects

Trailing Commas

Object Example

Array Example

JSON Objects:

JSON Arrays: