자바스크립트 (8) 썸네일형 리스트형 자바스크립트 실행컨텍스트#2 - 코드의 실행과 관리 | 코드 평가, 실행, 실행의 결과는 어떻게 관리되는가 실행 컨텍스트 실행 컨텍스트, 알아두면 좋은 이유 식별자와 값의 바인딩을 관리하는 방식 호이스팅 발생 이유 클로저 동작 방식 이벤트 핸들러와 비동기 처리의 동작 방식 등 실행 컨텍스트를 알면 자바스크립트의 동작 원리를 이해할 수 있다. 이번 포스팅에서는 이해하기 조금 어려운 용어들이 나온다. 만약 환경 레코드에 대해 더 자세히 알고 싶다면 이 포스팅을 참고하면 된다. 🧚♀️모던 자바스크립트 딥 다이브 23장과 ECMAscript 스펙 참고하여 작성. 실행 컨텍스트의 구성 실행 컨텍스트는 '코드 평가 state', 'Function', 'Realm', 'ScriptOrModule' 네 개의 State 컴포넌트로 구성된다. 코드 평가 state(code evaluation state): 실행컨텍스트의 코드.. 자바스크립트 실행컨텍스트#1 - 환경 레코드 | 변수의 저장과 참조 방식 실행 컨텍스트를 배우기 앞서, 실행 컨텍스트를 구성하는 컴포넌트 중 하나인 *렉시컬 환경의 '환경 레코드(Environment Record)'를 알아보자. *렉시컬 환경(Lexical Environment): 식별자와 값을 관리하고, 외부 상위 스코프에 대한 참조를 기록하는 데 사용하는 자료구조. 환경 레코드와 외부 렉시컬 환경 참조에 대한 정보로 구성되어 있다. 환경 레코드(Environment Record) 환경레코드란? 🧚♀️ Environment Record is a specification type used to define the association of Identifiers to specific variables and functions, based upon the lexical nest.. [Javascript] shallow copy, deep copy | 원시값과 객체의 copy 얕은 복사는 한 단계까지만 복사하고, 깊은 복사는 객체에 중첩된 객체까지 모두 복사한다. 얕은 복사를 하면 같은 객체를 참조함으로써 서로 영향을 주고, 깊은 복사는 별개의 값으로서 서로 영향을 주지 않는다. 이번 포스팅에서는 원시값과 객체의 특징을 알아보고 객체의 얇은 복사와 깊은 복사가 왜 이런 결과가 나오는지 다룬다. 원시값의 불변성 원시값(primitive)은 변경 불가능한 불변의 값이다. 원시값에는 String, Number, undefined, Boolean, Symbol, BigInt 6종류가 존재한다. 변수 변경 ≠ 원시값의 변경 변수 값이 변경되는 것을 원시값이 변경된다고 생각하면 안된다. 이전 포스팅에서 변수는 값을 담고 있는 메모리 공간 자체 또는 그 메모리 공간의 주소를 가리키는 식별.. Symbol을 사용하는 이유는 뭘까 | symbol usage ECMAScript로 표준화된 이후로 자바스크립트에는 string, number, boolean, null, undefined, object 6개의 데이터 타입이 있었다. 그리고 es6에서 새로운 데이터 타입 Symbol이 추가 되었다. symbol은 무엇이고 언제 사용하는 걸까? What is Symbol? 심볼, Symbol 심볼은 변경 불가능한 원시 타입의 값이며, 다른 값과 중복되지 않는 고유한 값이다. 심볼 값은 충돌 위험이 없는 오브젝트의 유일한 프로퍼티 키를 만들기 위해서 사용할 수 있다. 하위호환성을 유지하면서 표준을 확장한다든지, 고유한 상수값을 만드는 데 사용할 수 있다. const symbolA = Symbol('symbol') const symbolB = Symbol('symbol'.. 자바스크립트 범용화와 모듈 시스템 | ESM, CommonJS 모듈의 필요성 모듈은 기능에 따라 파일 별로 분리한 코드 조각을 말한다. 한 파일 내에 모든 코드를 관리한다면 변수나 함수가 중복되거나 다른 기능의 코드끼리 영향을 줄 수 있다. 따라서 기능 별로 코드를 분리해서 여러 파일로 나눈 뒤, 최종적으로 실행할 main 함수가 있는 파일에서 코드를 불러와 사용한다. 이때 분리된 파일끼리도 서로 영향이 없어야 한다. 예를 들어 A와 B 파일에서 전역변수 x를 선언했을 때 x가 덮어씌워지거나 하면 안된다. 따라서 *각 모듈은 자신만의 모듈 스코프를 가져야 한다. *스코프: 코드가 영향을 끼치는 범위 자바스크립트의 모듈 시스템 자바스크립트는 원래 웹페이지 내 보조 작업을 처리하기 위한 언어였다. 때문에 다른 프로그래밍 언어와 달리 모듈 시스템이 없다. 브라우저 내에서.. 변수와 표현식, 명령문 | Modern Javascript Deep Dive 4, 5장 책 Modern Javascript Deep Dive 4, 5장 내용 정리 변수란 무엇인가? 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체, 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. 컴퓨터는 사람의 뇌처럼 연산에 필요한 데이터를 메모리 공간에 저장해놓고 연산할 때마다 메모리 주소에 있는 값을 참조하여 사용한다. 그렇게 하려면 메모리 공간의 주소를 알고 있어야 하는데, 변수는 메모리 주소를 가리킨다. 변수는 즉 값의 위치를 가리키는 이름이다. 변수 이름 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다. 나라는 사람을 '홍두깨'라고 불러서 구분하는 것처럼 **메모리에 저장된 값을 식별할 수 있는 이름을 '변수 이름'**이라 한다. 그리고 **변수에 저장된 값을.. 자바스크립트의 역사 | EveryWhere Javascript가 되기까지 브라우저에서 동작하는 프로그래밍 언어였던 자바스크립트는 범용 프로그래밍 언어가 되기까지 ECMAScript, CommonJS 등 표준화를 거쳐왔다. 지금은 이 표준을 기반으로 자바스크립트는 어디에서나 사용할 수 있는 언어가 되었다. 자바스크립트의 역사를 보면 다른 언어들에 비해 프로그래밍 언어로서의 기반이 부족했던 자바스크립트가 범용 프로그래밍 언어로서의 자질을 갖추기 위해 어떤 과정을 거쳐왔는지 알 수 있다. Netscape와 Sun Microsystems가 Javascript 발표 1995년 넷스케이프(Netscape)는 동적인 웹 페이지를 만들기 위해서 브라우저에서 동작하는 가벼운 프로그래밍 언어를 만들기로 한다. 넷스케이프의 브랜든 아이크(Brendan Eich)가 스크립트 언어를 만들기 시작해 .. [실무레시피] 자바스크립트로 바코드 이미지 생성하기 | JsBarcode, bwip-js 오늘 요리해볼 실무 레시피는 '자바스크립트로 바코드 이미지 생성하기'입니다~ 👏 (두둥) PIN 번호와 같은 상품 번호로 바코드를 만들 수 있습니다. ISBN, QR code를 만드는 데도 응용하실 수 있습니다. github.com/metafloor/bwip-js github.com/lindell/JsBarcode lindell/JsBarcode Barcode generation library written in JavaScript that works in both the browser and on Node.js - lindell/JsBarcode github.com bwip-js는 사이즈가 너무 크니까 서버에서만 써주세요. 클라이언트에서 써야하신다면 JsBarcode를 쓰는 게 더 가볍고 간단합니다. .. 이전 1 다음
