programming

[33-js-concepts] 12. 비트 연산자, 형식화 배열, 버퍼 (Bitwise Operators, Type Arrays and Array Buffers)

https://jsperf.com/or-vs-floor/2 자바스크립트에서 모든 숫자는 부동 소수점형 숫자형으로 취급된다. 자바스크립트에서 비트연산을 할때는 정수형으로 변환한 후 연산을 실행한다. 이러한 특성 때문에 다른 네이티브 언어에서의 비트연산자에 비해 속도가 매우 느리다. 속도 상의 이유로 비트연산자를 고집할 필요는 없다. 비트 연산자의 종류 AND 연산::& OR 연산::| XOR 연산::^ NOT 연산::~ 왼쪽 쉬프트 연산:: 부호 버림 오른쪽 쉬프트 연산::>>> const AA =25; const BB =3; console.log(AA,"(",AA.toString(2),")",'&',BB,"(",BB.toString(2),")","=",(AA &BB),"(",(AA &BB).toStrin..

[33-js-concepts] 11. 자바스크립트 엔진 (JavaScript Engines)

11.1 자바스크립트 엔진이란 정의 JS 코드를 실행하는 프로그램 또는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어(Interpreter Language)를 말합니다. 조금 더 자세하게 말해 자바스크립트 코드를 마이크로프로세서가 이해할 수 있는 더 낮은 수준의 언어(기계어)로 변환해주는 역할을 담당합니다. 종류 SpiderMonkey: 최초의 자바스크립트 엔진으로 JS의 창시자인 브랜던 아이크가 넷스케이프 브라우저를 위해 개발했습니다. 현재 FireFox에서 사용합니다. Chakra: Microsoft가 개발한 엔진이며, Edge 브라우저에 사용되었습니다. JavaScript Core(JSC): 애플에서 개발했고 처음에는 WebKit 프레임워크를 위해 개발되었습니다. 최근에는 Safari..

[33-js-concepts] 10. setTimeout, setInterval and requestAnimationFrame

- setTimeout : 자바스크립트 개념에서 온 것이 아니고, 브라우저 그리고 nodeJS 개념에서 왔다. => 일정 시간이 지난 후에 기능을 메시지큐에 넣어주고 스택이 비게되면 자바스크립트가 실행한다. 일정 시간 후 바로 실행 될 수도 있고 콜스택에 함수가 많으면 천천히 실행 될 수도 있다. setTimeout(function(name) { }, 3000, param1); > 세번째 파라미터 부터는 콜백 함수의 인자값을 의미한다 // 이 경우 콜백함수를 setTimeout에 주는것이 아니라 자바스크립트가 직접 실행 하게 되므로 비추!! // 해서 2번처럼 해야한다. > 첫번째 매개변수에 함수명만 입력 1. setTimeout(console.log("Hello"), 10000); // 함수를 실행하지..

[33-js-concepts] 9. 메시지 큐와 이벤트 루프 (Message Queue and Event Loop)

메시지 큐 & 이벤트 루프 기계어를 제외한 모든 언어는 컴파일 과정이 필요하다. 프로그래머가 작성한 코드라고 불리는 문자열은 컴파일러에게 한 줄씩 읽혀서 나름의 규칙에 의해 분해되고, 트리 형태로 변환되고, 어셈블리어를 거쳐 기계가 알아먹을 수 있는 2진수로 변환되어야 비로소 작동 가능한 상태가 된다. 자바스크립트(이하 js)를 비롯한 스크립트언어는 다소 독특한 방식으로 컴파일을 진행하는데, 프로그램을 모두 읽어서 분석하는 과정을 거치는게 아니라, 코드를 한 줄씩 읽어 바로 실행시킨다. 이런 방식의 해석을 해 주는 머신을 인터프리터 라고 하는데, 보통 C나 C++ 같은 고급 언어로 작성 되어 있다. 인터프리터는 스크립트 언어로 작성된 코드를 분석하여 중간 단계의 고급 언어로 변환하여 최종적으로 기계어로 ..

[33-js-concepts] 8. IIFE, Modules, Namespaces

IIFE(Immediately Invoked Function Expressions) - 즉시 호출 함수 표현식 (function () { // Do fun stuff } )() 위의 예제가 가장 기본적인 형태입니다. 함수 선언(Declaration)과 표현(Expression) 함수 표현식은 선언과 동일한 문법을 가지고 단지 표현식에서는 함수명이 생략될 수 있다고만 기술하고 있습니다. 함수 선언(declaration)은 미리 자바 스크립트의 실행 컨텍스트(execution context)에 로딩 되어 있으므로 언제든지 호출할 수 있지만, 표현식(Expression)은 인터프리터가 해당 라인에 도달 하였을때만 실행이 됩니다. // [함수표현식] - 호이스팅관련 성공 a(); // success! funct..

[33-js-concepts] 7. 식(expression) vs 문(statement) | Expression vs Statement

[ Expression] : 하나의 값을 결과로 가지는 javascript code snippet primary expression this, indenitifier, literal this : evaluates to this value of the execution context - p36 literal - NullLiteral(null), BooleanLiteral(false, true), NumbericLiteral, StringLiteral 2. new expression ex) new newExpression - 1. evaluate newexpression - 2. call getValue(Result(1)) - 3. if type(result2) is not object, generater ..

[33-js-concepts] 6. 함수 범위, 블록 범위, 렉시컬 범위 (Function Scope, Block Scope and Lexical Scope)

스코프란? 바스크립트는 var 문법을 통해 변수를 선언할 수 있습니다. 또한 es2015부터 let과 const라는 문법으로도 선언할 수 있게 되었습니다. 모질라 문서에 따르면 var은 함수 스코프(function-level scoped), let과 const는 블록 스코프(block-level scoped)를 갖는다고 합니다. 스코프의 범위 전역스코프? 변수가 함수나 블록에 속해 있지 않음 함수 내부에 속해 있더라도 var로 지정자를 설정하지 않음 const,let 등으로 선언을 했는데 그 어떤 블록 안에도 들어가있지 않음 지역스코프? 변수가 함수에 속해 있고 var로 선언되어 있음 변수가 블록에 속해 있고 const나 let으로 선언되어 있다. 스코프 레벨 함수 스코프? 함수 내부에서 (var)로 변..

[33-js-concepts] 5. == vs. === vs. typeof

Falsy, Truthy 강제변환하면 false로 변하는 값입니다. JS에 있는 모든 값들은 Falsy 혹은 Truthy 한 값입니다. Falsy 값은 얼마 되지 않아서 외워두면 되고, 나머지는 Truthy한 값이라고 생각하면 됩니다. Falsy : undefined null false +0, -0, NaN "" Equality ( == , 동등 연산자 ) 느슨한 동등 비교로, 비교 대상의 타입이 다를 경우 강제 변환을 실시하여 타입 비교 후 결과를 반환한다. 추상 비교 알고리즘(Abstract Equality Comparison Algorithm)을 사용하며, 비교 후 같은지 결과를 true 혹은 false로 반환한다. 작동 알고리즘 먼저 비교대상이 되는 x와 y는 true와 false로 표현될 수 있..

[33-js-concepts] 4. 명시적 변환, 암시적 변환, Nominal, 구조화, 덕 타이핑 (Implicit, Explicit, Nominal, Structuring and Duck Typing)

데이터 타입 변환에는 두가지가 있다. 1.명시적 변환 : 개발자가 의도를 가지고 데이터타입을 변환시키는 것 * 타입을 변경하는 방법 -> Object(), Number(), String(), Boolean() 와 같은 함수를 이용 new 연산자가 없다면 타입을 변환하는 함수로서 사용된다. Number() != parseInt() 2.암시적 변환 : 자바스크립트 엔진이 필요에 따라 자동으로 데이터타입을 변환시키는 *산술연산자 - 더하기 + 연산자의 우선순위 : 숫자 < 문자 console.log(4 + "coen"); 결과 : coen console.log("coen" + 4); 결과 : coen4 console.log(4 + 5 + "coen"); 결과 : 9coen console.log(4 + "coe..

[33-js-concepts] 3. 값 타입과 참조 타입 (Value Types and Reference Types)

1.값 원시타입 ( boolean, null, undefind, string,number, symbol) 원시타입은 immutable data type 이기 때문에 ,값이 변경될 경우, 새로운 값을 할당을 받음. let myNumber=23; let newVar = myNumber; myNumber = myNumber+1; 2. 참조 객체타입 ( object) 메모리상의 실제 객체의 위치를 나타내는 주소값을 할당받음. let myArray =[]; [ let vs const : 변수할당이 나온 김에 번외 let sum=0; sum = 1+2+3+4+5; let numbers=[]; numbers.push(1) numbers.push(2) numbers.push(3) numbers.push(4) let 과..

[33-js-concepts] 2. 원시 자료형 (Primitive Types)

특징 JavaScript의 모든 Type은 원시타입(Primitive Type) 6개와 객체타입(Object Type) 1개로 총 7개 입니다. 원시타입은 불변적입니다. 원시 타입은 값(value)으로 저장, 객체들은 참조(reference)로 저장 됩니다. 어떠한 메소드를 가지고 있지 않습니다. Type을 알고 싶으면 typeof 를 쓰면 됩니다. typeof null === 'object' 인 이유 null은 원시타입 인데 객체 타입이라고 나타내고 있습니다. typeof가 검사하는 방식 1. undefined인지 검사 2. 해당 값이 객체 태그를 가졌는지 검사 3. 숫자, 문자, 참/거짓 검사 ※ null에 대한 명시적인 검사는 없습니다. 1. undefined 인지 검사 2. 해당 값이 객체 태그를..

[33-js-concepts] 1. 호출 스택 (Call Stack)

1.1 JavaScript Engine 자바스크립트란? JavaScript를 접하다 보면 이런 수식 문장을 종종 접할 수 있습니다. 싱글 스레드 기반으로 동작하는 인터프리터 언어 이벤트 루프를 기반으로 하는 싱글 스레드 Node.js 초창기에는 웹 페이지의 동작을 정의하는 Client-side 언어였으나, Node.js의 등장으로 Server-side 까지도 개발을 할 수 있게 되었습니다. 중요한 키워드는 싱글 스레드 방식으로 돌아가기 때문에 작업(Task)을 수행할 때 Stack, Queue, Heap과 같은 단일 콜 스택을 가집니다. Rendering Engine vs. JavaScript Engine Rendering Engine(Layout Engine)은 HTML과 CSS로 작성된 마크업 관련 ..