Synchronous code 어떤 하나의 작업이 끝난 후에 다음 작업을 수행함. 작업이 끝날 때까지 block 되는 점에서 blocking code라고도 함. Asynchronous code 작업의 수행완료 여부와 상관 없이 다음 작업을 수행함. non blocking.

ES6 에서는 해당 클래스 내부에 static키워드를 이용해 static 메서드를 선언할 수 있었는데 ES5에서 똑같이 구현하려니 방법이 바로 떠오르지 않아 검색해보았다. 생성자 함수에 점 표기법을 이용하여 메서드를 바로 선언하면 된다. 아래는 모두 Store의 static 메서드들이다. // Store function Store() {} Store.getBooks = function () { let books; if (localStorage.getItem("books") === null) { books = []; } else { books = JSON.parse(localStorage.getItem("books")); } return books; }; Store.displayBooks = functio..

class 키워드를 이용했을 때 상속 구현 방법을 알아보자. extends 라는 키워드를 이용해 상속받을 클래스를 기재하고, 해당 클래스를 상속받은 클래스의 생성자에 super()를 이용해 부모 클래스의 생성자를 호출할 수 있다. class Person { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } greeting() { return `Hello there ${this.firstName} ${this.lastName}`; } } class Customer extends Person { constructor(firstName, lastName, phone, membership) { sup..

앞서 공부했던 OOP의 개념을 ES6에서는 class를 이용해 문법적 이득(syntatic sugar)을 취하며 구현할 수 있다. 물론 prototype 기반으로 작동하며 원리 또한 거의 비슷하다. class Person { constructor(firstName, lastName, dob) { this.firstName = firstName; this.lastName = lastName; this.birthday = new Date(dob); } greeting() { return `Hello there ${this.firstName} ${this.lastName}`; } calculateAge() { const diff = Date.now() - this.birthday.getTime(); const..

JS에서 Constructor는 함수이다. 따라서 다음과 같은 코드실행이 가능하다. // Person Constructor function Person(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } // Customer constructor function Customer(firstName, lastName, phone, membership) { Person.call(this, firstName, lastName); this.phone = phone; this.membership = membership; } // Create customer const customer1 = new Customer("Tom", "..

ES5에서 상속을 구현하기 위해 만들었다. (ES6에서는 class 키워드를 이용해 똑같이 구현이 가능하다) pseudo property이기 때문에 loop문을 이용해 해당 속성을 이용한다거나 하는 것이 불가능하다. literal로 object를 생성할 때 항상 object라는 prototype으로부터 상속을 받는다. (object가 최상위 prototype이기 때문) // Object.prototype // Person.prototype function Person(firstName, lastName, dob) { this.firstName = firstName; this.lastName = lastName; this.birthday = new Date(dob); } // Calculate age Pe..

JS에 기본적으로 내장되어 있는 생성자들을 이야기한다. primitive type의 데이터들은 해당 생성자로 생성할 경우 object로 생성됨에 주의하고, 정규표현식 같은 경우에는 생성자를 이용할 때 escaping을 해줘야 한다는 점에 주의하도록 하자. 또한, 해당 생성자들을 이용할 경우 시간이 더 오래 걸린다고 한다. // String const name1 = "jian"; const name2 = new String("jian"); // name2.foo = "bar"; console.log(name2); console.log(typeof name1); // String console.log(typeof name2); // Object if (name2 === "jian") { // No, beca..

Hoisting 직역하면 끌어올림이다. js 작업을 할 때 이런 식으로 작성된 코드를 본 적이 있을 것이다. foo(); function foo() { console.log("Hello"); } 함수의 선언이 호출보다 밑에 있음에도 불구하고 위의 코드는 정상적으로 작동하는데 이 모습이 마치 아래의 선언을 호출 위로 끌어올리는 것과 같아 Hoisting이라 부르는 것 같다. 정확히는 해당 코드를 메모리에 저장할 때도 순서를 바꾸는 로직은 없다고 한다. 또한 선언 부분은 Hoisting이 가능하지만 초기화는 Hoisting이 되지 않는다고 한다. var x = 1; // x 초기화 console.log(x + " " + y); // '1 undefined' var y = 2; 더 깊이있는 내용은 mdn을 참..

Math.floor(Math.random() * (max - min + 1) + min) 나름대로의 원리 나올 수 있는 최소값이 min 이니까 Math.random()에 무슨 짓을 하든 max - min과 같은 정수를 갖는 최대값이 나와야 함(ex. 2~100 일 경우 98.99999... 까지이다., 여기에 최소값 2를 더하고 버림하면 100이 나오니까). 그러려면 max-min 값에 + 1을 해줘야 하기 때문에 위와 같은 공식이 성립된다.

Number Number("3만");// NaN Number("만 3세");// NaN Number(null);// 0 Number(undefined);// NaN Number(" ");// 0 Number();// 0 parseInt parseInt("3만"); // 3 (숫자로 시작할 경우에만 적용됨) parseInt("만 3세"); // NaN parseInt(null);// NaN parseInt(undefined);// NaN parseInt(" ");// NaN parseInt();// NaN