Hello Jay's Programming World!

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

JavaScript에는 class가 없었습니다. 그래서 많은 개발자들은 JavaScript에서 객체지향 프로그래밍을 위해 함수를 이용하여 class처럼 동작하게 구현하여 사용했습니다. 프로토타입 체인과 클로저등으로 상속, 캡슐화등을 구현할 수 있기 때문입니다. 이러한 불편함을 알고 있었는지 ES6에서는 드디어 class 문법이 발표되었습니다. 그렇다고 전혀 새로운 것이 생긴 것은 아닙니다. 기존에 있던 프로토타입 기반 객체지향 프로그래밍을 조금 더 보기 좋고 쉽게 만들어준 것이라고 생각하면 될 것 같습니다. 그럼 하나 하나 살펴보도록 하겠습니다. 클래스 정의 클래스는 사실 함수입니다. 함수를 정의하는 방법이 함수 선언과 함수 표현식이 있는 것처럼 클래스도 두 가지 모두 제공하고 있습니다. 먼저 클래스를 ..

일반적으로 ES5에서 함수를 표현할 때는 function 키워드를 사용합니다. ES6에서는 함수를 짧게 표현할 수 있는 방법을 제공합니다. 그것이 바로 화살표 함수입니다. 화살표 함수를 어떻게 표현하는지 알아보겠습니다. // ES5 function let getDouble = function(num) { return num * 2; } // ES6 화살표 함수 let getDouble = (num) => { return num * 2; } getDouble(2);// 4 가장 기본적인 함수 표현입니다. 숫자 num을 입력받아 두 배로 곱한 값을 반환해주는 함수 입니다. 기존 function에서 화살표 함수로 바꾸려면 function 키워드를 제거하고 소괄호와 중괄호 사이에 => 키워드를 사용하면 화살표 ..