programming/javascript

[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] 18. Object.create and Object.assign

Object.create의 배경 - 자바스크립트의 상속 - 자바스크립트만으로 웹페이지의 동작을 구현하기 시작하면서 객체지향의 개념이 집중되게 되었다. - new를 이용한 상속 (prototype) function Person() { this.name = "anonymous"; this.job = "none"; this.sayHello = function () { alert("Hello, my name is " + this.name); }; } function Unikys() { this.name = "Unikys"; this.job = "Programmer"; } Unikys.prototype = new Person(); var unikys = new Unikys(); unikys.sayHello(); ..

[33-js-concepts] 16. new, 생성자, instanced, 인스턴스 (new, Constructor, instanced and Instances)

new 연산자 ? 동작원리 새로운 빈 객체 생성 this 를 새로 만들어진 객체에 바인딩한다. 새로 만들어진 객체에 __proto__ 라 불리는 property 를 더한다.(이것은 contructor 함수의 prototype 객체를의미한다.) 생성된 객체가 반환된다. first 라는 새로운 객체 생성 this 는 first object 에 바인딩 되므로 this에 대한 모든 참조는 first 를 가리킨다. __proto__ 가 추가 first.__proto__ 는 Student.prototype 을 가리킨다. 생성자 ? 객체를 만드는 역할을 하는 함수 자바스크립트의 생성자 함수는 new 와 함께 사용 할수도, 일반적인 함수처럼 사용될 수 도 있다. Prototype ? 자바스크립트의 모든 객체들은 pro..

[33-js-concepts] 15. this, call, apply and bind

this : 함수나 메서드를 호출하는 주체 ( 함수의 실행영역) - call, apply, bind : 함수의 실행영역을 지정 함수의 호출 방식 1. 함수이름(); 2. 함수이름.call / apply / bind ( 인자) 1의 방식이 기본적인 방식이며 함수의 호출 형태에 따라 this 가 변화! (예시) var obj = { a: 2, foo: foo }; var bar = obj.foo; var a = "나는야 전역"; bar(); function doFoo(fn) { fn(); } var obj = { a: 2, foo: foo }; var a = "나는야 전역"; doFoo(obj.foo); 2의 방식은 전달받은 인자가 this로 지정! ** 차이점 (요약) [call, apply ] : 함수를..

[33-js-concepts] 14. 팩토리와 클래스 (Factories and Classes)

자바스크립트는 프로토타입 기반(prototype-based) 객체지향 언어다. 비록 다른 객체지향 언어들과의 차이점에 대한 논쟁이 있긴 하지만, 자바스크립트는 강력한 객체지향 프로그래밍 능력을 지니고 있다. 프로토타입 기반 프로그래밍은 클래스가 필요없는(class-free) 객체지향 프로그래밍 스타일로 프로토타입 체인과 클로저 등으로 객체 지향 언어의 상속, 캡슐화(정보 은닉) 등의 개념을 구현할 수 있다. ES5에서는 생성자 함수와 프로토타입, 클로저를 사용하여 객체 지향 프로그래밍을 구현하였다. var Person = (function () { // Constructor function Person(name) { this._name = name; } // public method Person.prot..

[33-js-concepts] 13. DOM과 Layout Trees (DOM and Layout Trees)

Before DOM Introduction 웹 개발은 웹 브라우저와 밀접한 연관이 있습니다. 모든 서비스는 사실 웹 브라우저를 바탕으로 실행이 된다고 봐도 과언이 아닙니다. 이 브라우저와 관련된 객체 집합을 브라우저 객체 모델(Browser Object Model, BOM)이라고 하고, BOM을 이용해서 브라우저와 관련된 기능을 구성합니다. DOM은 이 BOM 중 하나입니다. DOM이란? DOM은 웹 브라우저로부터 HTML, XML을 표현하기 위한 인터페이스를 제공합니다. 이러한 인터페이스는 웹의 구조나 스타일을 조작할 수 있게 도와줍니다. 여기서 DOM은 문서 객체 모델(Document Object Model)의 약자입니다. 여기서 Model은 문서 객체를 '인식하는 방식' 을 의미합니다. DOM에 대..

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