WIL 220717-220722

HaByungNo·2022년 7월 21일
0

Weekly I Learned

목록 보기
2/7
post-thumbnail

브랜든 아이크

해당 주제를 누르면 정리한 글로 이동합니다.

1. JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ?


2. JavaScript 객체와 불변성이란 ?


3. 호이스팅과 TDZ는 무엇일까 ?


알고리즘 문제

💡 : 풀었지만 눈여겨 볼만 한 문제
💡💡 : 풀이 했지만 모든 검사를 통과하지 못해 접근 방식을 달리 해야 하는 문제
💡💡💡 : 1시간이상 걸려도 못 푼 문제




🐤 실습 과제

  • 콘솔에 찍힐 b 값을 예상해보고, 어디에서 선언된 “b”가 몇번째 라인에서 호출한 console.log에 찍혔는지, 왜 그런지 설명해보세요.
    주석을 풀어보고 오류가 난다면 왜 오류가 나는 지 설명하고 오류를 수정해보세요.
let b = 1;     

function hi() {
    const a = 1;
    let b = 100;
    b++;
    console.log(a, b); 
}

// console.log(a);
console.log(b); 
hi();
console.log(b);  

이 상태에서 실행시키면 콘솔에는 다음과 같이 찍힐 것이다.

1 			
1, 101  
1      

1번째 줄의 1 은 예제 코드의 1행에서 선언된 b의 값이 찍힌것이고
2번째 줄의 1, 101 은 예제 코드의 4행에서 선언된 a 와 5행에서 선언된 b 에서 b++ 된 값이 찍힌것이며
마지막 3번째 줄 1 은 다시 예제코드 1행의 b값이 찍힌것디다.

만약 예제코드 10행 부분의 주석을 푼다면

console.log(a); //ReferenceError

ahi() 함수 안에서 선언된 지역변수 이므로 전역변수처럼 호출하면 ReferenceError 가 나게된다.

a 변수를 찍어보고 싶다면
console.log(a)hi() 함수 블럭 안으로 옮기거나, 10번째 줄 이전에 a 전역 변수 선언을 해주어야 한다.




JavaScript의 ES란?

맨 위 사진의 주인공인 브랜든 아이크 씨가 자바스크립트를 만들었을 땐 이름이 자바스크립트가 아니었다. 원래 이름은 LiveScript 였다. 하지만 당시 Java 의 막강한 인기에 편승하기 위해 이름을 "Javascript" 로 최종 결정했다고 한다.

Java에서 이름을 차용했지만, 사실 Java와는 다른 독자적인 언어다. 자바스크립트는 꾸준하게 발전하면서 ECMAScript 라는 고유한 명세를 갖춘 독립적인 언어가 되었다.

ECMAScript 가 바로 ES 이다. 여기서 ECMA 는 정보 통신에 대한 표준을 제정하는 비영리 표준화 기구를 말한다. ECMA 가 표준으로 제정한 것들 중엔 대표적으로 CD롬 볼륨과 파일 구조, C# 언어 규격, JSON 포맷 등등이 있다. 이처럼 일부 정보 통신 기술에 대한 표준을 이 단체에서 관리한다.

각각 표준들은 고유한 이름과 번호를 가지고 있는데, 지금 부터 살펴볼 건 ECMA-262 라는 표준에 대한 내용이다.

ECMA-262ECMA 인터내셔널에 의해 제정된 하나의 기술 규격의 이름으로, 범용 목적의 스크립트 언어에 대한 명세를 담고 있다. 다시말해, 스크립트 언어에 대한 표준을 정의한 규칙이라고 생각할 수 있다.

JavaScriptECMAScript 사양을 준수하는 범용 스크립팅 언어라고 보면 된다.

ES5/ES6 차이

ES5, ES6 등은 ECMAScript가 배포된 버전이다. 2015년 이후 매년 새로운 버전이 배포되고 있으며, 이전 명세의 문제 해결 및 간결한 문법 추가를 목표로 한다.

5판까지는 ECMAScript 5(=ES5)라는 명칭을 사용했지만, 6판부터는 빠른 배포주기를 반영하기 위해 숫자 대신 연도를 붙여 ECMAScript 2015(=ES6) 같은 명칭을 사용한다.

ECMAScript 2020은 많이들 ES5, ES6과 다르게 ES2020라고 부르는데, 특별한 이유는 없다. ES11라고 표기해도 되는데 배포 연도를 강조하기 위해 ES2020라고 부르는 것이다.

ES6에서 추가된 문법들이 기존의 문제들을 매우 깔끔하게 해결했으며, 가독성 및 유지 보수성을 보강하는 문법도 대거 추가됐기 때문이다.

ES6 표준 문법은 IE에서 지원되지 않지만, 트랜스파일러(Babel)를 이용해서 하위 문법을 따르는 코드로 쉽게 변경할 수 있기 때문에 호환성 문제도 없다.

ES6에서 추가된 기능으론 Promise, Class, Arrow function, let, const 등등이 있다.

profile
프라고

0개의 댓글