Today Hailie Learned

Async function는 비동기 코드를 아주 깔끔하게 작성하도록 돕는 함수이다. (Promise함수보다 더 깔끔!) Promise 위에 적용되기 때문에 Promise에 뿌리는 설탕이라고도 한다. 참고 **IE에서는 지원하지 않는다. ** async & await async 자체가 함수를 비동기 함수로 선언하는 키워드이다. 함수 앞에 async를 입력해서 함수를 비동기 함수로 선언하면, 함수는 자동으로 Promise를 반환한다. ➥ 빈 함수를 호출하면 undefined가 출력된다. ➥ 비어있는 async 함수를 호출하면 Promise가 출력된다. ➥ 비어있는 async 화살표 함수를 호출하면 Promise가 출력된다. ➥ async 화살표 함수를 호출하면 Promise가 리턴된다. Promise의 원리..

👇 우리가 콜백을 해야하는 이유 반복해야할때마다 같은 식을 여러번 써야한다. setTimeout(() => { document.body.style.backgroundColor = 'red'; }, 1000) setTimeout(() => { document.body.style.backgroundColor = 'orange'; }, 2000) setTimeout(() => { document.body.style.backgroundColor = 'yellow'; }, 3000) setTimeout(() => { document.body.style.backgroundColor = 'green'; }, 4000) setTimeout(() => { document.body.style.backgroundColor ..

Math.random() ⇒ 0 ~ 1 사이의 숫자를 랜덤으로 출력한다. (1미만) (소수점이하도 모두 출력) Math.random() * 10 ⇒ 0 ~ 10 사이의 숫자를 랜덤으로 출력한다. (10미만) (소수점이하도 모두 출력) Math.floor(Math.random() * 10) ⇒ 0 ~ 10 사이의 숫자를 랜덤으로 출력한다. (10미만) (정수만) Math.floor(Math.random() * 10) + 1 ⇒ 1 ~ 11 사이의 숫자를 랜덤으로 출력한다. (11미만) (정수만) **더 알아보기** Math.floor() 함수는 입력받은 숫자를 내림한 정수를 리턴하는 함수입니다. Math.ceil() 함수는 입력받은 숫자를 올림한 정수를 리턴하는 함수입니다. Math.round() 함수는 ..

class Person{ constructor(name, first, second){ this.name = name; this.first = first; this.second = second; } sum() { return this.first + this.second; } } class PersonPlus extends Person{ avg() { return (this.first + this.second) / 2; } } const kim = new PersonPlus('kim', 10, 20); console.log('kim.sum()',kim.sum()); console.log('kim.avg()',kim.avg()); // 출력값 kim.sum() 30 kim.avg() 15 👇 위 코드에서 P..

커링함수와 클로저의 차이에 대해 알아보았습니다. 커링함수가 클로저의 사용 사례 중 하나라고 말하는 엔지니어가 있는 반면, 클로저는 자바스크립트의 핵심 기능이고, 커링함수는 자바스크립트에 내장 지원되지 않기 때문에 완전히 다른 개념이라고 말하는 엔지니어가 있었습니다. 1. closure : 자바스크립트의 핵심 기능 중 하나입니다. 클로저는 외부 함수 범위와 외부 함수 외부에서 실행되는 경우에도 위의 모든 범위에 액세스할 수 있는 내부 함수입니다. 클로저를 언제 쓸까? 주로 정보를 은닉할 때 사용하고, 전역 변수의 사용을 억제하기 위해 사용합니다. function numbers(firstNum, secondNum) { let a = 'The result is'; return add(); } function ..

동기화 코드자 짜여진 순서대로 결과값이 도출된다. function waitSyns(ms) { var start = Date.now(); var now = start; while(now - start < ms ) { now = Date.now(); } } // 현재 시각과 시작 시각을 비교하며 ms 범위 내에서 무한 루프를 도는 blocking 함수입니다. function drink(person, coffee) { console.log(person + '는 ' + coffee + '를 마십니다'); } function orderCoffeeSync(coffee) { console.log(coffee + '가 접수되었습니다'); waitSyns(4000); return coffee; } let customer..

비동기란? 동시에 여러 작업을 해볼 수 있다! 자바스크립트는 단일 스레드 기반의 언어로 한 순간 하나의 작업만을 처리할 수 있다. 하지만 자바스크립트는 비 동기로 동작하기 때문에 단일 스레드에도 불구하고 동시에 많은 작업을 수행한다. => 비동기 => 주의할 점! 자바스크립트 언어 자체가 비동기 동작을 지원하는 것은 아니다. 비 동기로 동작하는 핵심요소는 자바스크립트 언어가 아니라 브라우저가 가지고 있다. 브라우저는 Web APIs, Event Table, Callback Queue, Event Loop 등으로 구성되며 자바스크립트 코드가 실행될 때 브라우저와의 동작은 아래 그림으로 표현할 수 있다. Web APIs: setTimeout이 Call Stack에 들어와 실행되면 Browser API인 ti..

forEach 함수와 for of // 배열에서 쓴다. const numbers = [1,2,3,4,5,6,7]; numbers.forEach(function(el) { console.log(el) }) // forEach와 for of 역할은 같다 for (let el of numbers) { console.log(el); } //출력 1 2 3 4 5 6 7 요즘에는 forEach를 잘 사용하지 않는다고 한다. 더 쉽고 간편한 for of가 생겼으니까!! for in // 객체에서 쓰인다. 객체 안의 모든 키를 출력한다. const hailie = { name: 'hailie', age:2, city:'hawaii' } for(key in hailie) { console.log(value); } //..

프로토타입 체인 - 자바스크립트는 특정 객체의 프로퍼티나 메소드에 접근시 객체 자신의 것 뿐 아니라 __proto__가 가리키는 링크를 따라서 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 접근 할 수 있다. 따라서, 특정 객체의 프로퍼티나 메소드 접근 시 만약 현제 객체의 해당 프로퍼티가 존재하지 않는다면 __proto__가 가리키는 링크를 따라 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례로 검색하는 것이 바로 프로토타입 체인이다. - 모든 프로토타입 체이닝의 종점은 Object.prototype 이다. - 하위 객체는 상위 객체의 프로퍼티나 메소드를 상속받는 것이 아니라 공유한다. 실습하면서 프로토타입 체인의 과정 이해하기! ( __proto__를 이용) let div..

JavaScript는 프로토타입(원형 객체) 기반 언어 → 객체를 상속하기 위해 프로토타입을 이용한다. 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있다. 프로토타입 체인에서 한 객체의 메소드와 속성들이 다른 객체로 복사되는 것이 아니고, 체인을 타고 올라가며 접근할 뿐이다. 상속 받는 멤버들은 prototype 속성에 정의되어 있다 Object.로 시작하는게 아니라, Object.prototype.로 시작한다. prototype 속성도 하나의 객체이며 프로토타입 체인을 통해 상속하고자 하는 속성과 메소드를 담아두는 버킷으로 주로 사용되는 객체이다. 그래서 Object.is(), Object.keys()등 prototype 버킷에 정의되지 않은 멤버..