ECMAScript의 이해

다양한 도구와 프레임워크의 홍수 속에서 각자 자신만의 고유한 장점을 앞다투어 내세우고 있지만, 그 중에 살아남는 것은 극히 일부일 수밖에 없다. 생태계의 다변화로 이어질 수 있는 이러한 현실을 타파하려는 움직임으로 '<a style="color: #1cba8c;" href="https://js.foundation/" target="_top" class="ke-link">JavaScript 재단(JS Foundation)</a>'이 등장했다(사실 JS Foundation은 jQuery Foundation의 새 이름이기도 하다).ECMA스크립트(ECMAScript)는 Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어다.  <div class="figure-img" data-ke-type="image" data-ke-style="alignLeft" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/ygGb/910cba3b6807f1daf896d889574ae3ce7e25c9e0" class="txc-image" width="349" height="173" data-img-src="https://t1.daumcdn.net/cafeattach/ygGb/910cba3b6807f1daf896d889574ae3ce7e25c9e0" data-origin-width="1128" data-origin-height="560"></div> ECMAScript<a href="https://www.w3schools.com/js/js_es6.asp" target="_blank" class="ke-link">https://www.w3schools.com/js/js_es6.asp</a>ECMAScript 2022 살펴보기 :  <a href="https://yozm.wishket.com/magazine/detail/1570/" target="_blank" class="ke-link">https://yozm.wishket.com/magazine/detail/1570/</a> JavaScript<a href="https://ko.javascript.info/" target="_blank" class="ke-link">https://ko.javascript.info/</a><a href="https://ko.w3hmong.com/js/js_versions.htm" target="_blank" class="ke-link">https://ko.w3hmong.com/js/js_versions.htm</a><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript" target="_blank" class="ke-link">https://developer.mozilla.org/ko/docs/Web/JavaScript</a><a href="https://ko.javascript.info/async" target="_blank" class="ke-link">https://ko.javascript.info/async</a><div class="figure-open" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="website" data-og-title="프라미스와 async, await" data-og-description="" data-og-host="ko.javascript.info" data-og-source-url="https://ko.javascript.info/async" data-og-url="https://ko.javascript.info/async" data-og-image="https://scrap.kakaocdn.net/dn/ZxgSk/hyPNTjhNCF/JsNYikkYCnAeyltlBRkG31/img.png?width=1200&height=630&face=0_0_1200_630,https://scrap.kakaocdn.net/dn/tl8yb/hyPOQeceaa/WaGyvTbr5Rjm8lvKKZlGMk/img.png?width=512&height=512&face=0_0_512_512"><a href="https://ko.javascript.info/async" target="_blank" data-source-url="https://ko.javascript.info/async"><div class="og-image"><img src="https://scrap.kakaocdn.net/dn/ZxgSk/hyPNTjhNCF/JsNYikkYCnAeyltlBRkG31/img.png?width=1200&height=630&face=0_0_1200_630,https://scrap.kakaocdn.net/dn/tl8yb/hyPOQeceaa/WaGyvTbr5Rjm8lvKKZlGMk/img.png?width=512&height=512&face=0_0_512_512" alt="" xxxxonerror="this.src="//img1.kakaocdn.net/thumb/C200x200/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fcafe_image%2Fcafe_meta_image_190529.png""></div><div class="og-text">프라미스와 async, awaitko.javascript.info</div></a></div>  참고 : ECMA6, ECMA2015 ...<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body>js test (ECMA6)  <script type="text/javascript">'use strict';   /*Strict Mode의 장점 - 흔히 발생하는 코딩 실수를 잡아내서 예외를 발생 시킵니다. - 상대적으로 안전하지 않은 액션이 발생하는 것을 방지합니다.  - 정확하게 고려되지 않은 기능들을 비활성화 시킵니다.*/ var a = 10;    a = 1;console.log('a:' + a); let b = 10;b = 2;console.log('b:' + b); const c = 10;// c = 3;  새로운 값으로 치환 불가console.log('c:' + c); let sport = '축구';try{let sport = '야구';console.log(sport);} catch(e){};console.log(sport); const SPORTS = "축구"; try { SPORTS = "농구";} catch (e) { console.log("const 재할당 불가");} console.log("화살표 함수------------");var es1 = function(one , two){ return one + two; }var sum = es1(1 , 2); console.log(sum);  let es2 = (one, two) => { return one + two; }let result = es2(1 , 2); console .log(result);  console.log('화살표 함수에서 함수 블록을 사용하지 않고 한 줄에 작성');let total = (one, two) => one + two; let tot = total(1 , 2); console.log(tot); </script></body></html>  "옵셔널 체이닝의 등장"?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다. 옵셔널 체이닝 문법 ?.은 세 가지 형태로 사용할 수 있다.obj?.prop      – obj가 존재하면 obj.prop을 반환하고, 그렇지 않으면 undefined를 반환함obj?.[prop]     – obj가 존재하면 obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환함obj?.method() – obj가 존재하면 obj.method()를 호출하고, 그렇지 않으면 undefined를 반환함 옵셔널 체이닝 문법은 꽤 직관적이고 사용하기도 쉽다. ?. 왼쪽 평가 대상이 null이나 undefined인지 확인하고 null이나 undefined가 아니라면 평가를 계속 진행한다.?.를 계속 연결해서 체인을 만들면 중첩 프로퍼티들에 안전하게 접근할 수 있다.?.은 ?.왼쪽 평가대상이 없어도 괜찮은 경우에만 선택적으로 사용.예)let user1 = {  firstName: "Violet"}; let user2 = null; // user2는 권한이 없는 사용자라고 가정해보자.let key = "firstName"; console.log( user1.firstName );  // Violetconsole.log( user1?.[key] );    // Violetconsole.log( user2?.[key] );    // undefined  delete user1?.firstName;       // user1이 있으면 user.firstName을 삭제. console.log( user1?.[key] );    // undefined -- 단락 평가 --?.는 왼쪽 평가대상에 값이 없으면 즉시 평가를 멈춘다. 이런 평가 방법을 단락 평가(short-circuit)라고 부른다.그렇기 때문에 함수 호출을 비롯한 ?. 오른쪽에 있는 부가 동작은 ?.의 평가가 멈췄을 때 더는 일어나지 않는다.예)let user = null;let x = 0;user?.sayHi(x++); // 아무 일도 일어나지 않는다. console.log(x);    // 0, x는 증가하지 않는다