Good boy Good boy

https://drive.google.com/file/d/1PtlmMjU4q3X2_TaoiSCurweWPZdj-5eg/view?usp=sharing

ES6+ 와 ES.NEXT의 최신 ECMAScript 사양을 사용하여 프로젝트를 진행하려면 최신 사양으로 작성된 코드를 경우에 따라 IE를 포함한 구형 브라우저에서 문제 없이 동작시키기 위한 개발 환경을 구축하는 것이 필요하다 대부분의 프로젝트가 모듈을 사용하므로 모듈 로더도 필요하다. ES6 모듈은 대부분의 모던 브라우저에서 사용할 수 있다 하지만 아직까지는 ESM보다는 모듈 로더를 사용하는 것이 일반적이다 IE를 포함한 구형 브라우저는 ESM을 지원하지 않는다 ESM을 사용하더라도 트랜스파일링이나 번들링이 필요한 것은 변함이 없다 ESM이 아직 지원하지 않는 기능이 있고 점차 해결되고는 있지만 아직 몇 가지 이슈가 존재한다 트랜스파일러인 Babel과 모듈 번들러인 Webpack을 이용하여 ES6+/E..

프로미스 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러 처리가 곤란하며 여러개의 비동기 처리를 한번에 처리하는 데도 있다 ES6에선 비동기 처리를 위한 또 다른 패턴으로 프로미스를 도입했다 비동기 처리를 위한 콜백 패턴의 단점 콜백 헬 비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료된다 즉 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료된다. 따라서 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결과를 외부로 반환하거나 상위 스코프의 변수에 할당하면 기대한 대로 동작하지 않는다 비동기 함수는 비동기 처리 ..

Set Set객체는 중복되지 않는 유일한 값들의 집합이다 Set 객체는 배열과 유사하지만 차이가 있다 이러한 Set 객체의 특성은 수학적 집합의 특성과 일치한다 Set 은 수학적 집합을 구현하기 위한 자료구조다 Set은 교집합 합집합 차집합 여집합 등을 구현할수 있다 Set 객체의 생성 Set 객체는 Set 생성자 함수로 생성한다 Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성된다 Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다 이때 이터러블의 중복된 값은 Set 객체에 요소로 저장되지 않는다 const set = new Set([1, 2, 3, 3]); console.log(set); //Set(3) {1, 2, 3} const set2 = new Set('h..

심벌이란 es6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다 심벌은 다른값과 중복되지 않는 유일무이한 값이다 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다 심빌값의 생성 symbol 함수 심벌 값은 Symbol 함수를 호출하여 생성한다 이때 생성된 심벌값은 노출되지 않아 확인할 수 없으며 다른값과 절대 중복되지 않는 값이다 const mySymbol = Symbol(); console.log(typeof mySymbol); //symbol console.log(mySymbol); //Symbol() 확인할수 없다 new 연산자와 함께 호출하지 않는다 new 연산자와 함께 생성자 함수 또는 클래스를 호출하면 객체가 생성되지만 심벌 값은 변경 불가능한 원시 ..

Number 생성자 함수 표준 빌트인 객체인 Number 객체는 생성자 함수 객체다. 그렇기에 new 연산자와 함께 호출하여 Number 인스턴스를 생성할 수 있다. Number 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면 [[NumberData]] 내부 슬롯에 0을 할당한 Number 래퍼 객체를 생성한다. Number 생성자 함수의 인수로 숫자를 전달하면서 new 연산자와 함께 호출하면 [[NumberData]] 내부 슬롯에 인수로 전달받은 숫자를 할당한 Number 래퍼 객체를 생성한다. Number 생성자 함수의 인수로 숫자가 아닌 값을 전달하면 인수를 숫자로 강제 변환한 후 [[NumberData]] 내부 슬롯에 변환된 숫자를 할당한 Number 래퍼 객체를 생성한다. 인수..

클로저 클로저는 자바스크립트 고유의 개념이 아니다 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어 (하스켈, 리스프, 얼랭, 스칼라) 사용되어 중요한 특성이다 클로저는 함수와 그 함수가 선언된 렉시컬 환경이다 자바스크립트가 렉시컬 스코프를 따르는 프로그래밍 언어이기 때문이다 렉시컬 스코프 렉시컬 스코프 자바스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다 이를 정적 스코프 렉시컬 스코프라 한다 함수 상위 스코프는 함수를 어디서 정의했느냐에 따라 결정된다. 함수를 어디서 호출하는지는 함수의 상위 스코프 결정에 어떠한 영향도 주지 못한다 즉 함수의 상위 스코프는 함수를 정의한 위치에 의해 정적으로 결정되고 변하지 않는다 렉시컬 환경의 외부 렉시컬 환..

20.1 strict mode function foo () { x = 10; //암묵적 전역 implicit global } foo(); console.log(x); 자바스크립트 엔진은 x변수가 어느곳에 선언되었는지 스코프 체인을 통해 검색한다 먼저 foo함수 스코프에서 변수 선언을 검색한다 실패 후 상위 스코프인 전역 스코프에서 변수 선언을 검색한다 전역 스코프에도 변수 선언이 존재하지 않기 때문에 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성한다 주의) 변수 선언이 존재하지 않아도 ReferenceError를 발생시키지 않는다 안정적인 코드생산과 오류를 줄이고 오류를 발생시키기 어려운 개발환경을 만들기 위해 ES5부터 strict mode가 추가되었다 eslint같은 린트 도구는 strict mod..