JavaScript(12)
-
200611 TIL :: Promise
## try catch와 throw try 블록 안에는 성공적으로 실행되었을 때를 포함해서, 일반적으로 실행되는 경우의 코드들이 들어 있다. try 블록 안에서 에러가 발생했을 경우에는 코드의 흐름이 catch문으로 넘어가게 된다. try 블록 안쪽에서 에러 처리를 해 줘야 겠다! 라고 생각되는 부분에 throw 문을 이용해서 임의로 에러를 발생시킨다. (커스텀 에러를 만든다?) 그러면 try 블록을 타고 내려오다가 throw를 만나면, 코드는 남은 try문을 쭉 실행하는 것이 아니라 catch문으로 바로 들어가 에러 처리를 해 준다. (코드의 흐름이 바뀐다) const getReq = function (url, callback) { try { http .get(url, function (res) { ...
2020.06.09 -
ES6 class, super
# psudoclassical instantation - ES6 class 키워드 등장 이전에 사용되던 방법 - 하나의 인스턴스에 여러 개의 생성자 함수를 연결할 때, prototype 연결을 해 주는 방법으로 Object.create( ) 로 상위 생성자함수의 prototype을 하위 생성자함수의 prototype이 가리키도록 했다. - 하지만 위와 같은 방식으로는 하위 생성자 함수와 인스턴스의 constructor 연결이 모호해지는 문제가 생긴다. - 그래서 하위 생성자함수의 prototype.constructor를 다시 하위 생성자함수로 지정해주는 과정을 거쳐야 했다. function Animal(name) { this.name = name; } Animal.prototype.eat = functi..
2020.05.08 -
Object Oriented Programming
# Object Oriented Programming (OOP) - 객체 지향 프로그래밍 - 객체 단위로 데이터와 기능을 묶어서 사용 - class라는 틀에 기본적인 속성, 기능 등을 정의하고 이를 기반으로 instance를 생성 (해당 기능을 가지는 객체를 찍어냄) ## OOP의 특징 - Encapsulation (캡슐화) : 속성, 메소드 등을 하나의 객체로 묶어 사용하기 때문에, 제 3자가 객체 내부의 데이터를 변조하는 것을 막아줌 - Inheritance (상속) : 상속을 통해 상위 객체가 가지고 있는 속성을 하위 객체가 이어받을 수 있음 - Abstraction (추상화) : 해당 객체에서 꼭 필요한 부분만 표현하고, 나머지 세부사항은 감춤 - Polymorphism (다형성) : 동일한 명령..
2020.05.08 -
Closure
* Closure - 외부함수의 변수들에 접근 가능한 내부함수를 의미 - 해당 내부함수는 함수 자체로 외부함수에서 리턴되는 형태 pass me를 풀 때, 피보나치 수를 구하는 문제를 이 클로저 함수를 이용해서 풀었지만 함수의 호출이 끝났을 때 함수와 관련된 내부 변수들이 제거되는 것으로 알고 있어서, makeFib 안의 num1, num2가 왜 계속 기억되는지 제대로 이해하지 못하고 일단 작동은 하니 pass me를 제출했었다. 이번에 해당 문제를 예시로 클로저에 대해 좀 더 자세히 알아보려고 한다. /* fn을 호출할 때마다 호출한 횟수 n에 해당하는 n번째의 피보나치 수를 출력 */ const makeFib = () => { let num1 = 0; // 첫번째 숫자 저장 let num2 = 1; /..
2020.04.28 -
이벤트 버블링과 캡쳐
* 이벤트 버블링 - 이벤트 발생시 그 상위 요소까지 전파되는 것을 말함 - 이벤트는 document의 맨 꼭대기까지 전파됨 ( bottom -> top 형태 ) const divs = document.querySelectorAll("div"); function logText(e) { console.log(this.classList.value); } divs.forEach(div => div.addEventListener("click", logText)); - 가장 바깥쪽 div를 클릭했을 때의 결과는: one - 가운데 div를 클릭했을 때의 결과는: two one - 가장 안쪽 div를 클릭했을 때의 결과는: three two one function logText(e) { e.stopPropagati..
2020.03.26 -
function method, this
* this : 함수 스코프 내에서 자동으로 설정되는 특수한 식별자로, 실행 컨텍스트의 구성 요소 중 하나 1. Global Reference : 기본적으로 window를 가리킴 2. Function Invocation : 기본적으로 window를 가리킴 // Global Reference console.log(this); // Window {parent: Window, opener: null, top: Window, length: 4, frames: Window, …} // Function Invocation function foo(){ console.log(this); } foo(); // Window {parent: Window, opener: null, top: Window, length: 4, ..
2020.03.18