자바스크립트

[33-js-concepts] 24. 컬렉션과 생성기 (Collections and Generators)

컬렉션과 생성기 (Collections and Generators) Iterable vs Iterator Iterable과 Iterator 모두 ES5에서 추가된 새로운 규약(protocol)이다. Iterable 반복 가능한 객체들을 말한다. 프로퍼티로 Symbol.iterator를 반드시 가져야 Iterable한 객체로 정의될 수 있다. Array나 Map 같은 컬렉션들은 기본적으로 Iterable한 객체로 설정되어 있으며 일반 Object는 가지고 있지 않다. String 같은 빌트인 객체도 Iterable한 객체로 설정되어 있다. Iterable한 객체들은 아래와 같은 연산이 가능하다. for..of 구문을 통한 객체 접근 ( for child of someIterableObj ) Spread 연..

[33-js-concepts] 21. 클로저 (Closures)

클로저가 뭐야? 함수와 함수가 선언된 어휘적 환경의 조합입니다. 함수 밖에서 선언된 변수를 함수 내부에서 사용할 때 클로저가 생성됩니다. function outer() { const name = 'leehyowon'; function inner() { console.log(name); } return inner; } const innerFunc = outer(); innerFunc(); 이제 var innerFunc = outer()를 통해서 inner 함수를 반환받게 되는데, 일반적으로 함수가 종료되면 메모리에서 소멸하기 때문에 아래와 같은 모습을 하게됩니다. 때문에 일반적으로, innerFunc를 호출해도 name에 대한 참조는 메모리에서 소멸하여 호출이 불가하게 됩니다. 하지만 클로저는 이러한(외부..

[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 과..