제이스크립트 ES5

ECMAScript 5는 무엇인가요?

ECMAScript 5는 ES5 또는 ECMAScript 2009로도 알려져 있습니다。

이 장은 ES5의 가장 중요한 기능 몇 가지를 소개합니다。

ECMAScript 5 기능

이는 2009년에 발표된 새로운 기능입니다：

  • "use strict" 명령
  • String.trim()
  • Array.isArray()
  • Array.forEach()
  • Array.map()
  • Array.filter()
  • Array.reduce()
  • Array.reduceRight()
  • Array.every()
  • Array.some()
  • Array.indexOf()
  • Array.lastIndexOf()
  • JSON.parse()
  • JSON.stringify()
  • Date.now()
  • 속성 getter와 setter
  • 새 객체 속성과 메서드

ECMAScript 5 문법 변경

  • 문자열의 프로퍼티 접근 [ ]
  • 배열과 객체 리터럴의 트레일링 컴마
  • 다중 행 문자열 리터럴
  • 프로퍼티 이름으로 사용할 수 없는 예약어

"use strict" 명령

"use strict"정의된 JavaScript 코드는严格模式에서 실행되어야 합니다。

예를 들어,严格模式에서는 미지시된 변수를 사용할 수 없습니다。

모든 프로그램에서严格模式을 사용할 수 있습니다. 이는 더 명확한 코드를 작성하는 데 도움이 됩니다. 예를 들어, 미지시된 변수 사용을 방지합니다。

"use strict”이는 단순히 문자열 표현식일 뿐입니다. 이를 이해하지 못하는 고대 브라우저는 오류를 던지지 않습니다。

제목을 읽어보세요 JS严格模式 더 많은 내용을 읽어보세요。

String.trim()

String.trim() 문자열의 양쪽 공백 문자를 제거합니다。

예제

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

직접 테스트해 보세요

请在 JS 문자열 메서드 더 많은 내용을 읽어보세요。

Array.isArray()

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

예제

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

직접 테스트해 보세요

请在 JS 배열 더 많은 내용을 읽어보세요。

Array.forEach()

forEach() 각 배열 요소에 대해 함수를 한 번 호출하는 메서드입니다。

예제

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
  txt = txt + value + "<br>"; 
}

직접 테스트해 보세요

请在 JS 배열 반복 메서드 更多内容请参阅。

Array.map()

이 예제는 각 배열 값에 2를 곱합니다：

예제

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value) {
  return value * 2;
}

직접 테스트해 보세요

请在 JS 배열 반복 메서드 更多内容请参阅。

Array.filter()

이 예제는 18보다 큰 값의 요소로 새 배열을 생성합니다：

예제

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value) {
  return value > 18;
}

직접 테스트해 보세요

请在 JS 배열 반복 메서드 更多内容请参阅。

Array.reduce()

이 예제는 배열 내 모든 수의 합을 결정합니다：

예제

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value) {
  return total + value;
}

직접 테스트해 보세요

请在 JS 배열 반복 메서드 更多内容请参阅。

Array.reduceRight()

이 예제는 배열의 모든 수의 합을 결정하는 것과 동일합니다：

예제

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
function myFunction(total, value) {
  return total + value;
}

직접 테스트해 보세요

请在 JS 배열 반복 메서드 更多内容请参阅。

Array.every()

이 예제는 모든 값이 18보다 큰지 확인합니다：

예제

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction(value) {
  return value > 18;
}

직접 테스트해 보세요

请在 JS 배열 반복 메서드 更多内容请参阅。

Array.some()

이 예제는 18보다 큰 값이 있는지 확인합니다：

예제

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.some(myFunction);
function myFunction(value) {
  return value > 18;
}

직접 테스트해 보세요

请在 JS 배열 반복 메서드 更多内容请参阅。

Array.indexOf()

배열에서 특정 요소 값을 검색하여 위치를 반환합니다：

예제

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

직접 테스트해 보세요

请在 JS 배열 반복 메서드更多内容请参阅。

Array.lastIndexOf()

Array.lastIndexOf() 과 Array.indexOf() 그러나 배열의 끝에서 시작하여 검색합니다。

예제

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

직접 테스트해 보세요

请在 JS 배열 반복 메서드 更多内容请参阅。

JSON.parse()

JSON의 일반적인 사용은 Web 서버에서 데이터를 받는 것입니다。

웹 서버에서 이 텍스트 문자열을 받았다고 생각해 보세요：

'{"name":"Bill", "age":62, "city":"Seatle"}'

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

var obj = JSON.parse('{"name":"Bill", "age":62, "city":"Seatle"}');

직접 테스트해 보세요

우리의 JSON 강의 更多内容请参阅。

JSON.stringify()

JSON의 일반적인 사용은 Web 서버로 데이터를 보내는 것입니다。

Web 서버로 데이터를 보내는 경우 데이터는 문자열이어야 합니다。

JavaScript에서 이 객체가 있다고 생각해 보세요：

var obj = {"name":"Bill", "age":62, "city":"Seatle"};

JavaScript 함수 JSON.stringify()를 사용하여 문자열로 변환하십시오。

var myJSON = JSON.stringify(obj);

결과는 JSON 표현법을 따르는 문자열이 될 것입니다。

myJSON 현재는 서버로 전송되기 위해 준비된 문자열입니다：

예제

var obj = {"name":"Bill", "age":62, "city":"Seatle"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

직접 테스트해 보세요

우리의 JSON 강의 更多内容请参阅。

Date.now()

Date.now()는 1970년 1월 1일 00:00:00:00로부터의 밀리초수를 반환합니다.

예제

var timInMSs = Date.now();

직접 테스트해 보세요

Date.now() 의 반환은 Date 객체에서 getTime()을 실행한 결과와 같습니다.

请在 JS 날짜 에 대해 더 알아보세요.

속성 getter와 setter

ES5는 속성을 가져오거나 설정하는 문법과 유사하게 객체 메서드를 정의할 수 있습니다.

이 예제에서 fullName 이름의 속성에 getter：

예제

// 객체 생성：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
});
// getter를 사용하여 객체에서 데이터를 표시합니다：
document.getElementById("demo").innerHTML = person.fullName;

직접 테스트해 보세요

이 예제에서 언어 속성에 setter 과 getter：

예제

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO",
  get lang() {
    return this.language;
  },
  set lang(value) {
    this.language = value;
  }
});
// setter를 사용하여 객체 속성을 설정합니다：
person.lang = "en";
// getter를 사용하여 객체에서 데이터를 표시합니다：
document.getElementById("demo").innerHTML = person.lang;

직접 테스트해 보세요

이 예제에서 setter를 사용하여 언어의 대문자 업데이트를 보장합니다：

예제

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO",
  set lang(value) {
    this.language = value.toUpperCase();
  }
});
// setter를 사용하여 객체 속성을 설정합니다：
person.lang = "en";
// 객체에서 데이터를 표시합니다：
document.getElementById("demo").innerHTML = person.language;

직접 테스트해 보세요

请在 JS 객체 접근자 getter와 setter에 대해 더 알아보세요.

새 객체 속성과 메서드

Object.defineProperty() ES5에서 새로운 객체 메서드입니다.

이는 객체 속성을 정의하거나 속성 값과/또는 메타데이터를 변경하도록 허용합니다.

예제

// 객체 생성：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
});
// 속성 변경：
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : true;
  configurable : true
});
// 속성 구조
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

직접 테스트해 보세요

다음 예제는 동일한 코드지만, 목록에서 언어 속성을 숨깁니다：

예제

// 객체 생성：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO", 
});
// 속성 변경：
Object.defineProperty(person, "language", {
  value: "EN",
  writable : true,
  enumerable : false,
  configurable : true
});
// 속성 구조
var txt = "";
for (var x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

직접 테스트해 보세요

이 예제에서는 언어의 대문자 업데이트를 보장하기 위해 setter와 getter를 생성합니다：

예제

// 객체 생성：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "NO"
});
// 속성 변경：
Object.defineProperty(person, "language", {
  get : function() { return language },
  set : function(value) { language = value.toUpperCase()}
});
// 언어 변경
person.language = "en";
// 언어 표시
document.getElementById("demo").innerHTML = person.language;

직접 테스트해 보세요

ES5 새로운 객체 메서드

ECMAScript 5는 JavaScript에 많은 새로운 객체 메서드를 추가했습니다：

// 객체 속성 추가 또는 변경
Object.defineProperty(object, property, descriptor)
// 여러 개의 객체 속성 추가 또는 변경
Object.defineProperties(object, descriptors)
// 속성 액세스
Object.getOwnPropertyDescriptor(object, property)
// 모든 속성을 배열로 반환
Object.getOwnPropertyNames(object)
// 가능한 속성을 배열로 반환
Object.keys(object)
// 원형 액세스
Object.getPrototypeOf(object)
// 객체에 속성 추가를 방지
Object.preventExtensions(object)
// 객체에 속성을 추가할 수 있다면 true를 반환
Object.isExtensible(object)
// 객체 속성(가치가 아닌 속성) 변경을 방지
Object.seal(object)
// 객체가 마취되면 true를 반환
Object.isSealed(object)
// 객체에 대한 모든 변경을 방지
Object.freeze(object)
// 객체가 얼려지면 true를 반환
Object.isFrozen(object)

请在 ECMAScript5 객체 更多内容请参阅。

문자열의 속성 접근

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

예제

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

직접 테스트해 보세요

ECMAScript 5는 문자열에 대한 속성 접근을 허용합니다:

예제

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

직접 테스트해 보세요

문자열의 속성 접근이 약간 예측 불가능할 수 있습니다.

请在 JS 문자열 메서드 更多内容请参阅。

꼬리 커스텀(Trailing Commas)

ECMAScript 5는 객체와 배열 정의에서 꼬리 커스텀을 허용합니다:

Object 인스턴스

person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 62,
}

Array 인스턴스

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

경고!!!

Internet Explorer 8이 충돌할 것입니다.

JSON은 꼬리 커스텀을 사용할 수 없습니다.

JSON 객체:

// 가능:
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62}'
JSON.parse(person)
// 불가능:
var person = '{"firstName":"Bill", "lastName":"Gates", "age":62,}'
JSON.parse(person)

JSON 배열:

// 가능:
points = [40, 100, 1, 5, 25, 10]
// 불가능:
points = [40, 100, 1, 5, 25, 10,]

다중 행 문자

반삭 문자를 사용하여 이스케이프할 경우 ECMAScript 5는 다중 행 문자 텍스트(라이너리)를 다중 행으로 사용할 수 있습니다:

예제

"Hello \
Kitty!";

직접 테스트해 보세요

'\' 메서드는 널리 지원되지 않을 수 있습니다.

구부러운 브라우저는 반삭 문자 주위의 공백을 다른 방식으로 처리할 수 있습니다.

일부 오래된 브라우저는 '\' 문자 뒤의 공백을 허용하지 않습니다.

문자열 텍스트를 분해하는 더 안전한 방법은 문자열 추가를 사용하는 것입니다:

예제

"Hello " + 
"Kitty!";

직접 테스트해 보세요

보존어명자를 속성 이름으로 사용

ECMAScript 5는 보존어명자를 속성 이름으로 사용할 수 있습니다:

객체 예제

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

직접 테스트해 보세요

ES5 (ECMAScript 5) 브라우저 지원

크롬 23, IE 10, 사파리 6은 ECMAScript 5를 완전히 지원하는 첫 번째 브라우저입니다:

크롬 23 IE10 / 엣지 파이어폭스 21 사파리 6 오페라 15
2012년 9월 2012년 9월 2013년 4월 2012년 7월 2013년 7월