Hello Jay's Programming World!

오늘은 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..

오늘은 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 위 예제를 보..

오늘은 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를 사용..

오늘은 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..

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

오늘은 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에서 함수 매개변수의 기본값은 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) ..

오늘 공부해볼 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라는 이름의 변수에 구조 분해할당하고 있습니..

오늘은 템플릿 리터럴에 대해서 알아보겠습니다. ES6이전에는 템플릿 스트링(Template Strings)라고 불렸습니다. 템플릿 리터럴은 문법적으로 더 편하게 문자열을 생성하는 방법입니다. 템플릿 리터럴은 백틱(``)을 이용합니다. 그리고 $와 중괄호(${expression})을 이용하여 표현식을 표기할 수도 있습니다. 템플릿 리터럴 안에서 백틱 문자를 사용하려면 백틱 앞에 백슬러시를 삽입하면 됩니다. `\`` === "`" // --> true Multi-line strings 템플릿 리터럴에서 source내에 삽입되는 Newline Characters(\n)은 템플릿 리터럴의 일부가 됩니다. 아래와 같이 편리하게 사용할 수 있습니다. let msg = "Hello world!\nShow me the..

객체 리터럴이란 중괄호({})로 감싸진 하나 이상의 속성 이름과 속성 값의 리스트라고 말할 수 있습니다. 일반적으로 객체를 생성하는 방법을 생각하시면 됩니다. 오늘은 객체 리터럴에 대해 알아보도록 하겠습니다. 먼저 확인할 부분은 ES6이전에도 사용가능했던 부분입니다. 이 부분을 먼저 공부해보겠습니다. 객체 리터럴 var sales = 'Toyota'; function carTypes(name) { if (name === 'Honda') { return name; } else { return "Sorry, we don't sell " + name + "."; } } var car = { myCar: 'Saturn', getCar: carTypes('Honda'), special: sales }; conso..