concept/javascript
-
콜백 때려잡기concept/javascript 2020. 6. 26. 23:14
이해한 것 같다가도 헷갈리는 콜백 다시 정리하기 콜백을 사용한 예시 var users = ['Minho', 'Oana', 'Ben']; function addUser(username, callback) { setTimeout(()=> { users.push(username); callback(); }, 5000); } function getUsers() { setTimeout(()=> { console.log(users); }, 5000); } // First add user to database then execute getUsers after user has been added. addUser("Ryan", getUsers); // addUser("Ryan", getUsers()); // 이 때 중요..
-
프로미스 기초concept/javascript 2020. 6. 26. 03:53
let users = ['oana', 'mino', 'ben', 'wil'] function myPromise(sec){ return new Promise((resolve, reject) => { setTimeout(() => { if(users){ resolve(users) } else { reject(users) } }, sec * 1000) }) } new Promise로 새로운 promise 객체를 생성하고 if 조건문에 성립할 때는 resolve를 통해 users를 내보내준다. 그래서 myPromise 함수를 실행하고 뒤에 .then을 붙이게 되면 그 parameter로 resolve() 안에 있는 users가 나오게 되는 것이다. 이게 바로 메소드 체이닝! 메소드 체이닝이란? 메서드가 객체를 ..
-
콜백 (callback)concept/javascript 2020. 5. 27. 02:43
대표 예시 setTimeout에서 실행되는 함수 안에서 일어나는 연산들을 가져오기 //함수 표현식 function helloWorld (callback) { setTimeout(()=>{ var a = 'hello'; var b = 'world'; callback(a + b) // { console.log(value) }) //결과는 undefined가 나오고 2초 후에 helloworld 가 나온다. 먼저 undefined가 나오는 이유는 function helloWorld의 리턴값이 없기 때문이다. 그리고 undefined가 호출 된 후 함수 내부에서 setTimeout이 실행되고 있어서 2초의 시간이 소요된다. setTimeout 안에는 callback 함수가 실행되고 있다. (**여기 콜백함수가 ..
-
Subclassing - understanding prototype chain (Object.create()의 활용법)concept/javascript 2020. 5. 10. 01:49
출처 : 코드스테이츠 내가 볼려고 기록해놓는 블로그 이 포스팅은 ES6의 Class가 어떻게 작동하는지 그 원리를 알아보는 포스팅이다. ES6가 나오기 전에는 이런 방식으로 상속관계를 만들어줬다. 먼저 1. 부모-자식 상속관계에 대해서 자세히 알아보고 2. 이것을 HTML에서 활용하는 방법 3. Object.create()를 활용해 상속관계를 만드는 방법을 알아볼 것이다. 1. 부모-자식 상속관계 먼저 부모자식 상속관계에 대해서는 이 2장의 슬라이드로 한 눈에 볼 수 있다. 즉, Human.prototype 과 steve.__proto__가 같은 것이다. __proto__들은 자신의 부모의 특성을 상속받는다. 그런데 모든 객체는 Object 이다! 그래서 객체들은 Object의 특성들을 상속받는 것이다...
-
prototype vs __proto__ vs constructorconcept/javascript 2020. 5. 9. 00:29
출처 : 생활코딩 먼저 함수란 무엇인가 부터 알아보자 function Person(){} 자바스크립트에서 함수는 독특한 녀석이다. 함수에서 {} 안에는 statements 가 들어간다. 그런데 이건 동시에 객체(object)이기도 하다 ?!?! 그러니까 var Person = new Function(); 이랑 똑같음 function 은 window에 기본으로 정의된 Function의 instance이다. 여기서 중요한 포인트는 자바스크립트에서 함수는 객체이기 때문에 property를 가질 수 있다!! function Person(name, first, second){ this.name = name; this.first = first; this.second = second; } 만약, 이런 코드가 있다면?..
-
Instantiation Patterns (인스턴스화 패턴)concept/javascript 2020. 5. 8. 19:38
ES6 에서는 Class 라는 생성자 함수가 생겨서 instance를 쉽게 만들 수 있다. 하지만 ES6가 나오기 전 까지는 어떻게 instance를 만들었을까? 그런거 알 필요 없고 그냥 Class 쓰면 되지 않아? 라고 생각할지도 모르겠지만 이 과정에 대해서 더 자세히 공부하면 응용이 더 쉬워지겠지? 그런데 Class가 무엇이냐. Class의 개념을 먼저 짚고 가려고 한다. Class는 하나의 정형화된 모델을 만들어 두고 그 모델을 기반으로 복제품을 만들기 위해 사용하는 것이다. 즉, 옛날에는 책을 하나 만들기 위해 일일히 다 손으로 썼어야 했다면 금속활자가 만들어진 후 다량의 책을 빠른 시간에 찍어낸 세기의 발명과도 같은 것! 여기서 Class는 금속활자인 것이다. 자세한 포스팅은 2020/04/0..
-
OOP (Object Oriented Programming) - 객체 지향 프로그래밍concept/javascript 2020. 5. 8. 18:00
본 포스팅에서는 컴퓨터 세상에서 전반적으로 프로그래밍이 어떤 것인지 먼저 알아 보고 그 중에서도 자바스크립트의 특징인 객체 지향 프로그래밍에 대해서 알아볼 것이다. 먼저 객체 지향 프로그래밍에 대해서 알아보기 전에 컴퓨터 프로그래밍이 무엇인지 알아보자. 그래서 지금까지 코드 짜는 것을 열심히 배우긴 배웠는데.. (내가 프로그래밍을 하고 있는게 맞나 모르겠네) 그럼 컴퓨터 프로그래밍이 뭐지? 컴퓨터 프로그래밍이란? : 알고리즘의 모음 : step by step 프로세스의 모음이다. 그럼 그 프로그래밍을 어떻게 하지? 프로그래밍 언어를 통해서 해야한다! 프로그래밍 언어는 프로그래머가 프로그램을 개발할 수 있도록 도와주는 tool 이다. 언어에는 3가지 타입이 있다. 1. Machine Languages (기..
-
++, -- 를 앞에 쓴 것과 뒤에 쓴 것은 무슨 차이가 있는 것일까?concept/javascript 2020. 5. 2. 03:45
for 반복문을 쓰면서 항상 i++ 혹은 i-- 만 사용했었는데 어쩌다가 ++i 를 써야할 상황을 발견했다. 연산자를 앞에 쓰고 뒤에 쓰고의 차이가 무슨 차이인가 싶어서 찾아보게 되었다. ++/-- 연산자는 prefix, postfix 형태로 사용할 수 있다. let counter = 1; let a = ++counter; console.log(a) // 2 let counter2 = 1; let b = counter2++; console.log(b) // 1 prefix형태로 앞에 있을 경우엔 이미 증가를 하고 난 뒤의 값을 a에 넣어주지만 postfix형태로 뒤에 있을 경우엔 b에 1이란 값을 넣어준 뒤 값이 증가한다. 만약 값을 증가시키고 그 즉시 사용을 하고 싶다면 ++counter를, 값을 증가..