JavaScript 학습 노트 기록

추천 무료 학습: javascript 학습 튜토리얼

1. JavaScript란

1-1. JavaScript와 ECMAScript는 기본적으로 동의어이지만 JavaScript ECMA-262가 정의한 것보다 훨씬 더 많습니다. 완전한 JavaScript 구현에는 다음이 포함됩니다.

Core(ECMAScript)

Document Object Model(DOM)
• Browser Object Model(BOM)
• 웹 브라우저는 ECMAScript 구현이 존재할 수 있는 호스트 환경(hostenvironment)일 뿐입니다. 호스트 환경은 ECMAScript의 기본 구현과 환경 자체와 상호 작용하는 데 필요한 확장을 제공합니다. 확장(예: DOM)은 ECMAScript 핵심 유형 및 구문을 사용하여 추가 환경별 기능을 제공합니다. 다른 호스팅 환경에는 서버측 JavaScript 플랫폼 Node.js와 곧 지원 중단될 Adobe Flash가 포함됩니다.
기본 수준에서 언어를 설명합니다: 구문, 유형, 명령문, 키워드, 예약어, 연산자, 전역 객체

ECMAScript는 이 사양에서 설명하는 모든 측면을 구현하는 언어의 이름일 뿐입니다
. JavaScript는 ECMAScript를 구현하고 Adobe ActionScript는

1-2, DOM

문서 객체 모델(DOM, Document Object Model)은 HTML에서 확장 XML을 사용하기 위한 API(애플리케이션 프로그래밍 인터페이스)입니다. DOM은 전체 페이지를 계층적 노드 집합으로 추상화합니다. HTML 또는 XML 페이지의 각 구성 요소는 서로 다른 데이터를 포함하는 노드입니다.

IE3 및 Netscape Navigator 3은 브라우저 창 액세스 및 작동을 지원하는 Browser Object Model(BOM) API를 제공합니다. BOM을 사용하여 개발자는 브라우저에 표시되는 내용 이외의 페이지 부분을 제어할 수 있습니다. BOM의 정말 독특한 점이자 확실히 가장 문제가 되는 점은 관련 표준이 없는 유일한 JavaScript 구현이라는 것입니다. HTML5는 이러한 상황을 변화시킵니다. 이 HTML 버전은 공식 사양의 형태로 가능한 한 많은 BOM 기능을 다룹니다. HTML5의 등장으로 인해 BOM과 관련된 이전의 많은 문제가 해결되었습니다.

일반적으로 BOM은 주로 브라우저 창과 하위 창(프레임)을 대상으로 하지만 사람들은 일반적으로 BOM 범위 내에 브라우저별 확장자를 포함합니다. 다음은 이러한 확장 기능입니다.

새 브라우저 창을 팝업하는 기능

• 브라우저에 대한 자세한 정보를 제공하는 navigator 개체 , 브라우저에서 로드한 페이지에 대한 자세한 정보를 제공합니다.
• 사용자의 화면 해상도에 대한 자세한 정보를 제공합니다.
• 성능 개체는 브라우저 메모리 사용량, 탐색 동작 및 시간 통계를 제공합니다.
쿠키 보호 지원
• XMLHttpRequest 및 IE의
• ActiveXObject
• 와 같은 기타 사용자 정의 개체 2. HTML의 JavaScript
• 2-1, script 요소

요소는 Netscape에서 만들어졌으며 Netscape Navigator 2에서 처음 구현되었습니다 . 나중에 이 요소는 공식적으로 HTML 사양에 추가되었습니다. 스크립트 요소에는 아래 나열된 8개의 속성이 있습니다.

비동기: 선택 사항. 스크립트 다운로드가 즉시 시작되어야 하지만 리소스 다운로드 또는 다른 스크립트 로드 대기와 같은 다른 페이지 작업을 막을 수는 없음을 나타냅니다. 외부 스크립트 파일에만 유효합니다. script元素

将JavaScript插入HTML的主要方法是使用 script 元素。这
个元素是由网景公司创造出来，并最早在Netscape Navigator 2中实现
的。后来，这个元素被正式加入到HTML规范。 script 元素有下
列8个属性。

• async

• 문자 집합: 선택 사항입니다. src 속성에 지정된 코드 문자 집합을 사용합니다. 대부분의 브라우저는 해당 값에 신경 쓰지 않기 때문에 이 속성은 거의 사용되지 않습니다.

• 크로스오리진: ​​선택사항. 관련 요청에 대한 CORS(Cross-Origin Resource Sharing) 설정을 구성합니다. CORS는 기본적으로 사용되지 않습니다. crossorigin="anonymous" 프로필 요청에는 자격 증명 플래그를 설정할 필요가 없습니다. crossorigin="use-credentials"는 자격 증명 플래그를 설정합니다. 즉, 아웃바운드 요청에 자격 증명이 포함된다는 의미입니다.

  
  

연기: 선택 사항입니다. 문서 파싱 및 표시가 완료된 후 스크립트 실행에 문제가 없음을 나타냅니다. 외부 스크립트 파일에만 유효합니다. IE7 이하에서는 이 속성을 인라인 스크립트에 지정할 수도 있습니다.
무결성: 선택 사항. 하위 리소스 무결성(SRI)을 확인하기 위해 수신된 리소스를 지정된 암호화 서명과 비교할 수 있습니다. 수신된 리소스의 서명이 이 속성에 지정된 서명과 일치하지 않으면 페이지에서 오류를 보고하고 스크립트가 실행되지 않습니다. 이 속성은 CDN(Content Delivery Network)이 악성 콘텐츠를 제공하지 않도록 하는 데 사용될 수 있습니다.
언어: 구식입니다. 원래는 코드 블록 내에서 스크립팅 언어(예: "JavaScript", "JavaScript1.2" 또는 "VBScript")를 나타내는 데 사용되었습니다. 대부분의 브라우저는 이 속성을 무시하므로 더 이상 사용해서는 안 됩니다.

• src : 선택사항. 실행할 코드가 포함된 외부 파일을 나타냅니다.

• 유형 : 선택사항. 언어 대신 코드 블록에 있는 스크립팅 언어의 콘텐츠 유형(MIME 유형이라고도 함)을 나타냅니다.

스크립트에 포함된 코드는 위에서 아래로 해석됩니다

2-2,

src 속성을 사용하는 스크립트 요소는 더 이상 스크립트 및 /script 태그에 다른 JavaScript 코드를 포함해서는 안 됩니다. 둘 다 제공되면 브라우저는 인라인 코드를 무시하고 스크립트 파일을 다운로드하여 실행합니다.

스크립트 요소의 가장 강력하고 논란이 많은 기능 중 하나는 외부 도메인의 JavaScript 파일을 포함할 수 있다는 것입니다. img 요소와 마찬가지로 script 요소의 src 속성은 완전한 URL이 될 수 있으며 이 URL이 가리키는 리소스는 해당 URL이 포함된 HTML 페이지와 동일한 도메인에 있을 수 없습니다

2-3, 문서 모드

문서 모드를 doctype으로 전환하여 사용할 수 있습니다. 초기 문서 모드에는 혼합 모드(특이 모드)와 표준 모드(표준 모드)의 두 가지가 있습니다. 전자는 IE를 IE5처럼 만들고(일부 비표준 기능 지원), 후자는 IE가 표준을 준수하는 동작을 하도록 만듭니다. 두 모드의 주요 차이점은 CSS를 통해 렌더링되는 콘텐츠에만 있지만 JavaScript에는 몇 가지 관련 효과 또는 부작용도 있습니다. 이러한 부작용은 이 책에서 자주 언급될 것입니다.

IE가 문서 모드 전환을 처음 지원한 후 다른 브라우저도 이를 따랐습니다. 브라우저가 널리 구현되면서 세 번째 문서 모드인 준표준 모드(거의
표준 모드)가 등장했습니다. 이 모드의 브라우저는 많은 표준 기능을 지원하지만 표준만큼 엄격하지는 않습니다. 주요 차이점은 이미지 요소 주변의 공백이 처리되는 방식입니다(테이블에서 이미지를 사용할 때 가장 눈에 띕니다).

문서 시작 부분의 doctype 선언을 생략하면 모든 브라우저에서 무차별 모드가 켜집니다. 혼합 모드는 브라우저마다 매우 다르기 때문에 이 합의는 불합리합니다. 블랙 기술을 사용하지 않으면 기본적으로 브라우저 일관성이 전혀 없습니다.

2-4, noscript 요소

초기 브라우저가 JavaScript를 지원하지 않는다는 문제를 고려하여, 우아한 페이지 저하에 대한 솔루션이 필요합니다. 결국 해당 요소가 등장하여 JavaScript를 지원하지 않는 브라우저에 대체 콘텐츠를 제공하는 데 사용되었습니다. 오늘날의 브라우저는 이미 100% JavaScript를 지원하지만 이 요소는 JavaScript를 비활성화하는 브라우저에서 여전히 사용됩니다.

요소에는

1. 브라우저가 스크립트를 지원하지 않습니다
2. 브라우저의 스크립트 지원이 꺼져 있습니다

3. 문법 기본 사항

3-1, 문법

가장 먼저 알아야 할 점은 ECMAScript의 모든 내용은 대소문자를 구분한다는 것입니다. 변수, 함수 이름, 연산자 등 대소문자를 구분합니다. 즉, test 변수와 Test 변수는 서로 다른 두 변수입니다. 마찬가지로 typeof는 키워드이기 때문에 함수 이름으로 사용할 수 없습니다(나중에 자세히 설명). 그러나 Typeof는 완벽하게 유효한 함수 이름입니다.

3-2. 식별자

소위 식별자는 변수, 함수, 속성 또는 함수 매개변수의 이름입니다. 식별자는 다음 문자 중 하나 이상으로 구성될 수 있습니다.

• 첫 번째 문자는 문자, 밑줄(_) 또는 달러 기호($)여야 합니다.
• 나머지 문자는 문자, 밑줄 또는 달러 기호일 수 있습니다. 또는 숫자.

식별자의 문자는 확장 ASCII 또는 À 및 Æ와 같은 유니코드 알파벳 문자일 수 있습니다(그러나 이는 권장되지 않음).

관례에 따라 ECMAScript 식별자는 카멜 표기법을 사용합니다. 즉, 첫 번째 단어의 첫 글자는 소문자이고 각 후속 단어의 첫 글자는 대문자입니다.

3-3, strict 모드

ECMAScript 5는 strict를 추가합니다. 모드(엄격 모드) 개념. 엄격 모드는 다른 JavaScript 구문 분석 및 실행 모델입니다. ECMAScript 3의 일부 비표준 작성 방법은 이 모드에서 처리되며 안전하지 않은 활동

3-4, 키워드 및 예약어

ECMA에 대해 오류가 발생합니다. -262는 제어문의 시작과 끝을 나타내거나 특정 작업을 수행하는 등 특별한 용도로 사용되는 예약된 키워드 집합을 설명합니다.

ECMA-262 6판에 지정된 모든 키워드:

break			  do	      	 in		       	 typeof
case	 		  else	      	 instanceof      var
catch			  export	     new			 void
class			  extends        return			 while
const			  finally	     super			 with
continue	 	  for		     switch			 yield
debugger	 	  function	     this
default			  if		     throw
delete	   		  import try

사양에는 식별자나 속성 이름으로도 사용할 수 없는 미래 예약어 집합입니다. 예약어는 언어에서 특별한 목적이 없지만 키워드

3-5로 향후 사용을 위해 예약되어 있습니다. 변수

ECMAScript 변수는 느슨한 형식이므로 변수를 사용하여 모든 유형의 데이터를 저장할 수 있습니다. 각 변수는 임의의 값을 보유하는 데 사용되는 명명된 자리 표시자에 지나지 않습니다. 변수를 선언하는 키워드는 var, const, let 3가지가 있습니다. 그 중 var는 CMAScript 모든 버전에서 사용할 수 있고, const와 let은 ECMAScript 6 이상 버전

3-6, var 키워드

1. var 선언 범위
   중요한 문제는 var 연산자를 사용하여 정의된 변수가 해당 변수를 포함하는 함수의 지역 변수가 된다는 것입니다. 예를 들어, 함수 내에서 변수를 정의하기 위해 var를 사용한다는 것은 함수가 종료될 때 변수가 소멸된다는 것을 의미합니다.

2. var 선언 승격
   var를 사용할 때 다음 코드는 오류를 보고하지 않습니다. 이 키워드를 사용하여 선언된 변수는 자동으로 함수 범위의 최상위로 승격되기 때문입니다

3-7. let 선언

let은 var와 유사한 기능을 가지고 있지만 매우 중요한 차이점이 있습니다. 가장 분명한 차이점은 let 선언의 범위는 블록 범위이고 var 선언의 범위는 함수 범위라는 것입니다.

1. 임시 데드 존
   let과 var의 또 다른 중요한 차이점은 let으로 선언된 변수가 범위에서 승격되지 않는다는 것입니다.

2. 전역 선언
   var 키워드와 달리 let을 사용하여 전역 범위에서 선언한 변수는 창 객체의 속성이 되지 않습니다(var로 선언한 변수)

3. 조건부 선언
   var를 사용하여 변수를 선언하는 경우 선언이 호이스팅되면 JavaScript 엔진은 자동으로 중복 선언을 범위 상단의 단일 선언으로 병합합니다. let의 범위는 블록이므로 이전에 let을 사용하여 동일한 이름의 변수가 선언되었는지 확인하는 것이 불가능하며, 이전에 for 루프

   에서 선언하지 않고 선언하는 것도 불가능합니다

4. 
   let 선언 let이 나타나면 for 루프에 의해 정의된 반복 변수는 루프 본문 외부로 침투합니다.

5. const 선언
   const의 동작은 기본적으로 let과 동일합니다. 유일한 중요한 차이점은 이를 사용하여 변수를 선언할 때 동시에 변수를 초기화해야 하며 const 선언을 수정해야 합니다. 변수는 런타임 오류를 일으킬 수 있습니다.

3-8, 선언 스타일 및 모범 사례

ECMAScript 6에는 범위와 의미 체계를 더 정확하게 선언할 수 있도록 언어에 대한 더 나은 지원을 객관적으로 제공하는 let 및 const가 추가되었습니다. JavaScript 커뮤니티는 수년 동안 이상하게 동작하는 vars로 인해 발생하는 다양한 문제로 인해 어려움을 겪어 왔습니다. 이 두 가지 새로운 키워드가 등장하면서 코드 품질을 향상시키는 데 도움이 되는 새로운 모범 사례가 점차 등장하고 있습니다.

1. var를 사용하지 마세요
   let과 const를 사용하면 대부분의 개발자는 더 이상 var가 필요하지 않다는 것을 알게 될 것입니다. 변수에는 명확한 범위, 선언 위치 및 변경할 수 없는 값이 있기 때문에 자신을 let 및 const로 제한하면 코드 품질을 향상시키는 데 도움이 됩니다.
2. const가 우선이고 두 번째입니다
   const 선언을 사용하면 브라우저가 실행 중일 때 변수가 변경되지 않은 상태로 유지될 수 있으며 정적 코드 분석 도구가 불법 할당 작업을 미리 감지할 수 있습니다. 따라서 많은 개발자들은 변수는 const를 먼저 사용해 선언해야 하고, let은 앞으로 수정이 있을 것이라는 점을 미리 알고 있는 경우에만 사용해야 한다고 생각합니다. 이를 통해 개발자는 특정 변수의 값이 절대 변하지 않는다는 것을 더욱 확실하게 추론할 수 있으며, 실수로 할당하여 발생한 예상치 못한 동작을 빠르게 감지할 수도 있습니다.

4. 데이터 유형

ECMAScript에는 정의되지 않음, Null, 부울, 숫자, 문자열 및 기호의 6가지 간단한 데이터 유형(기본 유형이라고도 함)이 있습니다. 심볼(symbol)은 ECMAScript 6의 새로운 기능입니다. Object라는 복잡한 데이터 유형도 있습니다. 객체는 이름-값 쌍의 순서가 지정되지 않은 모음입니다. ECMAScript에서는 자신만의 데이터 유형을 정의할 수 없기 때문에 모든 값은 위에서 언급한 7가지 데이터 유형 중 하나로 표현될 수 있습니다. 7가지 데이터 유형만으로는 모든 데이터를 표현하기에는 부족한 것 같습니다. 하지만 ECMAScript의 데이터 유형은 매우 유연합니다. 하나의 데이터 유형을 여러 데이터 유형으로 사용할 수 있습니다

4-1.typeof 연산자

ECMAScript의 유형 체계가 느슨하기 때문에 데이터 유형을 결정하는 방법이 필요합니다. 어떤 변수라도. 여기서 typeof 연산자가 사용됩니다. 값에 typeof 연산자를 사용하면 다음 문자열 중 하나가 반환됩니다.
"정의되지 않음"은 값이 정의되지 않음을 의미합니다.
"부울"은 값이 부울 값임을 의미합니다.
" 숫자"는 값이 숫자 값임을 의미합니다.
"객체"는 값이 객체(함수 아님) 또는 null임을 의미합니다.
"함수"는 값이 함수임을 의미하고,
"기호"는 값이 기호임을 의미합니다.

4-2. 정의되지 않은 유형

4-3. Null 유형

Null 유형에는 특수 값인 null 하나만 있습니다. 논리적으로 말하면 null 값은 null 개체 포인터를 나타내므로 typeof에 null을 전달하면 나중에 개체 값을 보유할 변수를 정의할 때 null로 초기화하고 사용하지 않는 것이 좋습니다. 다른 가치. 이렇게 하면 이 변수의 값이 null인지 확인하기만 하면 나중에 이 변수가 객체에 대한 참조로 다시 할당되는지 여부를 알 수 있습니다

항등 연산자(==)를 사용하여 null과 정의되지 않음을 비교하면 항상 true가 반환됩니다. 그러나 이 연산자는 비교를 위해 피연산자를 변환한다는 점에 유의하세요.
null과 정의되지 않음은 서로 관련되어 있지만 용도는 완전히 다릅니다. 앞에서 언급했듯이 변수 값을 명시적으로 undefine으로 설정할 필요는 없습니다. 하지만 null은 그렇지 않습니다. 변수가 객체를 보유하고 있고 보유할 그러한 객체가 없을 때마다 변수는 null로 채워져야 합니다. 이는 null이 null 개체에 대한 포인터라는 의미를 유지하고 정의되지 않은 것과 더욱 구별됩니다.
null은 거짓 값입니다. 따라서 필요한 경우 보다 간결한 방식으로 감지할 수 있습니다. 하지만 이 외에도 거짓일 가능성이 있는 값이 많이 있다는 점을 명심하세요. 따라서 탐지하려는 것은 false 값뿐만 아니라 리터럴 값인 null이라는 점을 분명히 해야 합니다.

4-4 부울 유형

Boolean(Boolean) 유형은 ECMAScript에서 가장 자주 사용되는 유형 중 하나입니다. 두 개의 리터럴 값: true 및 false. 이 두 부울 값은 숫자 값과 다르므로 true는 1과 같지 않고 false는 0과 같지 않습니다

참고: 부울 리터럴 true와 false는 대소문자를 구분하므로 True와 False(및 기타 혼합- 사례 형식)은 유효한 식별자이지만 부울 값은 아닙니다.

4-5, 숫자 유형

ECMAScript에서 가장 흥미로운 데이터 유형은 숫자일 것입니다. Number 유형은 IEEE 754 형식을 사용하여 정수 및 부동 소수점 값(일부 언어에서는 배정밀도 값이라고도 함)을 나타냅니다. 숫자 유형에 따라 숫자 리터럴 형식도 다릅니다.

1. 부동 소수점 값
   부동 소수점 값을 정의하려면 값에 소수점이 포함되어야 하며 소수점 뒤에 최소
   한 자리가 있어야 합니다. 소수점 앞에 정수가 있을 필요는 없지만 권장됩니다.

2. 값의 범위
   메모리 제한으로 인해 ECMAScript는 전 세계의 모든 값 표현을 지원하지 않습니다. ECMAScript로 표현할 수 있는 최소값은 Number.MIN_VALUE에 저장됩니다. 대부분의 브라우저에서 표현할 수 있는 최대값은 1.797 693 134 862 315입니다. 브라우저.7e+308. 계산의 수치 결과가 JavaScript가 표현할 수 있는 범위를 초과하는 경우 해당 값은 자동으로 특별한 Infinity 값으로 변환됩니다. 표현 불가능한 음수는 -Infinity(음의 무한대)로 표시되고, 표현 불가능한 양수는 Infinity(양의 무한대)로 표시됩니다. 계산에서 양수 Infinity 또는 음수 Infinity 를 반환하는 경우 해당 값은 어떤 계산에서도 더 이상 사용할 수 없습니다. 이는 Infinity에는 계산에 사용할 수 있는 숫자 표현이 없기 때문입니다. 값이 유한한지(즉, JavaScript가 나타낼 수 있는 최소값과 최대값 사이) 확인하려면 isFinite() 함수

3. NaN
   를 사용할 수 있습니다. NaN이라는 특수 값이 있는데, 이는 " 숫자 값이 아님" ”(숫자 아님), 숫자를 반환해야 하는 작업이 실패했음을 나타내는 데 사용됩니다(오류를 발생시키는 대신). 예를 들어 숫자를 0으로 나누면 일반적으로 다른 언어에서는 오류가 발생하여 코드 실행이 중단됩니다. 하지만 ECMAScript에서는 0, +0 또는 -0으로 나누면 NaN

4. 숫자 변환
   이 반환됩니다. 숫자가 아닌 값을 숫자 값으로 변환할 수 있는 3가지 함수가 있습니다: Number() , parseInt() 및 parseFloat( ) . Number()는 모든 데이터 유형에 사용할 수 있는 변환 함수입니다. 후자의 두 함수는 주로 문자열을 숫자 값으로 변환하는 데 사용됩니다. 동일한 매개변수에 대해 이 세 가지 기능은 서로 다른 작업을 수행합니다.

4-6, NaN

NaN이라는 특별한 값이 있는데, 이는 "숫자가 아님(Not aNumber)"을 의미합니다. 값을 반환해야 했던 작업이 실패했음을 나타내는 데 사용됩니다( 오류를 발생시키는 대신).

4-7. 숫자 변환

숫자가 아닌 값을 숫자 값으로 변환할 수 있는 함수는 Number(),parseInt(),parseFloat() 3가지가 있습니다. Number()는 모든 데이터 유형에 사용할 수 있는 변환 함수입니다. 후자의 두 함수는 주로 문자열을 숫자 값으로 변환하는 데 사용됩니다. 동일한 매개변수에 대해 이 세 가지 기능은 서로 다른 작업을 수행합니다. Number() 함수는 다음 규칙에 따라 변환을 수행합니다. 부울 값, true는 1로 변환되고 false는 0으로 변환됩니다.
숫자 값, 직접 반환됨. null 은 0을 반환합니다. 정의되지 않은 경우 NaN을 반환합니다.

4-8. 문자열 유형

문자열(문자열) 데이터 유형은 0개 이상의 16비트 유니코드 문자 시퀀스를 나타냅니다. 문자열은 큰따옴표("), 작은따옴표(') 또는 역따옴표(`)로 표시할 수 있습니다.

1. 문자 리터럴
   문자열 데이터 유형에는 인쇄할 수 없는 문자나 기타 목적 문자를 나타내는 데 사용되는 일부 문자 리터럴이 포함되어 있습니다.

2. 문자열의 특성
   ECMAScript의 문자열은 변경할 수 없습니다. 즉, 일단 생성되면 해당 값을 변경할 수 없습니다. 변수의 문자열 값을 수정하려면 먼저 원래 문자열을 삭제한 다음 다른 문자열을 저장해야 합니다.

3. 문자열로 변환
   값을 문자열로 변환하는 방법에는 두 가지가 있습니다. 첫 번째는 거의 모든 값을 반환하는 것입니다. 현재 값에 해당하는 문자열

4. 템플릿 리터럴
   ECMAScript 6에는 템플릿 리터럴을 사용하여 문자열을 정의하는 기능이 추가되었습니다. 작은따옴표나 큰따옴표를 사용하는 것과 달리 템플릿 리터럴은 개행 문자를 유지하고 여러 줄에 걸쳐 문자열을 정의할 수 있습니다

5. 문자열 보간
   템플릿 리터럴의 가장 일반적으로 사용되는 기능 중 하나는 문자열 보간을 지원하는 것입니다. 연속 에 하나 이상의 값을 삽입합니다. 기술적으로 말하면 템플릿 리터럴은 문자열이 아니라 특별한 JavaScript 구문 표현식이지만 평가 후 결과는 문자열입니다. 템플릿 리터럴은 정의되면 즉시 평가되고 문자열 인스턴스로 변환됩니다.

6. 템플릿 리터럴 태그 함수
   템플릿 리터럴은 태그 함수(태그 함수) 정의도 지원합니다. 보간 동작은 태그 기능을 통해 사용자 정의할 수 있습니다. 레이블 함수는 보간 토큰으로 구분된 템플릿과 각 표현식을 평가한 결과를 받습니다. 태그 함수 자체는 템플릿 리터럴(

7. 원래 문자열
   )에 접두사를 추가하여 사용자 정의 동작을 적용하는 일반 함수입니다. 템플릿 리터럴을 사용하면 원래 템플릿 리터럴 콘텐츠(예: 개행 문자 또는 유니코드 문자)를 직접 얻을 수도 있습니다. , 변환된 문자로 표시되지 않습니다. 이를 위해 기본 String.raw 태그 기능을 사용할 수 있습니다.

5. 연산자

ECMA-262는 수학 연산자(예: 추가, 빼기), 비트 연산자, 관계 연산자 및 항등 연산자 등 ECMAScript의 연산자는 문자열, 숫자, 부울 값, 심지어 객체를 포함한 다양한 값에 사용할 수 있다는 점에서 독특합니다. 객체에 적용될 때 연산자는 일반적으로 valueOf() 및/또는 toString() 메서드를 호출하여 계산 가능한 값을 얻습니다. 3.5.1 단항 연산자 하나의 값에만 작동하는 연산자를 단항 연산자라고 합니다. 단항 연산자는 ECMAScript에서 가장 간단한 연산자입니다.

5-1. 단항 연산자

1. 증가/감소 연산자
   증가 및 감소 연산자는 C 언어에서 직접 복사되지만 접두사 버전과 접미사 버전의 두 가지 버전이 있습니다. 이름에서 알 수 있듯이 접두사 버전은 연산할 변수 앞에 위치하고, 접미사 버전은 연산할 변수 뒤에 위치합니다. 접두사 증가 연산자는 값에 1을 더합니다. 변수 앞에 더하기 기호(++) 두 개만 붙이면 됩니다.

2. 단항 덧셈과 뺄셈
단항 덧셈과 뺄셈 연산자는 대부분의 개발자에게 적합하지 않습니다. 고등학교 수학에서와 마찬가지로 ECMAScript에서도 동일한 목적을 가지고 있습니다. 단항 덧셈은 변수 앞에 더하기 기호(+)가 표시되며 값에 영향을 주지 않습니다. 5-2. 비트 연산자

1. 
   Bitwise AND

   의 몇 안 되는 이진 수학 연산자 중 하나입니다. 비트별 AND 연산자는 앰퍼샌드( & )로 표시되며 두 개의 피연산자를 갖습니다. 기본적으로 비트별 AND는 두 숫자의 각 비트를 정렬한 다음 진리표의 규칙에 따라 각 비트에 해당 AND 연산을 수행하는 것입니다.

2. 
   비트 OR

   비트 OR 연산자는 파이프 기호( | )로 표시되며 피연산자가 두 개 있습니다.

3. 
   비트별 XOR

   비트별 XOR은 캐럿(^)으로 표시되며 피연산자도 두 개 있습니다.

4. 
   왼쪽 시프트

   왼쪽 시프트 연산자는 두 개의 미만 기호(<<)로 표시됩니다. 값의 모든 자릿수를 지정된 자릿수만큼 왼쪽으로 이동합니다. 예를 들어, 값 2(이진수 10)가 왼쪽으로 5비트 이동하면 64(이진수 1000000)가 됩니다.

5. 
   부호 있는 오른쪽 시프트

   부호 있는 오른쪽 시프트는 두 개의 보다 큰 기호( >>)로 표시됩니다. ; ), 부호(양수 또는 음수)를 유지하면서 값의 32비트를 모두 오른쪽으로 이동합니다. 부호 있는 오른쪽 시프트는 실제로 왼쪽 시프트의 역연산입니다

6. 
   부호 없는 오른쪽 시프트

   부호 없는 오른쪽 시프트는 3보다 큰 기호(>>>)로 표시되며, 값의 32비트가 모두 오른쪽으로 이동합니다. 옮기다. 양수의 경우 부호 없는 오른쪽 시프트는 부호 있는 오른쪽 시프트

7. 
   

   5-3과 동일한 결과를 갖습니다. 부울 연산자

논리적 NOT

1. 
   Logical AND

   논리 AND 연산자는 두 개의 앰퍼샌드(&&)로 표시되며 두 개의 값에 적용됩니다 ​​

2. 
   Logical Or

   논리 OR 연산자는 두 개의 파이프 기호( || )로 표시됩니다.

3. 
   

   5-4, 곱셈 연산자

곱셈 연산자

1. 
   나누기 연산자

   나누기 연산자는 슬래시( / )로 표시되며 첫 번째 피연산자를 두 번째 피연산자로 나눈 몫을 계산하는 데 사용됩니다.

2. 
   모듈로 연산자

• 모듈로(나머지) 연산자는 퍼센트 기호( % )로 표시됩니다.
• 피연산자가 숫자 값인 경우 일반 나누기 연산을 수행하고 나머지가 반환됩니다.
• 피제수는 무한이고 제수는 유한한 경우 NaN이 반환됩니다.
• 피제수가 유한한 값이고 제수가 0이면 NaN이 반환됩니다.
• Infinity를 Infinity로 나누면 NaN이 반환됩니다.
• 배당금이 유한값이고 제수가 무한값이면 배당금이 반환됩니다.
• 피제수는 0이고 제수는 0이 아닌 경우 0이 반환됩니다.
• 숫자 값이 아닌 피연산자가 있는 경우 먼저 Number() 함수를 사용하여 백그라운드에서 숫자 값으로 변환한 후 위의 규칙을 적용하세요.

6. 명령문

ECMA-262는 일부 명령문(흐름 제어 명령문이라고도 함)을 설명하며 ECMAScript의 구문 대부분은 명령문에 반영됩니다. 명령문은 일반적으로 하나 이상의 키워드를 사용하여 주어진 작업을 수행합니다. 명령문은 간단할 수도 있고 복잡할 수도 있습니다. 함수를 종료하라고 지시하는 것만큼 간단할 수도 있고, 반복적으로 실행될 명령을 나열하는 것만큼 복잡할 수도 있습니다.

6-1. do-while 문

do-while 문은 테스트 후 루프 문입니다. 즉, 루프 본문의 코드가 실행된 후에만 종료 조건이 평가됩니다. 즉, 루프 본문에 있는 코드가 한 번 이상 실행됩니다

while 문은 먼저 테스트되는 루프 문입니다. 즉, 종료 조건이 먼저 감지되고, 그런 다음 루프 본문의 코드가 실행됩니다. 따라서 while 루프 본문의 코드는 실행되지 않을 수 있습니다. 7. 함수

ECMAScript의 함수는 값을 반환할지 여부를 지정할 필요가 없습니다. 모든 함수는 언제든지 return 문을 사용하여 함수의 값을 반환하고 그 뒤에 반환할 값을 반환할 수 있습니다.

함수 이름을 eval 또는 인수로 지정할 수 없습니다.

두 개 함수의 매개변수는 동일한 이름으로 호출될 수 없습니다.

8. 변수, 범위 및 메모리

4-1. 기본 값과 참조 값 ​​

변수에 값을 할당할 때 JavaScript 엔진은 값이 기본 값인지 참조 값인지 확인해야 합니다. 이전 장에서는 정의되지 않음, Null, 부울, 숫자, 문자열 및 기호의 6가지 기본 값에 대해 설명했습니다. 원시 값을 보유하는 변수는 변수에 저장된 실제 값을 조작하기 때문에 값으로 액세스됩니다.

기본 값과 참조 값은 매우 유사한 방식으로 정의됩니다. 둘 다 변수를 생성한 다음 여기에 값을 할당합니다. 그러나 변수가 값을 보유한 후 해당 값으로 수행할 수 있는 작업은 상당히 다릅니다. 참조 값의 경우 해당 속성과 메서드를 언제든지 추가, 수정, 삭제할 수 있습니다.

다양한 저장 방법 외에도 변수를 통해 복사할 때 원래 값과 참조 값도 다릅니다. 변수를 통해 원래 값을 다른 변수에 할당하면 원래 값이 새 변수 위치에 복사됩니다.

• 한 변수의 참조 값을 다른 변수에 할당하면 변수에 저장된 값도 새 변수의 위치에 복사됩니다. 차이점은 여기에 복사된 값이 실제로 힙 메모리에 저장된 개체에 대한 포인터라는 것입니다. 작업이 완료된 후 두 변수는 실제로 동일한 객체를 가리키므로 한 객체의 변경 사항이 다른 객체에 반영됩니다

3. 매개변수 전달
   ECMAScript의 모든 함수의 매개변수는 값으로 전달됩니다. 즉, 한 변수에서 다른 변수로 복사되는 것처럼 함수 외부의 값이 함수 내부의 매개변수에 복사된다는 의미입니다. 원시 값인 경우 원래 값 변수의 복사본과 동일합니다. 참조 값인 경우 참조 값 변수의 복사본과 동일합니다. 많은 개발자에게 이 부분은 이해하기 어려울 수 있습니다. 결국 변수는 값과 참조로 액세스할 수 있지만 매개변수는 값으로만 ​​전달할 수 있습니다.

매개변수를 값으로 전달하면 값이 로컬에 복사됩니다. 변수(즉, 명명된 매개변수 또는 ECMAScript 용어로 인수 객체의 슬롯)입니다. 매개변수를 참조로 전달하면 메모리의 값 위치가 지역 변수에 저장됩니다. 즉, 지역 변수에 대한 수정 사항이 함수 외부에 반영됩니다

4. 유형 결정
   이전 장에서 언급한 typeof 연산자 변수가 기본 유형인지 여부를 결정하는 데 가장 적합합니다. 오히려 변수가 문자열, 숫자, 부울 또는 정의되지 않음인지 확인하는 가장 좋은 방법입니다. 값이 객체이거나 null이면 typeof는 "객체"를 반환합니다.

정의에 따라 모든 참조 값은 Object의 인스턴스이므로 instanceof 연산자와 Object 생성자를 통해 감지된 모든 참조 값은 true를 반환합니다. 마찬가지로, 원시 값을 감지하기 위해 인스턴스를 사용하면 원시 값이 객체가 아니기 때문에 항상 false를 반환합니다.

함수 감지에 사용될 때 typeof 연산자는 "함수"도 반환한다는 점에 유의하세요. Safari(Safari 5까지) 및 Chrome(Chrome 7까지)에서 정규식을 감지하는 데 사용되는 경우 typeof는 구현 세부 사항으로 인해 "function"도 반환합니다. ECMA-262에서는 내부 [[Call]] 메서드를 구현하는 모든 개체가 감지 유형에 대해 "함수"를 반환해야 한다고 명시합니다. 위 브라우저의 정규 표현식은 이 메서드를 구현하기 때문에 typeof도 정규 표현식에 대해 "함수"를 반환합니다. IE 및 Firefox에서 typeof는 정규식에 대해 "객체"를 반환합니다.

4-2. 실행 컨텍스트 및 범위

JavaScript에서는 실행 컨텍스트(위에서 "컨텍스트"라고 함)의 개념이 매우 중요합니다. 변수나 함수의 컨텍스트에 따라 액세스할 수 있는 데이터와 작동 방식이 결정됩니다. 각 컨텍스트에는 연관된 변수 개체가 있으며
이 컨텍스트에서 정의된 모든 변수와 함수는 이 개체에 존재합니다. 변수 개체는 코드를 통해 접근할 수는 없지만 백그라운드에서 데이터를 처리하는 데 사용됩니다.
글로벌 컨텍스트는 가장 바깥쪽 컨텍스트입니다. ECMAScript 구현의 호스트 환경에 따라 전역 컨텍스트를 나타내는 객체가 다를 수 있습니다. 브라우저에서 전역 컨텍스트는 우리가 흔히 창 개체라고 부르는 것입니다(12장에서 자세히 소개합니다). 따라서
var를 통해 정의된 모든 전역 변수와 함수는 창 개체의 속성과 메서드가 됩니다. let 및 const를 사용한 최상위 선언은 전역 컨텍스트에서 정의되지 않지만 범위 체인 확인에 동일한 효과를 갖습니다. 컨텍스트는 정의된 모든 변수와 함수를 포함하여 모든 코드가 실행된 후에 삭제됩니다. 전역 컨텍스트는 웹 페이지를 닫거나 브라우저를 종료하는 등 애플리케이션이 종료될 때까지 삭제되지 않습니다.
각 함수 호출에는 고유한 컨텍스트가 있습니다. 코드 실행 흐름이 함수에 들어가면 함수의 컨텍스트가 컨텍스트 스택으로 푸시됩니다. 함수가 실행된 후 컨텍스트 스택은 함수 컨텍스트를 팝하고 이전 실행 컨텍스트로 제어를 반환합니다. ECMAScript
프로그램의 실행 흐름은 이 컨텍스트 스택을 통해 제어됩니다. 컨텍스트의 코드가 실행되면 변수 개체의 범위 체인이 생성됩니다. 이 범위 체인은 각 컨텍스트 수준에서 코드가 변수와 함수에 액세스하는 순서를 결정합니다. 코드가 실행되는 컨텍스트의 변수 개체는 항상 범위 체인 앞에 있습니다. 컨텍스트가 함수인 경우 해당 활성화 개체가 변수 개체로 사용됩니다. 활성 개체에는 처음에 하나의 정의된 변수인 인수만 있습니다. (전역 컨텍스트에는 그러한 변수가 없습니다.) 범위 체인의 다음 변수 개체는 포함 컨텍스트에서 오고, 다음 개체는 그 이후의 포함 컨텍스트에서 옵니다. 그리고 전역 컨텍스트까지 계속됩니다. 전역 컨텍스트의 변수 개체는 항상 범위 체인의 마지막 변수 개체입니다

1. 범위 체인 향상
   실행 컨텍스트에는 주로 두 가지 유형이 있지만, 전역 컨텍스트와 함수 컨텍스트(존재함) eval() 호출) 세 번째 컨텍스트 내에서) 범위 체인을 향상시키는 다른 방법이 있습니다. 특정 명령문으로 인해 범위 체인 앞에 컨텍스트가 일시적으로 추가되고 코드
   가 실행된 후에 제거됩니다.

2. 변수 선언
   ES6 이후 JavaScript 변수 선언은 엄청난 변화를 겪었습니다.
   ECMAScript 5.1 이전에는 var가 변수 선언을 위한 유일한 키워드였습니다. ES6에서는
   let 및 const 키워드를 추가할 뿐만 아니라 이 두 키워드가
   var를 압도적으로 능가하는 첫 번째 선택 항목으로 만듭니다.

• var를 사용한 함수 범위 선언
  var를 사용하여 변수를 선언하면 해당 변수가 가장 가까운 컨텍스트에 자동으로 추가됩니다. 함수 내에서 가장 가까운 컨텍스트는 함수의 로컬 컨텍스트입니다. with 문에서 가장 가까운 컨텍스트는 함수 컨텍스트이기도 합니다. 변수를 선언하지 않고 초기화하면 전역 컨텍스트에 자동으로 추가됩니다.
  참고: 변수를 선언하지 않고 초기화하는 것은 JavaScript 프로그래밍에서 매우 흔한 실수이며 많은 문제를 일으킬 수 있습니다. 이러한 이유로 독자는 변수를 초기화하기 전에 변수를 선언해야 합니다. 엄격 모드에서 변수를 선언하지 않고 초기화하면 오류가 발생합니다.注意：未经声明而初始化变量是JavaScript编程中一个非常常见的错误，会导致很多问题。为此，读者在初始化变量之前一定要先声明变量。在严格模式下，未经声明就初始化变量会报错
  var 声明会被拿到函数或全局作用域的顶部，位于作用域中所有代码之前。这个现象叫作“提升”（hoisting）。提升让同一作用域中的代码不必考虑变量是否已经声明就可以直接使用。可是在实践中，提升也会导致合法却奇怪的现象，即在变量声明之前使用变量。

• 使用 let 的块级作用域声明
  ES6新增的 let 关键字跟 var 很相似，但它的作用域是块级的，这也是JavaScript中的新概念。块级作用域由最近的一对包含花括号 {} 界定。换句话说， if 块、 while 块、 function块，甚至连单独的块也是 let 声明变量的作用域。

• 使用 const 的常量声明
  除了 let ，ES6同时还增加了 const 关键字。使用 const 声明的变量必须同时初始化为某个值。一经声明，在其生命周期的任何时候都不能再重新赋予新值

注意 开发实践表明，如果开发流程并不会因此而受很大影响，就应该尽可能地多使用 const 声明，除非确实需要一个将来会重新赋值的变量。这样可以从根本上保证提前发现重新赋值导致的bug var 선언은 범위의 모든 코드 이전에 함수 또는 전역 범위의 맨 위로 이동됩니다. 이러한 현상을 "호이스팅"이라고 합니다. 호이스팅을 사용하면 동일한 범위의 코드에서 변수가 선언되었는지 여부에 대해 걱정할 필요 없이 변수를 사용할 수 있습니다. 그러나 실제로 승격은 변수가 선언되기 전에 사용하는 합법적이지만 이상한 현상으로 이어질 수도 있습니다.

let 블록 수준 범위 선언 사용

1. Mark Sweep
   JavaScript에서 가장 일반적으로 사용되는 가비지 수집 전략은 mark-and-sweep입니다. 함수 내에서 변수를 선언하는 등 변수가 컨텍스트에 들어가면 해당 변수는 컨텍스트에 존재하는 것으로 표시됩니다. 컨텍스트에 없는 변수는 논리적으로 메모리를 해제해서는 안 됩니다. 컨텍스트의 코드가 실행되는 동안 사용될 수 있기 때문입니다. 변수가 컨텍스트를 벗어나면 컨텍스트를 벗어나는 것으로 표시됩니다.
   변수에 레이블을 지정하는 방법에는 여러 가지가 있습니다. 예를 들어, 변수가 컨텍스트에 들어가면 특정 비트를 반전하거나 "컨텍스트에 있음" 및 "컨텍스트에 없음"이라는 두 개의 변수 목록을 유지할 수 있으며 변수를 한 목록에서 다른 목록으로 이동할 수 있습니다. 마킹 프로세스의 구현은 중요하지 않으며 핵심은 전략입니다.
   가비지 수집 프로그램이 실행되면 메모리에 저장된 모든 변수를 표시합니다(표시하는 방법에는 여러 가지가 있음을 기억하세요). 그런 다음 컨텍스트의 모든 변수와 컨텍스트의 변수가 참조하는 변수에서 태그를 제거합니다. 이후에 표시된 변수는 컨텍스트의 어떤 변수에도 더 이상 액세스할 수 없기 때문에 삭제 대상입니다. 그런 다음 가비지 수집기는 메모리 정리를 수행하여 표시된 모든 값을 삭제하고 해당 메모리를 회수합니다.
   2008년까지 IE, Firefox, Opera, Chrome 및 Safari는 모두 JavaScript 구현에 마크업 정리(또는 그 변형)를 사용했으며 가비지 수집 실행 빈도만 다릅니다.

2. 참조 계산
   덜 일반적으로 사용되는 또 다른 가비지 수집 전략은 참조 계산입니다. 아이디어는 각 값에 대해 참조된 횟수를 기록하는 것입니다. 변수를 선언하고 참조 값을 할당하면 이 값의 참조 번호는 1입니다. 동일한 값이 다른 변수에 할당되면 참조 번호가 1 증가합니다. 마찬가지로, 값에 대한 참조를 보유하는 변수를 다른 값으로 덮어쓰면 참조 카운트가 1씩 감소합니다. 값에 대한 참조 수가 0이면 해당 값에 더 이상 액세스할 수 없으므로 해당 메모리를 안전하게 회수할 수 있음을 의미합니다. 가비지 수집 프로그램
   은 다음에 실행될 때 참조 번호 0으로 메모리를 해제합니다. 참조 카운팅은 Netscape Navigator 3.0에서 처음 채택되었지만 곧 순환 참조라는 심각한 문제에 직면했습니다. 소위 순환 참조는 객체 A가 객체 B를 가리키는 포인터를 갖고 객체 B도 객체 A를 참조한다는 것을 의미합니다.

• 변수를 null로 설정하면 실제로 변수와 이전에 참조된 값 간의 관계가 끊어집니다. 다음에 가비지 수집 프로그램이 실행되면 이 값은 삭제되고 메모리는 회수됩니다.
  이 문제를 해결하기 위해 IE9에서는 BOM과 DOM 개체를 모두 JavaScript 개체로 변경했습니다. 이는 또한 두 세트의 가비지 수집 알고리즘으로 인해 발생하는 문제를 방지하고 일반적인 메모리 누수를 제거합니다.

3. Memory Leak
   잘못 작성된 JavaScript는 미묘하고 유해한 메모리 누수로 인해 어려움을 겪을 수 있습니다. 메모리 누수는 메모리가 제한된 장치나 함수가 여러 번 호출되는 상황에서 큰 문제가 될 수 있습니다. JavaScript에서 대부분의 메모리 누수는 불합리한 참조로 인해 발생합니다.

待更新。。。

관련 무료 학습 권장 사항: javascript(동영상)

위 내용은 JavaScript 학습 노트 기록의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!