반응형

전체 글 92

[ES6 JavaScript] WeakMap

오늘은 WeakMap에 대해 알아보도록 하겠습니다. WeakMap은 키가 약하게 참조되는 Map이라고 생각하면 될 것 같습니다. 키는 반드시 Object 형태여야하고 값은 임의의 값이 가능합니다. 키가 Object 형태로 약하게 유지되면서 다른 강한 키 참조가 없는 경우에 모든 항목은 GC(Garbage Collector)에 의해 WeakMap에서 제거됩니다. var wm1 = new WeakMap(), wm2 = new WeakMap(), wm3 = new WeakMap(); var o1 = {}, o2 = function(){}, o3 = window; wm1.set(o1, 37); wm1.set(o2, "azerty"); wm2.set(o1, o2); // 값은 무엇이든 될 수 있음, 객체 또는 함..

JavaScript 2020.10.13

[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

[ES 6 JavaScript] Map

오늘은 JavaScript Map 객체에 대해 알아보도록 하겠습니다. Map 객체는 키-값 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 Collection입니다. 요소의 삽입 순서를 기억하기 때문에 for...of 반복문을 사용할 때, 삽입 순서대로 원소를 순회할 수 있습니다. for...of 반복문을 순회하며 [key, value]로 이루어진 배열을 반환입니다. let myMap = new Map() let keyString = '문자열' let keyObj = {} let keyFunc = function() {} // 값 설정 myMap.set(keyString, "'문자열'과 관련된 값") myMap.set(keyObj, 'keyObj와 관련된 값') myMap.set(keyFunc, 'keyFu..

JavaScript 2020.10.10

[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

[ES6 JavaScript] Rest Parameters

오늘은 Rest 파라미터에 대해 알아보도록 하겠습니다. Rest 파라미터는 정해지지 않은 인수들을 배열로 나타낼수 있도록 하는 파라매터입니다. 함수의 마지막 파라미터의 앞에 ... 을 붙여 나머지 모든 파라미터를 배열로 대체합니다. 그렇기 때문에 마지막 파라미터만 Rest 파라미터가 될 수 있습니다. function myFun(a, b, ...manyMoreArgs) { console.log("a", a); console.log("b", b); console.log("manyMoreArgs", manyMoreArgs); } myFun("one", "two", "three", "four", "five", "six"); // Console Output: // a, one // b, two // manyMor..

JavaScript 2020.10.03

[ES6 JavaScript] default parameters

오늘 함께 공부해볼 것은 기본값 매개변수입니다. 이전 JavaScript에서 함수 매개변수의 기본값은 undefined였습니다. 그래서 기본값 설정을 위해서는 함수 내부에서 매개변수 값을 검사해 undefined인 경우 값을 할당하여 사용했습니다. function multiply(a, b) { b = (typeof b !== 'undefined') ? b : 1 return a*b } multiply(5, 2) // 10 multiply(5) // 5 위 함수가 es6 이전에 사용하던 방법의 예입니다. 만약 b가 undefined라면 b의 값을 1로 초기화하고 있습니다. 하지만 es6 기본값 파라매터를 이용하면 아래와 같이 간단하게 구현할 수 있습니다. function multiply(a, b = 1) ..

JavaScript 2020.10.02

[ES6 JavaScript] 구조 분해 할당(Destructuring assignment)

오늘 공부해볼 ES6 JavaScript는 구조 분해 할당입니다. ES6에서 정말 많이 쓰는 문법 중 하나입니다. 구조 분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 합니다. 배열 구조 분해 var foo = ["one", "two", "three"]; var [one, two, three] = foo; console.log(one); // "one" console.log(two);// "two" console.log(three); // "three" 가장 기본적인 구조 분해 할당입니다. foo 배열은 "one", "two", "three" 세개의 문자열 요소를 가지고 있습니다. 각각의 문자열 요소를 one, two, three라는 이름의 변수에 구조 분해할당하고 있습니..

JavaScript 2020.10.01
반응형