반응형

JavaScript 40

[JavaScript] setTimeout의 delay는 음수도 가능할까?

일정 시간 이후에 특정 구문을 실행하기 위해 setTimeout을 사용합니다. 그리고 가끔은 함수 호출 순서를 바꿔주기 위해 setTimeout의 delay에 0을 사용하기도 합니다. 그렇다면 delay를 음수로 준다면 어떤 일이 발생할까요? 일반적으로 delay 어떤 딜레이 값을 사용했다고 하더라도 최소 지연시간보다 작다면 최소지연 시간으로 맞춰지게 됩니다. HTML5 스펙에는 최소 지연 시간을 4ms로 명시하고 있습니다. 즉, 음수로 delay를 지정했더라도 최소 지연 시간 이후에 callback이 실행된다는 것입니다. 단, 예외가 있습니다. Stackoverflow 답변에 따르면 음수로 입력했을 때, 모든 브라우저에서 callback의 실행을 보장하진 않는다고 합니다. Internet Explore..

JavaScript 2021.01.21

[JavaScript/Pseudoclassical/ES5] Subclass method에서 Superclass Method 호출하기(오버라이딩 메서드 호출)

var SuperClass = function() { this.name = 'super'; }; SuperClass.prototype.print = function() { console.log('[SUPER] ' + this.name); }; var SubClass = function() { this.name = 'sub'; }; SubClass.prototype = new SuperClass(); SubClass.prototype.print = function() { console.log('[SUB] ' + this.name); // I want to call super's print method! }; var obj = new SubClass(); obj.print(); SuperClass와 SubC..

JavaScript 2021.01.20

[JavaScript] Function.prototype.call/apply/bind

Function.prototype.call() 주어진 this와 파라매터 목록을 가지고 함수를 호출. function Product(name, price) { this.name = name; this.price = price; } function Food(name, price) { Product.call(this, name, price); this.category = 'food'; } console.log(new Food('cheese', 5).name);// 'cheese' Function.prototype.apply() 주어진 this와 파라매터 배열(혹은 유사 배열 객체도 가능)을 가지고 함수를 호출. const numbers = [5, 6, 2, 3, 7]; const max = Math.max...

JavaScript 2021.01.20

div height 100% 높이 구하기

div의 높이를 100%으로 설정해두고 해당 div의 높이를 구하려고 하는데, 값이 0으로 나온다면, 해당 div의 부모를 확인해야합니다. 간단하게 test라는 div element를 하나 생성했습니다. 그리고 해당 element의 너비와 높이를 JavaScript를 이요하여 확인해봤습니다. 분명 width는 값이 제대로 나오는데, height는 0으로 나온 것을 확인할 수 있습니다. 이러한 값이 나오는 이유는 부모 element에게 있습니다. %를 이용하여 높이를 지정한 경우, 그 부모의 높이의 상대값으로 정해지는데, 그 부모도 높이가 없기 때문에 이러한 이슈가 발생하는 것입니다. 위 예제에서는 body의 높이가 0인것을 확인할 수 있습니다. 이를 해결하기 위해서는 div 부모들에게 높이를 지정하면 됩..

JavaScript 2021.01.11

[ES6 JavaScript] WeakSet

오늘은 WeakSet에 대해서 알아보도록 하겠습니다. WeakSet은 WeakMap처럼 약하게 유지되는 객체를 컬렉션에 저장할 수 있게 해주는 객체입니다. 약하게 유지된다는 것은 WeakSet 내 저장된 객체에 다른 참조가 없는 경우, GC(Garbage Collection) 될 수 있다는 의미입니다. 그리고 또 다른 특징은 WeakSet내의 객체는 오직 한 번만 발생할 수 있습니다. 즉, WeakSet 컬렉션 내 요소는 유일한 요소입니다. WeakSet에서 사용할 수 있는 메서드는 총 3가지 입니다. WeakSet.prototype.add(value) WeakSet 객체에 새로운 객체를 추가하는 메서드 WeakSet.prototype.delete(value) WeakSet 객체에 요소를 제거하는 메서드..

JavaScript 2020.10.15

[ES6 JavaScript] Set

안녕하세요. 오늘은 Set에 대해 공부해보도록 하겠습니다. Set 객체는 값 Collection으로 요소 삽입 순서를 기억합니다. 그렇기 때문에 삽입 순서대로 순회가 가능합니다. 또 하나의 Set내 값은 한 번만 나타날 수 있습니다. 즉, 어떤 값은 그 Set에서 유일합니다. var mySet = new Set(); mySet.add(1); // Set { 1 } mySet.add(5); // Set { 1, 5 } mySet.add(5); // Set { 1, 5 } mySet.add('some text'); // Set { 1, 5, 'some text' } var o = {a: 1, b: 2}; mySet.add(o); mySet.add({a: 1, b: 2}); // o와 다른 객체를 참조하므로 ..

JavaScript 2020.10.11

[ES6 JavaScript] Generator

오늘은 Generator에 대해 공부해보도록하겠습니다. Generator 객체는 Generator function으로부터 반환된 값입니다. Generator function이 무엇인지 먼저 살펴보도록 하겠습니다. Generator function은 아래와 같이 function 옆에 *(asterisk)를 붙여 정의 합니다. 이 함수는 Generator를 반환합니다. function* generator(i) { yield i; yield i + 10; } const gen = generator(10); console.log(gen.next().value); // expected output: 10 console.log(gen.next().value); // expected output: 20 위 예제를 보..

JavaScript 2020.10.07

[ES6 JavaScript] for...of

오늘은 for...of 구문에 대해 알아보도록 하겠습니다. for...of는 반복가능한(iterable) 객체(Array, Map, Set, String, TypedArray, arguments 객체등을 포함)에 대해서 반복하고 각 개발 속성값에 대해 실행되는 문이 있는 사용자 정의 후크를 호출하는 루프를 생성합니다. 예제를 확인해보며 for of에 대해 알아보도록 하겠습니다. Array let iterable = [10, 20, 30]; for (let value of iterable) { console.log(value); } // 10 // 20 // 30 array에서는 array의 값들을 반복합니다. 이전 시간에 let과 const에 대해서 확인했는데, 위 소스에서 let 대신 const를 사용..

JavaScript 2020.10.06

[ES6 JavaScript] let, const

오늘은 let과 const에 대해 알아보겠습니다. ES6 이전에 변수를 선언하기 위해서 var를 사용했습니다. let은 var와 비슷하지만 몇가지 다른 점이 있습니다. 가장 큰 차이점은 let은 변수가 선언된 블록, 구문 또는 표현식 내에서만 유효한 것입니다. 예제를 보며 차이점을 알아보겠습니다. let 유효 범위 규칙 function varTest() { var x = 1; if (true) { var x = 2; // 상위 블록과 같은 변수! console.log(x); // 2 } console.log(x); // 2 } function letTest() { let x = 1; if (true) { let x = 2; // 상위 블록과 다른 변수 console.log(x); // 2 } consol..

JavaScript 2020.10.05

[ES6 JavaScript] Spread syntax(전개 구문)

안녕하세요. 오늘은 전개 구문에 대해서 공부해보도록 하겠습니다. 전개 구문은 배열이나 문자열 같이 반복 가능한 문자를 0개 이상의 인수 또는 요소로 확장하여 0개 이상의 키-값의 쌍으로 학장시킬 수 있는 문법입니다. 나머지 파라매터와 같이 ... 을 붙여 사용합니다. 그럼 어떻게 사용하는지 한 번 확인해보겠습니다. 함수 호출에서의 전개 apply() 대체 하기 일반적으로 배열의 엘리먼트를 함수의 인자로 전달할 때, Function.prototype.apply()를 사용했습니다. // apply 사용 function myFunction(x, y, z) { } var args = [0, 1, 2]; myFunction.apply(null, args); // 전개 구문 사용 function myFunction..

JavaScript 2020.10.04
반응형