#ecmascript 6

[freyayuki]

freeCodeCamp JavaScript Course Notes List

Currently, I’m going through freeCodeCamp’s new learning curriculum. I just finished the first part, which was the Responsive Web Design Certification course. 

While going through said course, I took notes on the following:

CSS Grid

CSS Flexbox 

I also made several responsive web design projects as part of the course.

The second part of the freeCodeCamp curriculum was the Javascript Algorithms And Data Structures Certification course. The following is a list of all the notes I took while going through said course:

1. Basic JavaScript Notes

Part 1

Part 2

Part 3

2. ES6 or ECMAScript 6 Notes

Part 1

Part 2

3. Regular Expressions or Regex Notes

Part 1

Part 2

4. Debugging Notes

5. Basic Data Structures Notes

Part 1

Part 2

[brandizzi]

Importando Módulos ES6 em CommonJS

Importando Módulos ES6 em CommonJS

Aqui na Liferay, alguns dias atrás, necessitávamos utilizar o pacote p-map. Só tinha um problema: esta aplicação em específico utilizava módulos no padrão CommonJS, e p-map utiliza módulos ES6. Até algumas das melhores referências que encontrei (por exemplo, este post) deixavam claro que não seria possível importar módulos ES6 a partir de CommonJS. A boa notícia é que isto não é mais verdade!…

[shigeko-nobufusa]

ECMAScript 6 Features

[freewebtutorials]

How To Use Arguments And Parameters In ECMAScript 6

How To Use Arguments And Parameters In ECMAScript 6

ECMAScript 6 (or ECMAScript 2015) is the newest version of the ECMAScript standard and has remarkably improved parameter handling in JavaScript. ECMAScript 6 has brought hundreds of small and big improvements to JavaScript. We can now use rest parameters, default values and destructuring, among other new features. In this tutorial, we will explore arguments and parameters how ECMAScript 6 has…

[sourcetocode]

Dr. Axel Rauschmayer looks at the thorny topic of checking equality in JavaScript and shows off the 'is' operator coming along in ECMAScript 6, including why you'll want to use it.

[tagitables]

Hello ES6

[syndicode]

ES2018 new features

You already know a lot about JS, we hope thanks to our blog as well, so it would be useful to be updated about the ES2018 new features. The ninth edition of the ECMAScript standard, officially known as ECMAScript 2018 (or ES2018 for short), was released in June 2018. Starting with ES2016, new ...

[bajayk]

Creating Simple Range Slider Component Using JavaScript

Creating Simple Range Slider Component Using JavaScript

Writing components is little bit difficult task while developing a web based application, specially when you are a beginner or you don’t know how to write it and implement it.

So lets see how we can create a simple Range Slider component using HTML/CSS/JavaScript.

Before writing JavaScript for component, first we will need a HTML Page. Also we will need a style.css to style the page and script.js…

[stack247]

Javascript Find Unique Value in Array

Javascript Find Unique Value in Array

Given:

var findUniq = ["f", "3", 3, "t", "f", "A"]

Find only unique value.

Solution 1 – Javascript ECMA Script 5 Check if index of the value is the first occurrence.

var uniq = findUniq.filter(function(value, index, array) { return array.indexOf(value) === index; });

Solution 2 – Javascript ECMA Script 6 Short hand version of Solution 1.

let uniq = findUniq.filter((v, i, a) => a.indexOf(v)…

[mlbors]

Fun with arrow and higher order functions

Through this small article, we are going to overview arrow functions and higher order functions in JavaScript.

Arrow functions

In JavaScript, arrow functions were introduced by ECMAScript 6 and are, in a way, a shorter manner to write functions. They allow us to write functions that are small, inline and single-purpose. They have a concise syntax, implicit returns and share lexical "this" with the parent scope.

Arrow functions allow us to do something like this:

//*************************************// //***** NOT USING ARROW FUNCTIONS *****// //*************************************// var sayHello = function() { console.log('Hello world!'); } var splitePhrase = function(phrase) { return phrase.split(' '); } var multiply = function(x, y) { return x * y; } var setObject = function setProperties(id, name) { return { id: id, name: name }; }; //*********************************// //***** USING ARROW FUNCTIONS *****// //*********************************// let sayHello = () => { console.log('Hello world!'); } let splitePhrase = phrase => phrase.split(' '); let multiply = (x, y) => x * y; let setObject = (id, name) => ({id: id, name: name});

The side effect of arrow functions is, because they are anonymous, even if we place them in variables, they will not give us very good stack traces. The other thing is we can not use them as constructors because they don’t have a prototype property or other internal methods.

Higher order functions

A higher-order function is a function that can take another function as an argument, or that returns a function as a result. The fact that we can place a function into another function allows us to compose small functions into bigger functions. The function passed to the other function is also known as callback. Let's have some examples:

Filter

The filter function returns an array filled with all elements of a provided array that had passed a specific test.

const animals = [ { name: 'Spike', species: 'dog' }, { name: 'Garefield', species: 'cat' }, { name: 'Tom', species: 'cat' }, { name: 'Droopy', species: 'dog' } ]; var isCat = (function(animal) { return animal.species === 'cat'; }); var cats = animals.filter(isCat); console.log(cats); /** * Will output * Array(2) * 0 : "Garefield" * 1 : "Tom" */

Map

We can use map if we want to create an array with the values of another array after each of them went through a specific function.

const persons = [ { name: 'John', browser: 'Chrome' }, { name: 'Jane', browser: 'Firefox' }, { name: 'Sam', browser: 'Chrome' }, { name: 'Paul', browser: 'Edge' } ]; var names = persons.map(function(person) { return person.name; }); console.log(names); /** * Will output * Array(4) * 0 : "John" * 1 : "Jane" * 2 : "Sam" * 3 : "Paul" */

Reduce

The reduce function reduces an array to a single value. It executes a provided function for each value of the array, from left to right.

var orders = [ { amount: 210 }, { amount: 35 }, { amount: 142 }, { amount: 47 } ]; var totalAmount = orders.reduce(function(sum, order) { return sum + order.amount }, 0); console.log(totalAmount); /** * Will output * 43 */

Let's have fun

Now, let's try to put all this information together. For some reasons, let's say we are working on a brand new video game where some Italian plumbers have to rescue a princess from a dangerous dragon monster that breathes fire (any resemblance to fictional famous characters is purely coincidental).

Down bellow, we have an array with some events concerning the big monster:

const bigMonsterEvilDragonEvents = [ { type: 'attack', value: 12, target: 'italian-plumber-1' }, { type: 'attack', value: 12, target: 'italian-plumber-2' }, { type: 'fire', value: 40 }, { type: 'jump', target: 'bridge' }, { type: 'attack', value: 23, target: 'italian-plumber-1' }, { type: 'jump', target: 'tower' }, { type: 'laugh', value: 95 }, { type: 'attack', value: 6, target: 'italian-plumber-2' }, { type: 'attack', value: 15, target: 'italian-plumber-1' } ];

If we want to know how much damage the big monster made on the Italian Plumber 1 at the end of all of these events, using what we previously saw, we can simply do it like this:

const totalDamageOnItalianPlumber1 = bigMonsterEvilDragonEvents .filter(e => e.type === 'attack') .filter(e => e.target === 'italian-plumber-1') .map(e => e.value) .reduce((prev, x) => (prev || 0) + x); console.log(totalDamageOnItalianPlumber1); /** * Will output * 50 */

That's it! That is how we can use arrow functions and higher order functions to easily have access to some results that would require more lines of code without these last functions.

[codexplo]

Spread operator in JavaScript

Spread operator in JavaScript

I loved the new spread operator of javascript that came with ES6. Basically, it has tree dots. You might be familiar with the varagrs of Java. However, it’s more than varargs. Let me give you some examples-

Let’s say you have a variable-

var a= [1,2,3,4]; var b = [5,7];

and you wanna concatenate a and b . There is a function to do that –

var d = a.concat(b) ; console.log(d); Output: [1, 2, 3,…

[r2fresh-blog]

When ‘not’ to use arrow function

아래의 내용은 http://rainsoft.io/when-not-to-use-arrow-functions-in-javascript/ 를 바탕으로 arrow function을 사용 시 주의 하기위해 번역을 한 내용입니다.향후 원문의 블로그 사용자의 요청으로 문제가 생긴다면 포스트 한것을 지우도록 하겠습니다.또한 sns에는 공유는 하지 않았습니다. 이점 확인 하시고 절대 따로 복사하여 배포는 하지 않으셨으면 합니다.

ECMAScript 6(ECMA2015)에서 표준으로 정해진 arrow function을 사용하지 말아야 하거나 또는 사용하면 가독성이 떨어지는 몇가지 예를 알아 보도록 하자

1. Object의 정의

Object literal

아래의 소스 코드와 같이 Object literal 방식에서 property를 함수 형태로 정의 시 arrow function으로 정의 하기데 되면 arrow function의 this가 해당 Object가 아닌 window가 되어 원하는 결과가 나오지 않을 수 있다.

var calculate = { array: [1, 2, 3], sum: () => { console.log(this === window); // => true return this.array.reduce((result, item) => result + item); } }; console.log(this === window); // => true // Throws "TypeError: Cannot read property 'reduce' of undefined" calculate.sum();

위의 소스코드를 보면 this와 window는 같다는 결과가 나왔으며, calculate.sum()은 TypeError를 발생한다.위와 같은 것은 function expression 또는 shorthand syntax를 사용하여 해결을 할수 있다.

var calculate = { array: [1, 2, 3], sum() { console.log(this === calculate); // => true return this.array.reduce((result, item) => result + item); } }; calculate.sum(); // => 6

위와 같이 calculate와 this는 같은 것을 되어 calculate.sum()는 원하는 결과를 얻게 된다.

Object prototype

Object의 prototype과 같은 경우에도 발생을 한다. 아래와 같이 arrow function을 사용하며 this는 window와 같게 되며, 월하는 결과를 얻지 못하게 된다.

function MyCat(name) { this.catName = name; } MyCat.prototype.sayCatName = () => { console.log(this === window); // => true return this.catName; }; var cat = new MyCat('Mew'); cat.sayCatName(); // => undefined

위와 같은 소스코드는 shorthand syntax로는 수정이 불가능 하며, function expression(함수표현식)으로 수정하면 된다.

function MyCat(name) { this.catName = name; } MyCat.prototype.sayCatName = function() { console.log(this === cat); // => true return this.catName; }; var cat = new MyCat('Mew'); cat.sayCatName(); // => 'Mew'

2. Callback functions with dynamic context

arrow function은 dynamic context인 경우에도 사용이 불가능 하다. this로 인해 객체에 접근이 안되기 때문이다. 아래와 소스코드는 이벤트가 발생할때 실행하는 callback function를 arrow function으로 작성을 했다. 이렇게 되면 this가 이벤트를 발생시킨 타켓이 되지 않기 때문에 이벤트 발생시 함수가 제대로 실행이 되지 않는다.

var button = document.getElementById('myButton'); button.addEventListener('click', () => { console.log(this === window); // => true this.innerHTML = 'Clicked button'; });

이것은 아래와 같이 function expression(함수표현식)으로 변경하여야 실행이되고 this도 이벤트를 발생시킨 target이 된다.

var button = document.getElementById('myButton'); button.addEventListener('click', function() { console.log(this === button); // => true this.innerHTML = 'Clicked button'; });

Invoking constructors

생성자 함수에서도 arrow function 은 typeError를 발생한다. 소스코드를 보면 TypeError가 발생된다.

var Message = (text) => { this.text = text; }; // Throws "TypeError: Message is not a constructor" var helloMessage = new Message('Hello World!');

이것을 해결하기 위하서는 function expression을 사용하여 해결 할 수 있다.

var Message = function(text) { this.text = text; }; var helloMessage = new Message('Hello World!'); console.log(helloMessage.text); // => 'Hello World!'

4. Too short syntax

마지막으로 너무 많은 arrow function의 사용으로 가독성이 떨어지는 경우이다.아래의 소스코드는 심플하고 간단하지만 ��해하는데 약간의 시간이 걸린다.그것은 curly braces으로 작성되었다.

let multiply = (a, b) => b === undefined ? b => a * b : a * b; let double = multiply(2); double(3); // => 6 multiply(2, 3); // => 6

이러한 경우는 심플한 것 보다 협업을 위해 코드를 이해하기 쉽도록 변경하는 것이 좋다.

function multiply(a, b) { if (b === undefined) { return function(b) { return a * b; } } return a * b; } let double = multiply(2); double(3); // => 6 multiply(2, 3); // => 6

위의 소스코드는 장황하고 짧은 소스코드를 균형이 맞게 수정한 것이다.

5.Conclusion

arrow function은 의심할 여지가 없이 좋은 것이다. arrow fuction 단순하면서도 정확한 곳에 가져다 써야 한다. 몇몇 상황의 이익은 다른 곳에 불이익을 가져다 준다. 위에 언급한 곳에서는 arrow function을 사용하지 말아야 한다.

[swysercoding-blog]

ES2015/ES6 is very exciting!! Generators will change things!