자바스크립트

자바스크립트

HTML이 있는 JavaScript 소스 코드의 스크린샷
어형 변화표	다중 패러다임 : 이벤트 중심 , 기능적 , 명령적 , 절차적 , 객체 지향 프로그래밍
에 의해 설계된	처음에는 Netscape의 Brendan Eich ; 다른 사람들도 ECMAScript 표준 에 기여했습니다.
첫 등장	1995년 12월 4일 ; 27년 전 [1] (1995-12-04)
안정적인 릴리스	ECMAScript 2021 [2]  / 2021년 6월 ; 18개월 전 (June 2021)
미리보기 릴리스	ECMAScript 2022 [3]  / 2021년 7월 22일 ; 16개월 전 (22 July 2021)
타이핑 규율	동적 , 약자 , 오리
파일 이름 확장자	.js .cjs .mjs[4]
웹사이트	www .ecma-international .org /publications-and-standards /standards /ecma-262 /
주요 구현
V8 , JavaScriptCore , SpiderMonkey , Chakra
영향을 받음
Java , [5] [6] Scheme , [6] Self , [7] AWK , [8] HyperTalk [9]
영향을 받음
ActionScript , AssemblyScript , CoffeeScript , Dart , Haxe , JS++ , Objective-J , Opa , TypeScript
Wikibooks의 JavaScript

JavaScript ( / ˈdʒ ɑː v ə skr ɪ p t / ) 는 종종 JS 로 약칭되며 HTML 및 CSS 와 함께 World Wide Web 의 핵심 기술 중 하나인 프로그래밍 언어 입니다 . 2022년 현재 웹사이트의 98%가 웹 페이지 동작을 위해 클라이언트 측에서 자바스크립트를 사용 하며 종종 타사 라이브러리 를 통합 합니다. 모든 주요 웹 브라우저 에는 전용 JavaScript 엔진 이 있어사용자 기기 의 코드 .

JavaScript는 ECMAScript 표준 을 준수하는 고수준의 JIT (Just-In-Time) 컴파일 언어입니다 . ^[10] 동적 타이핑 , 프로토타입 기반 객체 지향 및 일급 함수가 있습니다 . 이벤트 기반 , 기능적 및 명령형 프로그래밍 스타일 을 지원하는 다중 패러다임 입니다 . 텍스트, 날짜, 정규 표현식 , 표준 데이터 구조 및 문서 개체 모델 작업을 위한 API( 응용 프로그래밍 인터페이스 ) 가 있습니다. (돔).

ECMAScript 표준에는 네트워킹 , 스토리지 또는 그래픽 기능 과 같은 입/출력 (I/O) 이 포함되어 있지 않습니다 . 실제로 웹 브라우저 또는 기타 런타임 시스템 은 I/O용 JavaScript API를 제공합니다.

JavaScript 엔진 은 원래 웹 브라우저에서만 사용되었지만 현재는 일부 서버 및 다양한 애플리케이션 의 핵심 구성 요소입니다 . 이 용도로 가장 널리 사용되는 런타임 시스템은 Node.js 입니다.

Java 와 JavaScript는 이름, 구문 및 각각 의 표준 라이브러리 에서 유사 하지만 두 언어는 구별되며 설계에서 크게 다릅니다.

연혁

넷스케이프에서의 창조

그래픽 사용자 인터페이스 가 있는 최초의 웹 브라우저 인 Mosaic 은 1993년에 출시되었습니다. 비전문가도 액세스할 수 있는 Mosaic은 초기 World Wide Web 의 급속한 성장에 중요한 역할을 했습니다 . ^[11] Mosaic의 수석 개발자들은 Netscape Corporation을 설립했고 1994년에 더 세련된 브라우저인 Netscape Navigator 를 출시 했습니다. 이것은 빠르게 가장 많이 사용되는 브라우저가 되었습니다. ^{[12] [13]}

이러한 웹의 형성기 동안 웹 페이지 는 정적일 수 밖에 없었으며 페이지가 브라우저에 로드된 후 동적 동작 기능이 부족했습니다. 번창하는 웹 개발 현장에서는 이러한 제한을 없애고자 하는 바람이 있었기 때문에 1995년에 Netscape는 Navigator 에 스크립팅 언어 를 추가하기로 결정했습니다. 그들은 이를 달성하기 위해 두 가지 경로를 추구했습니다. Java 프로그래밍 언어 를 내장하기 위해 Sun Microsystems 와 협력하는 동시에 Scheme 언어 를 내장하기 위해 Brendan Eich 를 고용 했습니다. ^[6]

Netscape 경영진은 곧 Eich가 Java와 유사한 구문을 사용하고 Scheme 또는 기타 현존하는 스크립팅 언어와 덜 유사한 새로운 언어를 고안하는 것이 최선의 선택이라고 결정했습니다. ^{[5] [6]} 1995년 9월 Navigator 베타 의 일부로 처음 출시되었을 때 새로운 언어와 인터프리터 구현이 LiveScript라고 불렸지만 12월 공식 릴리스에서는 이름이 JavaScript로 변경되었습니다. ^{[6] [1] [14]}

JavaScript 이름의 선택은 Java와 직접 관련이 있음을 암시하여 혼란을 야기했습니다. 당시 닷컴 붐 이 시작되었고 Java가 최신 언어였기 때문에 Eich는 JavaScript 이름을 Netscape의 마케팅 전략으로 간주했습니다. ^[15]

Microsoft의 채택

Microsoft 는 1995년에 Internet Explorer 를 선보였 으며 Netscape와의 브라우저 전쟁 으로 이어졌습니다. JavaScript 전선에서 Microsoft 는 Navigator 인터프리터 를 리버스 엔지니어링 하여 JScript 라는 자체 인터프리터를 만들었습니다 . ^[16]

JScript는 CSS 및 HTML 확장에 대한 초기 지원과 함께 1996년에 처음 출시되었습니다 . 이러한 각 구현은 Navigator의 해당 구현과 눈에 띄게 다릅니다. ^{[17] [18]} 이러한 차이로 인해 개발자는 두 브라우저 모두에서 웹 사이트가 제대로 작동하도록 만들기가 어려워져 "넷스케이프에서 가장 잘 보임" 및 "Internet Explorer에서 가장 잘 보임" 로고가 몇 년 동안 널리 사용되었습니다. ^{[17] [19]}

JScript의 등장

1996년 11월, Netscape 는 모든 브라우저 공급업체가 준수할 수 있는 표준 사양의 시작점으로 JavaScript를 Ecma International 에 제출 했습니다. 이로 인해 1997년 6월 최초의 ECMAScript 언어 사양이 공식 출시되었습니다.

표준 프로세스는 1998년 6월 ECMAScript 2, 1999년 12월 ECMAScript 3 출시와 함께 몇 년 동안 계속되었습니다. ECMAScript 4 작업은 2000년에 시작되었습니다. ^[16]

한편 Microsoft 는 브라우저 시장에서 점점 더 지배적인 위치를 차지했습니다. 2000년대 초반까지 Internet Explorer의 시장 점유율은 95%에 달했습니다. 이것은 JScript 가 웹에서 클라이언트측 스크립팅 의 사실상의 표준 이 되었음을 의미합니다 ^.

Microsoft는 처음에 표준 프로세스에 참여하고 JScript 언어로 일부 제안을 구현했지만 결국 Ecma 작업에 대한 공동 작업을 중단했습니다. 따라서 ECMAScript 4는 더럽혀졌습니다.

성장과 표준화

2000년대 초 인터넷 익스플로러 가 우세 했던 시기 에 클라이언트측 스크립팅은 정체되어 있었습니다. 이것은 Netscape의 후속 제품인 Mozilla 가 Firefox 브라우저 를 출시한 2004년에 바뀌기 시작했습니다. Firefox는 많은 사람들에게 호평을 받았으며 Internet Explorer에서 상당한 시장 점유율을 차지했습니다. ^[21]

2005년에 Mozilla는 ECMA International에 합류했으며 E4X( ECMAScript for XML ) 표준 작업을 시작했습니다. 이로 인해 Mozilla 는 ECMAScript 4 초안을 기반으로 하는 ActionScript 3 언어로 E4X를 구현하고 있던 Macromedia (나중에 Adobe Systems 에 인수됨)와 공동으로 작업하게 되었습니다. 목표는 ActionScript 3을 새로운 ECMAScript 4로 표준화하는 것이었습니다. 이를 위해 Adobe Systems는 Tamarin 구현을 오픈 소스 프로젝트로 출시했습니다. 그러나 Tamarin과 ActionScript 3는 기존 클라이언트 측 스크립팅과 너무 달랐고 Microsoft 의 협력 없이 ECMAScript 4는 결실을 맺지 못했습니다.

한편, ECMA 작업과 관련이 없는 오픈 소스 커뮤니티에서 매우 중요한 발전이 일어나고 있었습니다. 2005년 Jesse James Garrett 은 Ajax 라는 용어를 만들어낸 백서를 발표하고 전체 페이지가 필요하지 않고 백그라운드에서 데이터를 로드할 수 있는 웹 애플리케이션 을 만들기 위해 JavaScript가 근간이 되는 일련의 기술을 설명했습니다 . 다시 로드합니다. 이것은 오픈 소스 라이브러리와 이를 중심으로 형성된 커뮤니티가 주도하는 JavaScript의 르네상스 시대를 촉발시켰습니다. jQuery , Prototype , Dojo Toolkit 및 MooTools 를 포함하여 많은 새 라이브러리가 생성되었습니다 .

Google 은 2008년 경쟁사보다 빠른 V8 JavaScript 엔진을 탑재한 Chrome 브라우저를 선보였습니다 . ^{[22] [23]} 핵심 혁신은 JIT(Just -In-Time Compilation )였으며 ^[24] 다른 브라우저 공급업체는 JIT용 엔진을 점검해야 했습니다. ^[25]

2008년 7월, 이 이질적인 당사자들이 오슬로 에서 회의를 위해 모였습니다 . 이로 인해 2009년 초에 모든 관련 작업을 결합하고 언어를 발전시키기로 합의했습니다. 그 결과 2009년 12월에 출시된 ECMAScript 5 표준이 탄생했습니다.

성숙기에 이르다

이 언어에 대한 야심 찬 작업은 몇 년 동안 계속되었으며, 2015년 ECMAScript 6 의 출판으로 공식화되는 광범위한 추가 및 개선 모음으로 절정에 달했습니다 . ^[26]

2009년 Ryan Dahl 이 Node.js 를 만들 면서 웹 브라우저 외부에서 JavaScript 사용이 크게 증가했습니다. Node는 V8 엔진, 이벤트 루프 및 I/O API 를 결합하여 독립형 JavaScript 런타임 시스템을 제공합니다. ^{[27] [28]} 2018년 현재 Node는 수백만 명의 개발자가 사용했으며 [ ^29] npm 은 세계에서 가장 많은 패키지 관리자 모듈을 보유 하고 있습니다. ^[30]

ECMAScript 초안 사양은 현재 GitHub 에서 공개적으로 유지 관리 되며 에디션은 정기적인 연간 스냅샷을 통해 생성됩니다. ^[31] 포괄적인 제안 프로세스를 통해 언어에 대한 잠재적 수정 사항을 심사합니다. ^{[32] [33]} 이제 개발자는 에디션 번호 대신 향후 기능의 상태를 개별적으로 확인합니다. ^[31]

현재 JavaScript 생태계에는 많은 라이브러리 와 프레임워크 , 확립된 프로그래밍 관행, 웹 브라우저 외부에서 JavaScript의 실질적인 사용이 있습니다. 또한 단일 페이지 애플리케이션 및 기타 JavaScript가 많은 웹 사이트 가 증가함에 따라 개발 프로세스를 지원하기 위해 여러 트랜스파일러 가 생성되었습니다. ^[34]

상표

"JavaScript"는 미국 Oracle Corporation 의 상표 입니다 . ^{[35] [36]} 이 상표는 원래 1997년 5월 6일 Sun Microsystems에 발급되었으며 2010년 Sun을 인수하면서 Oracle로 이전되었습니다.

웹사이트 클라이언트측 사용

JavaScript는 웹의 지배적인 클라이언트 측 스크립팅 언어로 모든 웹사이트 의 98% (2022년 중반) 에서 이 목적으로 사용하고 있습니다. ^[37] 스크립트는 HTML 문서 에 포함되거나 포함되며 DOM 과 상호 작용합니다 . 모든 주요 웹 브라우저 에는 사용자 장치에서 코드를 실행하는 JavaScript 엔진 이 내장되어 있습니다.

스크립팅된 동작의 예

• Ajax 또는 WebSocket 을 통해 페이지를 다시 로드하지 않고 새 웹 페이지 콘텐츠를 로드합니다 . 예를 들어 소셜 미디어 사용자 는 현재 페이지를 떠나지 않고도 메시지를 주고받을 수 있습니다.
• 개체 페이드 인/아웃, 크기 조정 및 이동과 같은 웹 페이지 애니메이션.
• 브라우저 게임 하기 .
• 스트리밍 미디어 재생 제어 .
• 팝업 광고 또는 경고 상자 생성 .
• 데이터가 웹 서버 로 전송되기 전에 웹 양식 의 입력 값 유효성 검사 .
• 사용자 행동에 대한 데이터를 로깅한 다음 서버로 전송합니다. 웹사이트 소유자는 이 데이터를 분석 , 광고 추적 및 개인화 에 사용할 수 있습니다 .
• 사용자를 다른 페이지로 리디렉션합니다.
• 저장소 또는 IndexedDB 표준 을 통해 사용자 장치에 데이터를 저장하고 검색합니다 .

라이브러리 및 프레임워크

웹사이트의 80% 이상 이 클라이언트 측 스크립팅을 위해 타사 JavaScript 라이브러리 또는 웹 프레임워크 를 사용합니다. ^[38]

jQuery 는 지금까지 웹사이트의 75% 이상에서 사용되는 가장 인기 있는 라이브러리입니다. Facebook 은 웹 사이트 용 React ^{라이브러리} 를 만들고 나중에 오픈 소스 로 출시했습니다 . Twitter 를 포함한 다른 사이트에서 이제 사용합니다. 마찬가지로 Google 이 YouTube 및 Gmail 을 포함한 웹사이트용으로 만든 Angular 프레임워크 는 이제 다른 사람들이 사용하는 오픈 소스 프로젝트입니다. ^[38]

반대로 "Vanilla JS"라는 용어는 라이브러리나 프레임워크를 사용하지 않고 표준 JavaScript 기능에 전적으로 의존하는 웹 사이트를 위해 만들어졌습니다. ^[39]

기타 용도

JavaScript의 사용은 웹 브라우저 루트 를 넘어 확장되었습니다 . 이제 자바스크립트 엔진 은 서버측 웹사이트 배포와 비브라우저 애플리케이션 모두를 위해 다양한 기타 소프트웨어 시스템에 내장되어 있습니다 .

서버 측 JavaScript 사용을 촉진하려는 초기 시도는 Netscape Enterprise Server 와 Microsoft 의 Internet Information Services ^{[40] [41]} 였지만 작은 틈새 시장이었습니다. ^[42] 서버 측 사용은 결국 2000년대 후반 Node.js 및 기타 접근 방식 의 생성과 함께 증가하기 시작했습니다 . ^[42]

Electron , Cordova , React Native 및 기타 애플리케이션 프레임워크 는 JavaScript로 구현된 동작을 포함하는 많은 애플리케이션을 만드는 데 사용되었습니다. 다른 비브라우저 응용 프로그램에는 PDF 문서 ^[43] 스크립팅을 위한 Adobe Acrobat 지원 과 JavaScript로 작성된 GNOME Shell 확장이 포함됩니다. ^[44]

JavaScript는 최근 Node.js를 활용하여 일부 임베디드 시스템 에 나타나기 시작했습니다. ^{[45] [46] [47]}

특징

다음 기능은 달리 명시적으로 지정되지 않는 한 준수하는 모든 ECMAScript 구현에 공통적입니다.

명령적이고 구조화된

JavaScript는 C 의 구조화된 프로그래밍 구문 (예: 명령문, 루프, 명령문, 루프 등)의 대부분을 지원합니다. 한 가지 부분적인 예외는 범위 지정 입니다 . 원래 JavaScript에는 함수 범위 지정 만 있었습니다 . 블록 범위 지정 은 키워드 및 와 함께 ECMAScript 2015에 추가되었습니다 . C와 마찬가지로 JavaScript는 표현식 과 명령문 을 구분합니다 . C와 구문의 한 가지 차이점은 자동 세미콜론 삽입으로 , 세미콜론(문을 종료함)을 생략할 수 있습니다. ^[48]ifwhileswitchdo whilevarletconst

약하게

JavaScript는 약한 형식 입니다. 즉, 사용된 작업에 따라 특정 형식이 암시적으로 캐스팅됩니다. ^[49]

• 이진 +연산자는 두 피연산자가 숫자가 아닌 한 두 피연산자를 모두 문자열로 캐스팅합니다. 더하기 연산자가 연결 연산자의 두 배가 되기 때문입니다.
• 이진 -연산자는 항상 두 피연산자를 모두 숫자로 변환합니다.
• 두 단항 연산자( +, -)는 항상 피연산자를 숫자로 변환합니다.

값은 다음과 같은 문자열로 캐스트됩니다. ^[49]

• 문자열은 그대로 남습니다.
• 숫자는 문자열 표현으로 변환됩니다.
• 배열에는 요소가 문자열로 변환된 후 쉼표( ,) 로 결합됩니다.
• 다른 객체는 객체 생성자의 이름인 문자열로 변환됩니다 [object Object].Object

문자열로 캐스팅한 다음 문자열을 숫자로 캐스팅하여 값을 숫자로 캐스팅합니다. 이러한 프로세스는 문자열 및 숫자 캐스팅을 위한 프로토타입toString 에서 및 valueOf함수를 각각 정의하여 수정할 수 있습니다 .

규칙의 복잡성이 불일치로 오인될 수 있기 때문에 JavaScript는 이러한 변환을 구현하는 방식에 대해 비판을 받았습니다. ^{예 를 들어, 문자열에 숫자를 더할} 때는 연결하기 전에 숫자를 문자열로 변환하지만, 문자열에서 숫자를 뺄 때는 빼기 전에 문자열을 숫자로 변환한다.

종종 (숫자) 라는 {} + []결과 도 언급됩니다 . 0이것은 오해의 소지가 있습니다. {}빈 객체 대신 빈 코드 블록으로 해석되고 빈 배열은 나머지 단항 +연산자에 의해 숫자로 캐스트됩니다. 식을 괄호 ({} + [])로 묶으면 중괄호는 빈 개체로 해석되고 식의 결과는 "[object Object]"예상한 대로입니다. ^[49]

동적

타자

JavaScript는 대부분의 다른 스크립팅 언어 와 마찬가지로 동적으로 입력 됩니다 . 유형 은 표현식 이 아닌 값 과 연관됩니다 . 예를 들어 처음에 숫자에 바인딩된 변수 는 문자열 에 다시 할당될 수 있습니다 . ^[51] JavaScript는 덕 타이핑 을 포함하여 객체 유형을 테스트하는 다양한 방법을 지원합니다 . ^[52]

런타임 평가

JavaScript에는 eval런타임에 문자열로 제공된 명령문을 실행할 수 있는 기능이 포함되어 있습니다.

객체 지향(프로토타입 기반)

Douglas Crockford 는 JavaScript의 프로토타입 상속을 다음과 같이 설명합니다 .

프로토타입 개체를 만든 다음 새 인스턴스를 만듭니다. 개체는 JavaScript에서 변경 가능하므로 새 인스턴스를 보강하여 새 필드와 메서드를 제공할 수 있습니다. 그런 다음 이들은 더 새로운 개체의 프로토타입 역할을 할 수 있습니다. 유사한 개체를 많이 만들기 위해 클래스가 필요하지 않습니다. 개체는 개체에서 상속됩니다. 그보다 더 객체지향적인 것이 있을까요? ^[53]

JavaScript에서 객체 는 프로토타입으로 확장된 연관 배열 입니다(아래 참조). 각 키는 개체 속성 에 대한 이름을 제공하며 이러한 이름을 지정하는 두 가지 구문적 방법이 있습니다. 점 표기법( obj.x = 10)과 대괄호 표기법( obj['x'] = 10)입니다. 속성은 런타임에 추가, 리바인드 또는 삭제될 수 있습니다. 개체의 대부분의 속성 (및 개체의 프로토타입 상속 체인에 속하는 모든 속성)은 for...in루프를 사용하여 열거할 수 있습니다.

프로토타입

JavaScript는 다른 많은 객체 지향 언어 가 상속 을 위해 클래스 를 사용하는 프로토타입 을 사용 합니다. ^JavaScript 의 프로토타입을 사용하여 많은 클래스 기반 기능을 시뮬레이션하는 것이 가능합니다. ^[55]

객체 생성자로서의 기능

함수는 일반적인 역할과 함께 개체 생성자 역할도 합니다. 함수 호출 앞에 new 를 붙이면 생성자의 속성과 메서드(프로토타입의 속성 포함)를 상속하는 프로토타입의 인스턴스가 생성됩니다 Object. ^[56] ECMAScript 5는 프로토타입 Object.create에서 자동으로 상속하지 않고 인스턴스를 명시적으로 생성할 수 있는 방법을 제공합니다 Object(이전 환경에서는 프로토타입을 에 할당할 수 null있음). ^생성자 의 prototype속성은 새 개체의 내부 프로토타입에 사용되는 개체를 결정합니다. 생성자로 사용되는 함수의 프로토타입을 수정하여 새로운 메서드를 추가할 수 있습니다. Array또는와 같은 JavaScript의 내장 생성자Object, 수정할 수 있는 프로토타입도 있습니다. 프로토타입 을 수정할 수는 있지만 JavaScript의 대부분의 개체는 프로토타입에서 메서드와 속성을 상속 하고 프로토타입이 수정될 것으로 예상하지 않을 수 Object있기 때문에 일반적으로 나쁜 습관으로 간주됩니다 . ^[58]Object

방법으로서의 기능

많은 객체 지향 언어와 달리 함수 정의와 메서드 정의 사이에는 구분이 없습니다. 오히려 함수 호출 중에 구별이 발생합니다. 함수가 개체의 메서드로 호출될 때 함수의 로컬 this 키워드는 해당 호출에 대해 해당 개체에 바인딩됩니다.

기능적

JavaScript 함수 는 일류입니다 . 함수는 객체로 간주됩니다. ^{이와 같이}.call() 함수는 및 와 같은 속성 및 메서드를 가질 수 있습니다 .bind(). ^중첩 함수는 다른 함수 내에 정의된 함수 이다 . 외부 함수가 호출될 때마다 생성됩니다. 또한 각 중첩 함수는 어휘 폐쇄 를 형성합니다. 외부 함수 의 어휘 범위 (상수, 지역 변수 또는 인수 값 포함)는 외부 함수 실행이 끝난 후에도 각 내부 함수 개체의 내부 상태의 일부가 됩니다. . ^[61] JavaScript도 지원합니다 .익명 함수 .

대표

JavaScript는 암시적 및 명시적 위임 을 지원합니다 .

역할 기능(특성 및 믹스인)

JavaScript는 기본적으로 Traits ^{[63] [64]} 및 Mixins 와 같은 Role ^[62] 패턴 의 다양한 기능 기반 구현을 지원합니다 . ^{이러한 함수는 본문} 내에서 키워드에 바인딩된 적어도 하나의 메서드에 의해 추가 동작을 정의합니다 . 그런 다음 역할 은 프로토타입 체인을 통해 공유되지 않는 추가 동작을 제공해야 하는 객체를 통해 명시적으로 위임되어야 합니다 .thisfunctioncallapply

개체 구성 및 상속

명시적 함수 기반 위임이 JavaScript에서 구성 을 다루는 반면, 암시적 위임은 예를 들어 객체와 관련이 있을 수 있지만 개체가 직접 소유하지 않는 메서드를 찾기 위해 프로토타입 체인을 탐색할 때마다 이미 발생합니다. 메서드가 발견되면 이 개체의 컨텍스트 내에서 호출됩니다. 따라서 JavaScript의 상속 은 생성자 함수의 프로토타입 속성에 바인딩된 위임 자동화에 의해 처리됩니다.

기타

JavaScript는 인덱스 가 없는 언어입니다.

런타임 환경

JavaScript는 일반적으로 런타임 환경(예: 웹 브라우저 )에 의존하여 스크립트가 환경(예: 웹 페이지 DOM ) 과 상호 작용할 수 있는 개체 및 메서드를 제공합니다 . 이러한 환경은 단일 스레드 입니다. JavaScript는 또한 런타임 환경에 의존하여 스크립트(예: HTML <script> 요소)를 포함/가져오는 기능을 제공합니다. 이것은 그 자체로 언어 기능은 아니지만 대부분의 JavaScript 구현에서 일반적입니다. JavaScript 는 대기열 의 메시지 를 한 번에 하나씩 처리합니다. JavaScript는 각각의 새 메시지와 연결된 함수 를 호출 하여 함수의 인수 로 호출 스택 프레임을 생성합니다.및 지역 변수 . 호출 스택은 함수의 필요에 따라 줄어들고 커집니다. 함수 완료 시 호출 스택이 비어 있으면 JavaScript는 대기열의 다음 메시지로 진행합니다. 이것은 다음 메시지가 고려되기 전에 각 메시지가 완전히 처리되기 때문에 "완료까지 실행"으로 설명되는 이벤트 루프 라고 합니다. 그러나 언어의 동시성 모델 은 이벤트 루프를 비차단 으로 설명합니다 . 프로그램 입력/출력 은 이벤트 및 콜백 함수 를 사용하여 수행됩니다 . 이는 예를 들어 데이터베이스 쿼리가 정보를 반환할 때까지 기다리는 동안 JavaScript가 마우스 클릭을 처리할 수 있음을 의미합니다. ^[66]

가변 함수

무한한 수의 매개변수를 함수에 전달할 수 있습니다. 함수는 형식 매개변수 와 로컬 arguments개체를 통해 액세스할 수 있습니다. 이 방법을 사용하여 Variadic 함수 를 만들 수도 있습니다 bind.

배열 및 객체 리터럴

많은 스크립팅 언어와 마찬가지로 배열과 개체( 다른 언어의 연관 배열 )는 각각 간결한 바로 가기 구문으로 만들 수 있습니다. 실제로 이러한 리터럴 은 JSON 데이터 형식 의 기초를 형성 합니다.

정규식

JavaScript는 또한 Perl 과 유사한 방식으로 정규식 을 지원합니다. Perl 은 내장 문자열 함수보다 더 정교한 텍스트 조작을 위한 간결하고 강력한 구문을 제공합니다. ^[67]

약속과 비동기/대기

JavaScript는 비동기 작업을 처리하기 위해 약속 및 Async/await 를 지원합니다. 내장된 Promise 객체는 약속을 처리하고 핸들러를 비동기 작업의 최종 결과와 연결하는 기능을 제공합니다. 최근 JavaScript 사양에 결합자 메서드가 도입되어 개발자가 여러 JavaScript 약속을 결합하고 다양한 시나리오를 기반으로 작업을 수행할 수 있습니다. 도입된 메서드는 Promise.race, Promise.all, Promise.allSettled 및 Promise.any입니다. Async/await를 사용하면 비동기식 비차단 기능을 일반 동기 기능과 유사한 방식으로 구성할 수 있습니다. 비동기식 비차단 코드는 최소한의 오버헤드로 기존의 동기식 차단 코드와 유사한 구조로 작성될 수 있습니다.

공급업체별 확장

역사적으로 일부 JavaScript 엔진 은 다음과 같은 비표준 기능을 지원했습니다.

• 조건절 catch(예: Java)
• 배열 내포 및 생성기 표현식(예: Python)
• 간결한 함수 표현식( function(args) expr; 이 실험적 구문은 화살표 함수보다 앞서 있음)
• E4X( ECMAScript for XML ), ECMAScript에 기본 XML 지원을 추가하는 확장 기능(버전 21 이후 Firefox에서 지원되지 않음 ^[68] )

구문

간단한 예

JavaScript의 변수var 는 , ^[69] let^[70] 또는 const^[71] 키워드를 사용하여 정의할 수 있습니다. 키워드 없이 정의된 변수는 전역 범위에서 정의됩니다.

// `x`라는 함수 범위 변수를 선언하고 암묵적으로 
// 특수 값 `undefined`를 할당합니다. 값이 없는 변수는 
// 자동으로 정의되지 않음으로 설정됩니다. 
// var는 일반적으로 나쁜 습관으로 간주되며 let과 const가 일반적으로 선호됩니다. 
변수  x ;

// 변수는 `정의되지 않음`과 같이 수동으로 설정할 수 있습니다 . 
let  x2  =  undefined ;

// `y`라는 블록 범위 변수를 선언하고 암묵적으로 
`undefined`로 설정합니다. `let` 키워드는 ECMAScript 2015에서 도입되었습니다. 
let  y ;

// 'z'라는 블록 범위의 재할당 불가능한 변수를 선언하고 
// 문자열 리터럴로 설정합니다. `const` 키워드는 ECMAScript 2015에서도 도입되었으며 
// 명시적으로 할당되어야 합니다.


// 키워드 `const`는 상수를 의미하므로 값이 `constant`이므로 // 
변수를 재할당할 수 없습니다 . const  z  =  "이 값은 재할당할 수 없습니다!" ;

// 전역 범위 변수를 선언하고 3을 할당합니다. 이것은 일반적으로 
// 나쁜 습관으로 간주되며 엄격 모드가 켜져 있으면 작동하지 않습니다. 
t  =  3 ;

// `myNumber`라는 변수를 선언하고 여기에 숫자 리터럴(값 
// `2`)을 할당합니다. 
myNumber = 2 로 하자  ;  

// `myNumber`를 재할당하여 문자열 리터럴(값 `"foo"`)로 설정합니다. 
// JavaScript는 동적으로 유형이 지정되는 언어이므로 이는 합법적입니다. 
myNumber  =  "푸" ;

위 예의 주석 에 유의하십시오 . 모두 앞에 두 개의 슬래시 가 있습니다.

JavaScript 에는 내장된 입력/출력 기능이 없으며 대신 런타임 환경에서 제공됩니다. 에디션 5.1의 ECMAScript 사양에는 "이 사양에는 외부 데이터 입력 또는 계산 결과 출력에 대한 조항이 없다"고 언급되어 있습니다. ^그러나 대부분의 런타임 환경에는 console출력을 인쇄하는 데 사용할 수 있는 개체가 있습니다. ^다음 은 콘솔 개체가 있는 런타임 환경에서 JavaScript로 된 최소한의 Hello World 프로그램 입니다.

콘솔 . log ( "Hello, World!" );

HTML 문서에서 다음과 같은 프로그램이 출력에 필요합니다.

// 텍스트 노드는 "write" 메소드를 사용하여 만들 수 있습니다. 
// 문서가 완전히 로드되면 문서를 덮어쓸 수 있으므로 눈살을 찌푸리게 합니다. 
문서 . 쓰기 ( 'foo' );

// 요소도 만들 수 있습니다. 먼저 DOM에서 생성해야 합니다. 
const  myElem  =  문서 . createElement ( '스팬' );

// 클래스 및 id와 같은 속성도 
myElem 으로 설정할 수 있습니다 . 클래스리스트 . 추가 ( 'foo' ); 
myElem . id  =  '바' ;

// 이렇게 설정하면 태그가 다음과 같이 표시됩니다. `<span class="foo" id="bar" data-attr="baz"></span>` 
myElem . setAttribute ( 'data-attr' ,  'baz' );  // `myElem.dataset.attr = 'baz'`로 쓸 수도 있습니다.


// 마지막으로 HTML 문서 의 <body>에 하위 요소로 추가합니다 . 몸 . appendChild ( myElem );


// 요소는 하나의 요소에 대해 querySelector를 사용하거나 forEach 문서 로 반복할 수 있는 여러 요소에 대해 querySelectorAll을 사용하여 명령적으로 가져올 수 있습니다 . querySelector ( '.class' );  // "class" 클래스 
문서 가 있는 첫 번째 요소를 선택합니다 . querySelector ( '#id' );  // `id`가 "id"인 첫 번째 요소를 선택 
합니다 . querySelector ( '[데이터-기타]' );  // "data-other" 속성이 있는 첫 번째 요소를 선택 
합니다 . querySelectorAll ( '.multiple' ); // "다중" 클래스가 있는 모든 요소의 배열을 반환합니다.

자연수 의 계승 을 계산 하는 간단한 재귀 함수 :

function  factorial ( n )  { 
    // 합법성에 대한 인수를 확인합니다. 계승은 양의 정수에 대해 정의됩니다. 
    if  ( isNaN ( n ))  { 
        콘솔 . error ( "숫자가 아닌 인수는 허용되지 않습니다." ); 
        반환  NaN ;  // 특수 값: Not a Number 
    } 
    if  ( n  ===  0 ) 
        return  1 ;  // 0! = 1 
    if  ( n  <  0 ) 
        정의되지 않은 반환  ; // 음수의 계승은 정의되지 않습니다. 
    if  ( n  %  1 )  { 
        콘솔 . warn ( ` ${ n } 은 가장 가까운 정수로 반올림됩니다. 정수가 아닌 경우 대신 감마 함수를 사용하는 것이 좋습니다.` ); 
        n  =  수학 . 라운드 ( n ); 
    } 
    // 위의 검사는 재귀에서 반복할 필요가 없으므로 실제 재귀 부분은 아래에서 별도로 정의합니다.

    // 다음 줄은 팩토리얼을 재귀적으로 계산하는 함수 표현식입니다. ES6에 도입된 화살표 구문을 사용합니다. 
    const  재귀적 으로Compute  =  a  =>  a  >  1  ?  a  *  재귀적 으로Compute ( a  -  1 )  :  1 ;  // 삼항 연산자 `?`의 사용에 유의하십시오. 
    재귀적 으로 반환 Compute  ( n ); }


계승 ( 3 );  // 6 반환

익명 함수 (또는 람다):

const  카운터  =  함수 ()  { 
    let  count  =  0 ; 
    리턴  함수 ()  { 
        리턴  ++ 카운트 ; 
    } 
};

const  x  =  카운터 (); 
엑스 ();  // 1 
x 반환 ();  // 2 
x 반환 ();  // 3을 반환합니다.

이 예제는 JavaScript에서 함수 클로저 가 로컬이 아닌 변수를 참조로 캡처함을 보여줍니다.

화살표 함수는 6판 - ECMAScript 2015 에서 처음 소개되었습니다 . JavaScript에서 함수를 작성하기 위한 구문을 단축합니다. 화살표 함수는 익명이므로 괄호로 둘러싸서 즉시 실행되지 않는 한 생성 후 호출하려면 화살표 함수를 참조하는 변수가 필요합니다.

화살표 기능의 예:

// 화살표 함수를 사용하면 `function` 키워드를 생략할 수 있습니다. 
// 여기서 `long_example`은 익명 함수 값을 가리킵니다. 
const  long_example  =  ( 입력1 ,  입력2 )  =>  { 
    콘솔 . log ( "Hello, World!" ); 
    const  출력  =  입력1  +  입력2 ;

    반환  출력 ; 
};

// 중괄호가 없으면 화살표 함수는 단순히 다음 식을 반환합니다. 
// 그래서 여기서는 (input1 + input2)가 됩니다. 
const  short_example  =  ( input1 ,  input2 )  =>  input1  +  input2 ;

long_example ( 2,3 )  ; _ // "Hello, World!"를 출력합니다. 5 short_example ( 2 , 5 ) 을 반환합니다 . // 7을 반환합니다. 
   

// 화살표 함수에 매개변수가 하나만 있는 경우 괄호를 제거할 수 있습니다. 
const  no_parentheses  =  입력  =>  입력  +  2 ;

no_괄호 ( 3 );  // 5를 반환합니다.

// 화살표 함수는 다른 함수 정의와 마찬가지로 생성된 그대로의 문에서 실행할 수 있습니다. 
// 이는 전역 범위를 채우는 것을 방지하기 위해 라이브러리를 작성할 때와 클로저에 유용합니다. 
let  three  =  (( a ,  b )  =>  a  +  b )  ( 1 ,  2 );

const  generate_multiplier_function  =  a  =>  ( b  =>  isNaN ( b )  ||  ! b  ?  a  :  a *= b ); 
const  five_multiples  =  generate_multiplier_function ( 5 );  // 제공된 인수는 표현식을 "시드"하고 a에 의해 유지됩니다. 
5_multiples ( 1 );  // 5개 반환 
five_multiples ( 3 );  // 15개 반환 
five_multiples ( 4 );  // 60 반환

JavaScript에서 객체 는 클래스 의 인스턴스 로 생성될 수 있습니다 .

개체 클래스 예:

클래스  볼  {

   생성자 ( 반지름 )  { 
      이 . 반지름  =  반지름 ; 
      이 . 면적  =  수학 . PI  *  (  반지름  **  2  ); 
   }

   // 클래스(및 객체)는 메서드 
   show ()  { 
      console 이라는 함수를 포함할 수 있습니다 . 로그 ( this . radius ); 
   } 
};

const  myBall  =  새  공 ( 5 );  // 반지름이 5인 공 객체의 새 인스턴스를 생성합니다 . 
myBall . 반경 ++ ;  // 개체 속성은 일반적으로 
myBall 외부에서 수정할 수 있습니다 . 표시 ();    // 상속된 "show" 함수를 사용하면 "6"이 기록됩니다.

JavaScript에서 개체 는 함수에서 직접 인스턴스화할 수 있습니다.

개체 기능 예:

함수  볼 ( 반지름 )  {

   const  영역  =  수학 . PI  *  (  반지름  **  2  ); 
   const  obj  =  {  반경 ,  면적  };

   // 객체는 변경 가능하며 함수는 속성으로 추가될 수 있습니다. 
   .obj . 표시  =  ()  =>  콘솔 . 로그 ( obj . 반경 ); 
   객체 반환  ; };


const  myBall  =  공 ( 5 );  // 반지름이 5인 새 공 객체를 생성합니다. "new" 키워드가 필요하지 않습니다. 
마이볼 . 반경 ++ ;  // 인스턴스 속성을 수정할 수 있습니다. 
마이볼 . 표시 ();    // "show" 함수를 사용하면 새 인스턴스 값인 "6"이 기록됩니다.

Variadic 함수 데모( arguments특수 변수 임): ^[74]

함수  합계 ()  { 
    let  x  =  0 ;

    for  ( let  i  =  0 ;  i  <  인수 . 길이 ;  ++ i ) 
        x  +=  인수 [ i ];

    반환  x ; 
}

합 ( 1 ,  2 );  // 
합계 3개 반환 ( 1 ,  2 ,  3 );  // 6 반환

// ES6 기준으로 나머지 연산자를 사용합니다. 
함수  합계 (... 인수 )  { 
    반환  인수 . 감소 (( a , b )  =>  a + b ); 
}

합 ( 1 ,  2 );  // 
합계 3개 반환 ( 1 ,  2 ,  3 );  // 6 반환

즉시 호출되는 함수 표현식 은 종종 클로저를 생성하는 데 사용됩니다. 클로저는 네임스페이스에서 속성과 메서드를 수집하고 일부를 비공개로 만들 수 있습니다.

let  counter  =  ( function ()  { 
    let  i  =  0 ;  // 개인 속성

    return  {    // 공용 메소드 
        get :  function ()  { 
            alert ( i ); 
        }, 
        설정 :  함수 ( 값 )  { 
            i  =  값 ; 
        }, 
        증분 :  function ()  { 
            경고 ( ++ i ); 
        } 
    }; 
})();  // 모듈

카운터 . 얻다 ();  // 0 카운터 를 반환 
합니다. 세트 ( 6 ); 카운터 . 증분 (); // 7 카운터 를 반환 합니다. 증분 (); // 8 반환
 
 

제너레이터 객체(제너레이터 함수 형식)는 내부 컨텍스트(상태 저장)를 유지하면서 호출, 종료 및 재진입할 수 있는 함수를 제공합니다. ^[75]

함수 *  rawCounter ()  { 
    수율  1 ; 
    수율  2 ; 
}

function *  dynamicCounter ()  { 
    let  count  =  0 ; 
    while ( true )  { 
        // 대부분의 경우 while true 루프를 사용하지 않는 것이 좋습니다. 
        수율  ++ 카운트 ; 
    } 
}

// 인스턴스 
const  counter1  =  rawCounter (); 
const  counter2  =  dynamicCounter ();

// 구현 
counter1 . 다음 ();  // {값: 1, 완료: 거짓} 
카운터 1 . 다음 ();  // {값: 2, 완료: 거짓} 
카운터1 . 다음 ();  // {값: 정의되지 않음, 완료: 참}

카운터2 . 다음 ();  // {값: 1, 완료: 거짓} 
카운터2 . 다음 ();  // {값: 2, 완료: 거짓} 
카운터 2 . 다음 ();  // {value: 3, done: false} 
// ...무한히

JavaScript는 모듈에서 내보내고 가져올 수 있습니다: ^[76]

내보내기 예:

/* mymodule.js */ 
// 이 함수는 내보내지지 않으므로 비공개로 유지됩니다. 
let  sum  =  ( a ,  b )  =>  { 
    return  a  +  b ; 
}

// 내보내기 변수 
export  let  name  =  'Alice' ; 
수출  허용  기간  =  23 ;

// 명명된 함수 
내보내기 export  function  add ( num1 ,  num2 )  { 
    return  num1  +  num2 ; 
}

// 내보내기 클래스 
내보내기  클래스  Multiplication  { 
    생성자 ( num1 ,  num2 )  { 
        this . 숫자  1 =  숫자 1 ; 
        이 . 숫자  2 =  숫자 2 ; 
    }

    추가 ()  { 
        반환  합계 ( this . num1 ,  this . num2 ); 
    } 
}

가져오기 예:

// 하나의 속성 
가져오기 import  {  add  }  from  './mymodule.js' ; 
콘솔 . 로그 ( 추가 ( 1,2 )  ) ; 
//> 3

// 여러 속성 
가져오기 import  {  name ,  age  }  from  './mymodule.js' ; 
콘솔 . 로그 ( 이름 ,  나이 ); 
//> "앨리스", 23

// 모듈에서 모든 속성 가져 
오기 import  *  from  './module.js' 
console . 로그 ( 이름 ,  나이 ); 
//> "앨리스", 23 
콘솔 . 로그 ( 추가 ( 1,2 ) ) ; 
//> 3

고급 예제

이 샘플 코드는 다양한 JavaScript 기능을 표시합니다.

/* 두 숫자의 최소 공배수(LCM) 찾기 */ 
function  LCMCalculator ( x ,  y )  {  // 생성자 함수 
    if  ( isNaN ( x * y ))  throw  new  TypeError ( "숫자가 아닌 인수는 허용되지 않습니다." ) ; 
    const  checkInt  =  function ( x )  {  // 내부 함수 
        if  ( x  %  1  !==  0 ) 
            throw  new  TypeError ( x +  "정수가 아닙니다" );

        반환  x ; 
    };

    이 . a  =  checkInt ( x ) 
    // 세미콜론 ^^^^은 선택 사항이며 줄 바꿈이면 충분 
    합니다 . b  =  체크인트 ( y ); 
} 
// 생성자에 의해 생성된 객체 인스턴스의 프로토타입은 
// 해당 생성자의 "prototype" 속성입니다. 
LCMC계산기 . prototype  =  {  // 객체 리터럴 
    생성자 :  LCMCalculator ,  // 프로토타입을 재할당할 때 생성자 속성을 적절하게 설정 
    gcd :  function ()  { // 최대 공약수를 계산하는 방법 
        // 유클리드 알고리즘: 
        let  a  =  Math . abs ( this . a ),  b  =  Math . abs ( 이 . b ),  t ;

        if  ( a  <  b )  { 
            // 변수 교환 
            // t = b; 비 = 에이; a = t; 
            [ a ,  b ]  =  [ b ,  a ];  // 구조 분해 할당을 사용하여 교체(ES6) 
        }

        동안  ( b  !==  0 )  { 
            t  =  b ; 
            b  =  a  %  b ; 
            a  =  t ; 
        }

        // GCD를 한 번만 계산하면 되므로 이 방법을 "재정의"합니다. 
        // (실제로는 재정의가 아닙니다. 인스턴스 자체에 정의되어 
        있으므로 // this.gcd는 LCMCalculator.prototype.gcd 대신 이 "재정의"를 참조합니다. 
        // LCMCalculator 개체 구성원이 "a" 및/또는 "b"는 나중에 변경됩니다.) 
        // 또한 'gcd' === "gcd", this['gcd'] === this.gcd 
        this [ 'gcd' ]  =  function ()  { 
            반환  ; _ };
        

        반환  ; _ },
    

    // 개체 속성 이름은 큰따옴표(") 또는 작은따옴표(')로 구분된 문자열로 지정할 수 있습니다. 
    "lcm" :  function ()  { 
        // 변수 이름은 개체 속성과 충돌하지 않습니다. 예를 들어 |lcm|은 | this.lcm|. 
        // FP 정밀도 문제를 피하기 위해 |this.a*this.b|를 사용 
        하지 않음 let  lcm  =  this .a / this .gcd ( ) * this .b ;    

        // lcm을 한 번만 계산하면 되므로 이 방법을 "재정의"합니다. 
        이 . lcm  =  함수 ()  { 
            lcm 반환  ; };
        

        반환  lcm ; 
    },

    // 메서드는 es6 구문을 사용하여 선언할 수도 있습니다. 
    toString ()  { 
        // es6 템플릿 리터럴과 (+) 연산자를 모두 사용하여 값을 연결합니다 . 
        return  `LCMCalculator: a = ${ this . } , b = ` + 이것 . b ; } };  
    


// 일반 출력 함수를 정의합니다. 이 구현은 웹 브라우저에서만 작동합니다 . 
function  output ( x )  { 
    document . 몸 . appendChild ( 문서 . createTextNode ( x )); 
    문서 . 몸 . appendChild ( 문서 . createElement ( 'br' )); 
}

// 참고: Array의 map() 및 forEach()는 JavaScript 1.6에 정의되어 있습니다. 
// 여기에서는 JavaScript 고유의 기능적 특성을 보여주기 위해 사용됩니다. 
[ 
    [ 25 ,  55 ], 
    [ 21 ,  56 ], 
    [ 22 ,  58 ], 
    [ 28 ,  56 ] 
]. map ( function ( pair )  {  // 배열 리터럴 + 매핑 함수 는 
    새 LCMCalculator를 반환 합니다  ( pair [ 0 ], pair [ 1 ]); }).  
sort (( a ,  b )  =>  a . lcm ()  -  b . lcm ())  // 이 비교 함수로 정렬; =>는 "화살표 함수"라고 하는 함수의 약식 형식입니다 
    . forEach ( 프린트 결과 );

함수  printResult ( obj )  { 
    출력 ( obj  +  ", gcd = "  +  obj . gcd ()  +  ", lcm = "  +  obj . lcm ()); 
}

브라우저 창에 다음 출력이 표시되어야 합니다.

LCMC 계산기: a = 28, b = 56, gcd = 28, lcm = 56
LCMC 계산기: a = 21, b = 56, gcd = 7, lcm = 168
LCMC 계산기: a = 25, b = 55, gcd = 5, lcm = 275
LCMC 계산기: a = 22, b = 58, gcd = 2, lcm = 638

보안

JavaScript 및 DOM 은 악의적인 작성자가 웹을 통해 클라이언트 컴퓨터에서 실행할 스크립트를 전달할 가능성을 제공합니다. 브라우저 작성자는 두 가지 제한 사항을 사용하여 이 위험을 최소화합니다. 첫째, 스크립트는 파일 생성과 같은 범용 프로그래밍 작업이 아닌 웹 관련 작업만 수행할 수 있는 샌드박스 에서 실행됩니다. 둘째, 스크립트는 동일 출처 정책 에 의해 제한됩니다. 한 웹 사이트의 스크립트는 다른 사이트로 전송된 사용자 이름, 암호 또는 쿠키와 같은 정보에 액세스할 수 없습니다. 대부분의 JavaScript 관련 보안 버그는 동일한 출처 정책 또는 샌드박스 위반입니다.

일반 JavaScript의 하위 집합인 ADsafe, Secure ECMAScript(SES)는 특히 제3자가 만든 코드(예: 광고)에서 더 높은 수준의 보안을 제공합니다. ^{[77] [78]} Closure Toolkit은 타사 JavaScript 및 HTML을 안전하게 포함하고 격리하기 위한 또 다른 프로젝트입니다. ^[79]

콘텐츠 보안 정책 은 신뢰할 수 있는 코드만 웹 페이지에서 실행되도록 하기 위해 의도된 주요 방법입니다.

교차 사이트 취약점

일반적인 JavaScript 관련 보안 문제는 XSS( 교차 사이트 스크립팅 )로 동일 출처 정책 위반입니다 . XSS 취약점은 공격자가 온라인 뱅킹 웹 사이트와 같은 대상 웹 사이트가 피해자에게 제공되는 웹 페이지에 악성 스크립트를 포함하도록 만들 수 있을 때 발생합니다. 이 예제의 스크립트는 피해자의 권한으로 은행 애플리케이션에 액세스하여 잠재적으로 비밀 정보를 공개하거나 피해자의 승인 없이 돈을 이체할 수 있습니다. XSS 취약점에 대한 해결책은 신뢰할 수 없는 데이터를 표시할 때마다 HTML 이스케이프 를 사용하는 것입니다.

일부 브라우저에는 공격자가 악성 스크립트가 포함된 URL을 제공하는 반영된 XSS 공격에 대한 부분적인 보호 기능이 포함되어 있습니다. 그러나 이러한 브라우저의 사용자도 악성 코드가 데이터베이스에 저장되는 공격과 같은 다른 XSS 공격에 취약합니다. 서버측 웹 애플리케이션의 올바른 설계만이 XSS를 완전히 방지할 수 있습니다.

XSS 취약점은 브라우저 작성자의 구현 실수로 인해 발생할 수도 있습니다. ^[80]

또 다른 교차 사이트 취약점은 교차 사이트 요청 위조 (CSRF)입니다. CSRF에서 공격자 사이트의 코드는 피해자의 브라우저를 속여 사용자가 대상 사이트에서 의도하지 않은 작업을 수행하도록 합니다(예: 은행에서 송금). 대상 사이트가 요청 인증을 위해 쿠키에만 의존하는 경우 공격자 사이트의 코드에서 시작된 요청은 시작 사용자의 동일한 유효한 로그인 자격 증명을 전달할 수 있습니다. 일반적으로 CSRF에 대한 솔루션은 지속적인 영향을 미칠 수 있는 모든 요청을 인증하기 위해 쿠키뿐만 아니라 숨겨진 양식 필드에 인증 값을 요구하는 것입니다. HTTP 참조자 헤더를 확인하는 것도 도움이 될 수 있습니다.

"자바스크립트 하이재킹"은 공격자 사이트의 태그가 JSON 또는 JavaScript <script>와 같은 개인 정보를 반환하는 피해자 사이트의 페이지를 악용하는 CSRF 공격 유형입니다. 가능한 솔루션은 다음과 같습니다.

• 개인 정보를 반환하는 모든 응답에 대해 POST 및 GET 매개 변수 에 인증 토큰이 필요합니다 .

클라이언트에 대한 잘못된 신뢰

클라이언트-서버 응용 프로그램 개발자는 신뢰할 수 없는 클라이언트가 공격자의 제어를 받을 수 있음을 인식해야 합니다. 코드에 포함된 모든 비밀이 결정된 적에 의해 추출될 수 있기 때문에 응용 프로그램 작성자는 JavaScript 코드가 의도한 대로(또는 전혀) 실행될 것이라고 가정할 수 없습니다. 몇 가지 의미는 다음과 같습니다.

• 원시 소스 코드를 클라이언트로 보내야 하므로 웹 사이트 작성자는 JavaScript가 작동하는 방식을 완벽하게 숨길 수 없습니다. 코드는 난독화될 수 있지만 난독 화는 리버스 엔지니어링될 수 있습니다.
• JavaScript 양식 유효성 검사는 보안이 아닌 사용자 편의만 제공합니다. 사이트에서 사용자가 서비스 약관에 동의했는지 확인하거나 숫자만 포함해야 하는 필드에서 유효하지 않은 문자를 필터링하는 경우 클라이언트뿐만 아니라 서버에서도 이를 수행해야 합니다.
• 스크립트를 선택적으로 비활성화할 수 있으므로 JavaScript를 사용하여 이미지를 마우스 오른쪽 버튼으로 클릭하여 저장하는 것과 같은 작업을 방지할 수 없습니다. ^[81]
• 암호와 같은 민감한 정보를 JavaScript에 포함시키는 것은 공격자가 추출할 수 있기 때문에 매우 나쁜 습관으로 간주됩니다. ^[82]

개발자에 대한 잘못된 신뢰

npm 및 Bower 와 같은 패키지 관리 시스템 은 JavaScript 개발자에게 인기가 있습니다. 이러한 시스템을 통해 개발자는 다른 개발자의 프로그램 라이브러리에 대한 프로그램의 종속성을 쉽게 관리할 수 있습니다. 개발자는 라이브러리 관리자가 라이브러리를 안전하게 최신 상태로 유지할 것이라고 믿지만 항상 그런 것은 아닙니다. 이 맹목적인 신뢰 때문에 취약점이 나타났습니다. 의존 라이브러리에는 라이브러리에 의존하는 모든 프로그램에 버그나 취약성이 나타나게 하는 새로운 릴리스가 있을 수 있습니다. 역으로, 라이브러리는 야생에서 알려진 취약점으로 패치되지 않을 수 있습니다. 133,000개의 웹사이트 샘플을 조사한 연구에서 연구원들은 웹사이트의 37%에 적어도 하나의 알려진 취약점이 있는 라이브러리가 포함되어 있음을 발견했습니다. ^[83]"각 웹사이트에서 사용되는 가장 오래된 라이브러리 버전과 해당 라이브러리의 최신 버전 사이의 평균 지연 시간은 ALEXA에서 1,177일이며 여전히 사용 중인 일부 라이브러리의 개발은 몇 년 전에 중단되었습니다." ^또 다른 가능성은 라이브러리의 관리자가 라이브러리를 완전히 제거할 수 있다는 것입니다. 이것은 2016년 3월 Azer Koçulu가 npm에서 저장소를 제거했을 때 발생했습니다. 이로 인해 그의 라이브러리에 의존하는 수만 개의 프로그램과 웹 사이트가 중단되었습니다. ^{[84] [85]}

브라우저 및 플러그인 코딩 오류

JavaScript는 광범위한 브라우저 기능에 대한 인터페이스를 제공하며 그 중 일부는 버퍼 오버플 로와 같은 결함이 있을 수 있습니다 . 이러한 결함으로 인해 공격자는 사용자 시스템에서 원하는 코드를 실행하는 스크립트를 작성할 수 있습니다. 이 코드는 결코 다른 JavaScript 애플리케이션으로 제한되지 않습니다. 예를 들어, 버퍼 오버런 악용을 통해 공격자는 수퍼유저 권한으로 운영 체제의 API 에 액세스할 수 있습니다.

이러한 결함은 Firefox, ^[86] Internet Explorer, ^[87] 및 Safari를 포함한 주요 브라우저에 영향을 미쳤습니다. ^[88]

비디오 플레이어, Adobe Flash 및 Microsoft Internet Explorer에서 기본적으로 활성화되는 광범위한 ActiveX 컨트롤 과 같은 플러그인 에도 JavaScript를 통해 악용될 수 있는 결함이 있을 수 있습니다(이러한 결함은 과거에 악용되었습니다). ^{[89] [90]}

Windows Vista에서 Microsoft는 제한된 권한으로 Internet Explorer 프로세스를 실행하여 버퍼 오버플로와 같은 버그 위험을 억제하려고 시도했습니다. ^[91] Google Chrome 은 유사하게 페이지 렌더러를 자체 " 샌드박스 "로 제한합니다.

샌드박스 구현 오류

웹 브라우저는 예를 들어 파일을 생성하거나 삭제하는 데 필요한 권한으로 샌드박스 외부에서 JavaScript를 실행할 수 있습니다. 이러한 권한은 웹의 코드에 부여하기 위한 것이 아닙니다.

웹에서 JavaScript에 대한 권한을 잘못 부여하는 것은 Internet Explorer ^[92] 와 Firefox 모두에서 취약성에 영향을 미쳤습니다. ^[93] Windows XP 서비스 팩 2에서 Microsoft는 Internet Explorer에서 JScript의 권한을 강등했습니다. ^[94]

Microsoft Windows 에서는 컴퓨터 하드 드라이브의 JavaScript 소스 파일을 샌드박스가 적용되지 않은 범용 프로그램으로 실행할 수 있습니다( Windows Script Host 참조 ). JavaScript 트로이 목마는 실제로는 흔하지 않지만 JavaScript( VBScript 와 같은 )는 이론적으로 트로이 목마 에 대해 실행 가능한 벡터가 됩니다. ^{[95] [ 인증 실패 ]}

하드웨어 취약점

2015년에는 보안 연구원이 작성한 보고서에서 Rowhammer 공격 의 JavaScript 기반 개념 증명 구현에 대해 설명했습니다. ^{[96] [97] [98] [99]}

2017년에는 ASLR 을 우회할 수 있는 브라우저를 통한 JavaScript 기반 공격이 시연되었습니다 . "ASLR⊕Cache" 또는 AnC라고 합니다. ^{[100] [101]}

2018년 Intel 및 기타 프로세서의 Speculative Execution에 대한 Spectre 공격 을 발표한 문서 에는 JavaScript 구현이 포함되어 있습니다. ^[102]

개발 도구

중요한 도구는 언어와 함께 발전했습니다.

• 모든 주요 웹 브라우저에는 JavaScript 디버거 를 포함하여 웹 개발 도구 가 내장되어 있습니다.
• ESLint 및 JSLint 와 같은 정적 프로그램 분석 도구 는 일련의 표준 및 지침을 준수하는지 JavaScript 코드를 스캔합니다.
• 일부 브라우저에는 내장 프로파일러 가 있습니다. 벤치마크.js 및 jsbench와 같은 독립형 프로파일링 라이브러리도 생성되었습니다. ^{[103] [104]}
• 많은 텍스트 편집기 에는 JavaScript 코드에 대한 구문 강조 지원이 있습니다.

관련 기술

자바

일반적인 오해는 JavaScript가 Java 와 동일하다는 것입니다 . 둘 다 실제로 C와 유사한 구문을 가지고 있습니다(C 언어는 가장 직접적인 공통 조상 언어임). 또한 일반적으로 샌드박스 (브라우저 내부에서 사용되는 경우)이며 JavaScript는 Java의 구문 및 표준 라이브러리를 염두에 두고 설계되었습니다. 특히 모든 Java 키워드는 원래 JavaScript에서 예약되었으며 JavaScript의 표준 라이브러리는 Java의 명명 규칙을 따르고 JavaScript Math및 Date개체는 Java 1.0의 클래스를 기반으로 합니다. ^[105]

Java 와 JavaScript는 모두 1995년에 처음 등장했지만 Java는 Sun Microsystems의 James Gosling 이 개발했고 JavaScript 는 Netscape Communications의 Brendan Eich 가 개발했습니다.

두 언어의 차이점은 유사점보다 더 두드러집니다. Java에는 정적 타이핑 이 있고 JavaScript의 타이핑은 동적 입니다. Java는 컴파일된 바이트코드에서 로드되는 반면 JavaScript는 사람이 읽을 수 있는 소스 코드로 로드됩니다. Java의 객체는 클래스 기반 이고 JavaScript는 프로토타입 기반 입니다. 마지막으로 Java는 Java 8까지 함수형 프로그래밍을 지원하지 않았지만 JavaScript는 Scheme 의 영향을 받아 처음부터 지원했습니다 .

JSON

JSON 또는 JavaScript Object Notation은 JavaScript 객체 리터럴 구문의 하위 집합으로 정의되는 범용 데이터 교환 형식입니다.

타입스크립트

TypeScript(TS)는 엄격한 유형의 JavaScript 변형입니다. TS는 변수 및 함수에 유형 주석을 도입하고 JS 내에서 유형을 설명하는 유형 언어를 도입하여 다릅니다. 그렇지 않으면 TS는 JS와 거의 동일한 기능 집합을 공유하여 클라이언트 측 실행을 위해 JS로 쉽게 변환하고 다른 JS 코드와 상호 운용할 수 있도록 합니다. ^[106]

웹어셈블리

2017년부터 웹 브라우저는 JavaScript 엔진 이 웹 페이지 스크립트 의 성능이 중요한 부분 을 기본 속도에 가깝게 실행할 수 있게 해주는 바이너리 형식인 WebAssembly 를 지원했습니다. ^WebAssembly 코드는 일반 JavaScript 코드 와 동일한 샌드박스 에서 실행됩니다.

asm.js 는 WebAssembly의 전신인 JavaScript의 하위 집합입니다. ^[108]

트랜스파일러

JavaScript는 웹의 지배적인 클라이언트측 언어이며 많은 웹사이트는 스크립트가 많습니다. 따라서 개발 프로세스를 지원할 수 있는 다른 언어로 작성된 코드를 변환하기 위해 트랜스파일러 가 만들어졌습니다. ^[34]

참조