JavaScript40 Symbol Symbol 심벌은 데이터의 타입이다. ES6에서 도입된 데이터 타입으로 변경 불가능한 원시 타입이다. 심벌 값은 다른 값과 중복되지 않는 유일무이한 값이다. 마치 Java의 UUID로 생성하는 random 한 숫자이다. Symbol의 생성 Symbol 값은 Symbol의 함수를 호출하여 생성한다. 자바스크립트의 문자열, 숫자, 불리언, undefined, null의 타입 값은 리터럴 표기법으로 값을 생성할 수 있지만, 심벌 값은 함수를 호출해야 한다. 이때 생성되는 유일무이한 심벌의 값은 외부로 노출되지 않아 확인할 수 없으며, 다른 값과 절대 중복되지 않는다. 함수로 생성한다고 해서 생성자 함수로 객체를 생성하는 것처럼 보이지만 Symbol함수는 다른 String, Number... 등의 생성자 함수.. 2022. 1. 16. JS의 부정확한 계산 JavaScript의 숫자는 IEEE 754 표준에 따라 저장되는 모두 부동 소수점입니다. 이 표준에는 여러 형식이 있습니다. 이 중 자바스크립트는 binary64 또는 double percision을 사용합니다. binary64는 숫자를 64비트의 이진 형식으로 저장됩니다. 숫자에 경우에는 비트 0~51까지 52비트를 사용하며, 지수는 52~62까지의 11비트를 부호는 마지막 63번째 비트를 사용합니다. 부호의 sign 비트는 0이면 숫자가 양수이고 그렇지 않으면 음수를 나타냅니다. 대략적으로 fraction(분수)는 숫자의 자릿수를 포함하는 반면 지수는 소수점이 어디 위치하는지를 표현합니다. 자바스크립트는 숫자를내부적으로 바이너리로 저장하지만 기본 출력은 십진수입니다. sign(부호) (1 bit) .. 2021. 12. 3. export, import export와 import 지시자는 다양한 방식으로 활용되기 때문에 다양한 사용법이 존재합니다. 1. 선언부 앞에 export 붙이기. 변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능합니다. export let arr = [1,2,3,4,5]; export const NOT_CHANGE = 'NC'; export class User{ constructor(this){ this.name = name; } } 클래스나 함수 선언 시, 선운부 앞에 export를 붙인다고 해서 함수 선언 방식이 선언문에서 표현식으로 변경되지 않습니다. 그렇기 때문에 자바스크립트 스타일 가이드에서는 함수나 클래스 선언 끝에 세미콜론을 붙이지 말라고 권유합니다. 따라서 export class, ex.. 2021. 11. 28. Prototype 자바스크립트는 클래스 기반 객체지향 프로그래밍 언어와 달리 프로토타입 기반 객체지향 프로그래밍 언어이다. 클래스 기반 객체지향 프로그래밍 언어는 객체 생성 이전에 클래스를 정의하고 이를 통해 객체를 생성한다. 하지만 프로토타입 기반 객체지향 프로그래밍 언어는 클래스 없이도 객체를 생성할 수 있다. 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 객체지향의 상속 개념과 같이 부모 객체의 프로퍼티 및 메서드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 Prototype 객체라고 한다. 프로토타입 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용한다. 자바스크립트의 모든 객체는 [[Prototype]]이라는 internal.. 2021. 11. 28. JavaScript Execution Context FeeL 운 좋게 포인트 30만 원에 선정되어서 그 돈으로 읽고 싶던 책을 구매할 예정이다. 내가 현재 자주 접하는 자바스크립트와, 자바의 동작 방식 및 코어 개념을 좀 더 알고 싶어서 모던 자바스크립트, 코어 자바스크립트의 책을 읽기 전 사전 공부하는 목적으로 한번 전체적인 그림을 보려고 한다. 실행 콘텍스트(Execution Context)는 scope, hoisting, this, function 등의 동작 개념을 포괄하고 있는 자바스크립트의 핵심원리로 써 학습하기에 구성이 상당히 복잡한 편에 속한다. 실행 콘텍스트는 자바스크립트 스펙을 위한 메커니즘이라 그렇기도 하다. 하나씩 접근하면서 각 부분을 알아보자. Execution Context code evaluation state Function R.. 2021. 11. 27. Number Property 1. Number.EPSILON (ES6) 앱실론은 JavaScript에서 표현할 수 있는 가장 작은 수이다. 임의의 수와 그 수보다 큰 수 중 가장 작은 수와의 차이와 같다. Number.EPSILON은 약 2.2204460492503130808472633361816 E-16 또는 $2^{-52}$이다. 부동소수점 (실수를 컴퓨터상에서 표현할 때 소수점의 위치를 고정하지 않고 그 위치를 나타내는 수를 따로 표기하는 것으로, 유호숫자를 나타내는 가수와 소수점의 위치를 풀이하는 지수로 나누어 표현한다.) 산술 연산 비교는 정확한 값을 기대하기 어렵다. 정수는 2진법으로 오차없이 저장이 가능한 반면 부동소수점을 표현하는 가장 표준인 IEEE 754 ( 전기 전자 기술자 협회에서 개발한 표준 부동소수점 방식).. 2021. 11. 22. 구조 분해 할당 개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 존재합니다. 이때 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생깁니다. 이럴 때 객체나 배열을 변수로 분해할 수 있게 해주는 특별한 문법인 구조 분해 할당(destructuring assigment)을 사용할 수 있습니다. 이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 구조 분해(destructuring)는 매우 매력적입니다. 배열 분해 let arr = [ 'sungil', 'yu']; // 구조 분해 할당을 이용해, firstName, subName에 arr[0], arr[1] 을 할당하였습니다. let [ firstName, subName ] = arr; let [firstName, subNa.. 2021. 10. 23. JS module 자바스크립트로 어느 정도 규모가 있는 애플리케이션을 만들다 보면 자연스레 용도에 맞게 자바스크립트의 파일들이 분리되어집니다. 이렇게 분리된 파일을 각각 모듈(module)이라고 부르는데, 모듈은 대개 클래스 하나 혹은 다중의 함수들로 구성된 라이브러리로 구성됩니다. 이전에야 자바스크립트는 단순히 웹을 역동적으로 만들어주는 역할만으로 그쳤기에 module이라는 개념자체가 필요 없었을 것입니다. 하지만 자바스크립트의 크기가 점진적으로 늘어나고, 기능도 복잡해짐에 따라 자바스크립트 커뮤니티에는 모듈을 호출하거나, 모듈로 분리되는 다양한 시도를 했습니다. 이러한 시도는 다음과 같은 모듈 시스템으로 이어졌습니다. AMD – 가장 오래된 모듈 시스템 중 하나로 require.js라는 라이브러리를 통해 처음 개발되었.. 2021. 10. 23. Fetch API Fetch basic concepts Fetch는 네트워크 통신을 포함한 리소를 가지고 오기 위한 인터페이스를 제공해주는 새로운 API입니다. Fetch의 핵심은 인터페이스의 추상화입니다. HTTP request, response, Headers, Body의 Payload, 그리고 비동기 리소스의 Request의 초기화를 위한 global fetch 메서드가 이 대상입니다. 각 네트워크 통신을 위한 각각의 객체들을 추상화하여, 각각의 객체를 추상한 후 fetch 인터페이스를 통하여, ajax의 기능 제공. HTTP의 주요 컴포넌트가 자바스크립트 오브젝트로써 추상화되어 있기 때문에, 다른 API에서 이러한 기능을 사용하게 쉽게 해 줄 수 있습니다. 예를 들면 Service Worker가 Fetch를 사용하.. 2021. 10. 17. Fetch API Response request, response객체를 활용할 수 있는 fetch API에서 Response객체가 어떻게 구성되어 있는지 알아보자. Fetch API의 Response 인터페이스는 요청에 대한 응답을 나타냅니다. 생성자를 통해 Response객체를 생성할 수 있지만, Response는 여러 API 작업의 결과로 Response객체가 반환될 가능성이 더 높습니다. 속성 및 메서드 설명 Response.body ReadableStream의 내용 Response.headers 응답 Headers와 관련된 객체입니다. Response.ok 응답이 200, 성공했는지 여부를 나타내는 boolean 입니다. Response.redirected 이 속성은 Response의 응답이 리다이렉션된 요청의 결과인지 여부를 나.. 2021. 10. 16. 이전 1 2 3 4 다음
