Today Hailie Learned

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 버킷에 정의되지 않은 멤버..

객체 지향 프로그래밍 vs. 절차 지향 프로그래밍 절차 지향 프로그래밍 = 단순히 별개의 변수와 함수로 순차적으로 작동 절차적 언어 = 순차적인 명령의 조합 ex) 초기의 C, 포트란 객체 지향 프로그래밍 = 데이터의 접근, 데이터의 처리 과정에서 대한 모형을 만들어낸다. ('클래스'라는 데이터 모델의 청사진을 사용해서 코드를 작성한다. ) 그래서 데이터와 기능이 별개로 취급되지 않고, 한 번에 묶여서 처리할 수 있게 된다. // 메서드와 속성이 존재한다. 현대 언어들은 대부분 객체 지향의 특징을 가지고 있다. OOP는 프로그램 설계 철학이다. OOP의 모든 것은 '객체'로 그룹화된다. // 이 객체는 한번 만들고 나면, 메모리상에서 반환되기 전까지 객체 내의 모든 것이 유지된다. OOP의 재사용성을 얻..

객체 지향 프로그래밍 (OOP; Object-oriented programming)= 데이터와 기능을 한 곳에 묶어서 처리한다. 속성과 메서드가 하나의 '객체'라는 개념에 포함되며, 이는 js 내장 타입인 object와는 다르게, 클래스라는 이름으로 부른다. 메서드 호출하는 방법 // 화살표 함수를 쓰지 않는다. ** 화살표 함수 ** this나 super에 대한 바인딩이 없다. 메서드로 사용될 수 없다. new.target 키워드가 없다. 모듈화란? 코드의 재활용성을 높이고, 유지보수를 쉽게 할 수 있는 다양한 기법들이 사용된다. ==> 그 중 하나가 코드를 여러개의 파일로 분리하는 것이다. (모듈화) 1. 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다. 2. 코드를 개선..

일급객체 변수에 할당 가능 // (함수 표현식 & 함수 선언식 모두 가능) 다른 함수의 전달인자로 전달 가능 // 콜백함수 = 함수에 인자로 전달되는 함수. 다른 함수의 결과로서 리턴 가능 (함수가 일급객체이기 때문에 클로져도 사용가능한거였다. ) => 문자열, 숫자 같은 다른 데이터처럼 사용 가능! ==> js에서 함수는 일급객체!! 커링함수 = 함수를 리턴하는 함수. 고차함수 함수를 변수에 할당할 수 있기 때문에, 함수를 배열의 요소나 객체의 속성값으로 저장할 수 있다. 함수가 일급객체라서 고차함수로 활용 가능한거다! 함수를 전달인자로 받는 함수 함수를 리턴하는 함수 콜백함수 비동기에서 콜백함수가 매우 중요하다. 커링함수 커링함수때문에 클로저가 나온거다. 거의 같다고 말할 수 있다. 배열 내장 매서드..