sharingStorage

null과 undefined의 차이는 이미 알고있었지만 현재 진행하고있는 ASAP(최적의 회의시간 도출 서비스)에 대한 코드리뷰를 진행하던 중 팀원이 string타입인 시작시간을 undefined로 초기화하면 안되는 이유에 대해 물어보았을 때 설명하면서 내 지식에 공백이 있음을 느꼈다.그래서 undefined와 null을 deep dive해보고 그 두개를 정확히 구분하지 않았을 때 발생하는 side Effect에 대해서 고민해보는 시간을 가져보려고 한다. null과 undefined를 한줄 요약하면개발자가 의도적으로 "값이 없음"을 나타내기 위해 할당하는 값은 null값이 초기화되지 않음을 자바스크립트 엔진이 표현한 값은 undefined이다. MDN이 말하는 null과 undefined일단 본인이 자명..

크롬, 사파리 파이어폭스, 엣지 같은 에버그린 브라우저의 ES6 지원율은 약 98%지만 IE 11의 지원율은 약 11%다. 그리고 매년 새롭게 도입되는 ES6이상의 버전과 제안 단계에 있는 ES제안 사양은 브라우저에 따라 지원율이 제각각이다. 따라서 ES6+와 ES.NEXT의 최신 사양을 사용하여 프로젝트를 진행하려면 최신 사양으로 작성된 코드를 경우에 따라 IE를 포함한 구형 브라우저에서 문제 없이 동작시키기 위한 개발 환경을 구축하는 것이 필요한다. 또한 대부분의 프로젝트가 모듈을 사용하므로 모듈 로더도 필요하다. ES6모듈은 대부분의 브라우저에서 사용가능하지만 다음과 같은 이유로 아직 별도의 모듈 로더를 사용하는 것이 일반적이다 IE를 포함한 구형 브라우저는 ESM을 지원하지 않는다. ESM을 사용..

48.1 모듈의 일반적인 의미 모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. 이때 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야한다. 자신만의 파일 스코프를 갖는 모듈 자산 (모듈에 포함되어있는 변수, 함수, 객체 등)은 기본적으로 비공개 상태이다. 다시말해 모든 자산은 캡슐화 되어 다른 모듈에서 접근 할 수 없다. 즉 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다. 모듈은 애플리케이션이나 다른 모듈에 의해 재사용되어야 의미가 있다. 따라서 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택정 공개가 가능하다. 이를 export 라고한다. 공개된 모듈의 자산은 다른 모..

41.1 호출 스케줄링 함수를 명시적으로 호출하면 함수가 즉시 실행된다. 만약 일정 시간이 경과된 이후 함수가 호출되도록 예약하려면 타이머 함수를 사용하면 된다. 이를 호출 스케줄링이라 한다. 자바스크립트는 타이머를 생성할 수 있는 타이머 함수 setTimeout과 setInterval, 타이머를 제거할 수 있는 타이머 함수 clearTimeout과 clearInterval을 제공한다. 타이머 함수는 호스트객체이다. 타이머 함수 setTimeout과 setInterval은 모두 일정 시간이 경과된 이후 콜백 함수가 호출되도록 타이머를 생성한다. 다시 말해 타이머 함수가 생성한 타이머가 만료되면 콜백함수가 호출된다. setTimeout 함수가 생성한 타이머는 단 한번 동작하고 setInterval함수가 생..

40.1 이벤트 드리븐 프로그래밍 브라우저는 처리해야할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다. 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러 라 하고 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 한다. 프로그램의 흐름을 이벤트 중심으로 제어하는프로그래밍 방식을 이벤트 드리븐 프로그래밍이라한다. 40.2 이벤트 타입 40.2.1 마우스 이벤트 이벤트 타입은 이벤트의 종류를 나타내는 문자열이다. 다음에 소개하는 이벤트 타입은 사용빈도가 높은 이벤트다. click - 마우스 버튼 클릭시 dbclick - 마우스 더블 클릭 mousedown - 마우스 버튼 눌렀을 때 mouseup - 누르고 있는 마우스 놓았을 때 mousemove - 마우..

디스트럭처링 할당 디스트럭처링 할당은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열과 같은 이터러블 객체 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다. 36.1 배열 디스트럭처링 할당 다음은 ES5와 ES6에서 구조화된 배열을 디스트럭처링하여 1개 이상 변수에 할당하는 방법이다. 배열 디스트럭처링 할당을 위해서는 할당 연산자 왼쪽에 값을 할당받을 변수를 선언해야한다. 이때 변수를 배열 리터럴 형태로 선언한다. 배열 디스트럭처링 할당의 기준은 배열의 인덱스다. 순서대로 할당되며 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없다. 배열 디스트럭처링 할당을 위해 변수..

spread 문법 ES6에서 도입된 스프레드 문법 ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션, arguments 와 같이 for ... of 문으로 순회할 수 있는 이터러블에 한정된다. 스프레드 문법의 결과는 값이 아니다. 따라서 결과를 변수에 할당할 수 없고 다음과 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용가능하다. 함수 호출문의 인수 목록 배열 리터럴의 요소 목록 객체 리터럴의 프로퍼티 목록 35.1 함수 호출문의 인수 목록에서 사용하는 경우 Math.max 메서드의 인수로 배열을 전달할 때 스프레드 문법 사용시 간결하고 가독성이 더 좋다. 스프..

34.1 이터레이션 프로토콜 ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다. ES6이전에 다양한 방법으로 순회할 수 있었지만 ES6에선 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for...of, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화했다. 이터레이션 프로토콜에는 이터러블 프로토콜과 이터레이터 프로토콜이있다. 이터러블 프로토콜 Well-kwown Symbol인 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속 받은 Symbol.iterator메서드를 호출하면 이터레이터 프로토콜을 준수한 이..

33.1 심벌이란? 심벌은 ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 심벌은 다른 값과 중복되지 않는 유일무이한 값이다. 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다. 33.2 심벌 값의 생성 심벌값은 Symbol 함수를 호출하여 생성해야한다. 이 때 생성된 심벌 값은 외부로 노출되지 않아 확인할 수 없다. Symbol 함수에는 선택적으로 문자열을 인수로 전달할 수 있다. 이 문자열은 심벌 값에 대한 설명으로 디버깅 용도로만 사용되고 심벌 값 생성에 어떠한 영향도 주지 않는다. 심벌 값은 암묵적으로 문자열이나 숫자 타입으론 변환되지 않고 불리언 타입으론 암묵적 타입 변환이 가능하다. 33.2.2 Symbol.for / Symbol.keyFor..

32.1 String 생성자 함수 표준 빌트인 객체인 String 객체는 생성자 함수 객체다. 따라서 new 연산자와 함께 호출하여 String 인스턴스를 생성할 수 있다. String 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면 [[StringData]] 내부 슬롯에 빈 문자열을 할당한 String 래퍼 객체를 생성한다. String 생성자 함수에 인수를 전달하면서 호출하면 전달받은 문자열을 할당한 String 래퍼 객체를 생성한다. String 래퍼 객체는 배열과 마찬가지로 length와 인덱스를 나타내는 숫자 형식의 문자열을 프로퍼티 키로, 각 문자를 프로퍼티 값으로 갖는 유사 배열 객체 이면서 이터러블이다. String 생성자 함수의 인수로 문자열이 아닌 값을 전달하면 문자열..