Javascript 50

비동기처리란?

동기는 순차적으로 일을끝내는 방식이다. 비동기는 엄청 효율적으로 작동을 한다. 비동기는 쓰레드나 프로세스가 여럿이 돌고 있는거라는 뜻이다. 즉 멀티테스킹을 하는 코드를 짜는것이다. 궁금증: 자바스크립트는 쓰레드가 하나만 돌아간다고 배웠는데 어떻게 그런 비동기 작업이 되는것인가? 자바스크립트는 웹 브라우저나 Node.js의 자바스크립트 엔진에서 실행된다. 이 엔진에는 자바스크립트를 돌리는 하나의 쓰레드, 자바스크립트 함수 전용 특급 선로가 있다. 궁금증: 선로라면 먼저 들어간 게 먼저나오는 큐 형태인데, 함수는 나중에 넣은걸 먼저 꺼내는 스택으로 처리되는거 아닌가? 다른 포함 레벨의 함수들이 처리되는 순서는 역순이다. 하지만 같은 포함 레벨에서의 함수들은 순서대로 처리된다. 그래서 이해하기 쉽도록 같은 레..

Promise - finally, callback, 비동기 순차적

ex) fulfilled 되거나 rejected 된 후에 최종적으로 실행할 것이 있다면, .finally()를 설정하고, 함수를 인자로 넣는다. function p(){ return new Promise ((resolve, reject)=>{ /* pending */ setTimeout(()=>{ reject(new Error('bad')); /* fulfilled */ }, 1000); }); } p() .then((message)=>{ console.log('1000ms 후에 fullfiled 된다.', message); }) .catch((error)=>{ console.log('1000ms 후에 rejected 된다.', error); }) .finally(()=>{ console.log('end..

Promise - then & catch

비동기적인 상황에서 코드를 좀 더 명확하게 표현하고 실행하도록 만들 수 있다. 1. ES6 부터 Javascript의 표준 내장 객체로 추가 되었다. ES6 를 지원하는 브라우저나 Node.js 에서 전역에 있는 Promise 를 확인할 수 있다. 2. 생성자를 통해서 프로미스 객체를 만들 수 있다. 생성자의 인자로 executor 라는 함수를 이용한다. 3. executor 함수는 resolve 와 rejcect를 인자로 가진다. (resolve, reject) -> {...} resolve 와 reject는 함수이다. resolve(), reject() 4. 생성자를 통해서 프로미스 객체를 만드는 순간 pending(대기) 상태라고 한다. 5. executor 함수 인자 중 하나인 resolve 함수..

class, constructor

1-1 선언 방식 class A{} console.log(new A()); 1-2 class 표현식을 변수에 할당 const B = class {}; console.log(new B()); 1-3 선언적 방식이지만 호이스팅은 일어나지 않는다. new C(); class C{} -----------> 작동되지 않는다. constructor class A{} console.log(new A()); class B { constructor(){ console.log('constructor'); } } console.log(new B()); class C { constructor(name, age){ console.log('constructor', name, age); } } console.log(new C('M..

Javascript/객체 2021.01.26

Object

함수, 클래스 (틀) => 객체, 개체, object 생성자 함수로 객체 만들기 function 틀() {} => new 틀() function B(name, age){ console.log(name, age); } const b = new B(); const c = new B('nana', 21); console.log(B()); //출력 undefined undefined nana 21 undefined undefined undefined 객체에 속성 추가하기 property 값을 속성으로 넣기 function A(){ this.name = "Mark"; } const a = new A(); console.log(a); //출력 A {name: "Mark"} 함수를 속성으로 넣기 function B(..

Javascript/객체 2021.01.26

new 함수, 함수안에 함수, 함수인자

new 함수 function Person(name, age){ this.name = name; this.age = age; } const p = new Person('Mark', 37); console.log(p, p.name, p.age); const a = new Person('Anna', 26); console.log(a, a.name, a.age); //출력 Person {name: "Mark", age: 37} "Mark" 37 Person {name: "Anna", age: 26} "Anna" 26 함수안에 함수를 선언하여 리턴 function plus(base){ return function(num){ return base + num; } } const plus5 = plus(5); cons..

Javascript/기초 2021.01.26

선언적 function 과 익명 함수를 만들어 변수에 할당

다음과 같이 2가지 방법이 있고 출력값도 동일하게 나온다. 1. 선언적 function // 함수의 매개변수 // 함수를 호출할 때 값을 지정 function hello2(name){ console.log('hello2', name); } // 함수의 리턴 // 함수를 실행하면 얻어지는 값 function hello3(name){ return `hello3 ${name}`; } console.log(hello3('Mark')); console.log(hello2('Amy')); 출력값 hello3 Mark hello2 Amy 2. 익명 함수를 만들어 변수에 할당 const hello2 = function(name){ console.log('hello2', name); } const hello3 = fun..

Javascript/함수 2021.01.26

Data Types(자료형)

동적타입 (Dynamic Type Language) let whatever = 'Mark'; whatever = 34; whatever = true; 선언하는것에 따라 각각 타입이 달라지는 whatever변수이다. 이런것은 선언된 이름만 봤을때는 어떤 타입의 데이터인지 알 수 없다. 데이터타입 기본타입(Primitive values) 객체(Objects) Boolean Null Undefined Number String Symbol (ECMAScript 6 에 추가됨) --> 고유한값을 만들고싶을때 사용됨

Javascript/기초 2021.01.26

var & hoisting

아래 있는 선언을 끌어올리는 현상이다. 보통 함수에서 일어나는데 var도 이러한 현상이 일어난다. 다음코드가 잘 동작이 된다. age = 6; age++; console.log(age); var age; 또다른 호이스팅현상을 보여주겠다. console.log(name); name = "Mark"; console.log(name); var name; //출력값 undefined Mark console.log(name); name = "Mark"; console.log(name); var name = "Woongjae"; //출력값 undefined Mark 호이스팅현상이 확실히 일어난다고하면 두번 다 Woongjae가 출력이 되어야하는데 Woongjae는 전혀 출력이되지않는 특이한 현상이 일어난다. -->..

Javascript/기초 2021.01.26