This is the second article of the EcmaScript 6 niceties serie. ES6 also known as ES2015 brought a truck-load of new features and structures into Javascript and renewed the language as we knew it. This serie will highlight a few of the ES6 niceties you might find useful in your next Javascript project.
Today’s article is about those funny dots; rest- and spread-operator.
When looking at ES6 code for the first time you’ll probably notice the usage of three dots … which you haven’t seen in any code written in Javascript’s earlier standards (<= ES5).
These three dots don’t necessarily do the same job, as there are two operators using that three-dot-syntax.
“The rest” can be assigned to a variable, using the rest-operator. Look at these rest-arguments:
Note that the rest operator must be a function’s last parameter!
The spread operator is sort of the opposite of the rest-operator: It takes an array of values, and turns it into ‘something else’ which uses comma-seperation. This might sound a little foggy, but these examples will clearify this:
The last example is called destructuring. In ES6 you can destructure ‘iterables’ (Array, Map, Set) and objects.
But you can’t destructure an object using the spread-operator. That could be so useful, especially working with React JS, where you find yourself often extracting values from props and state object literals.
But that is coming our way; Object Rest Spread proposal is in stage 4 in the ECMAScript approval process.
Using this Babel plugin enables you to use it now already.
This is the first article of the EcmaScript 6 niceties serie. ES6 also known as ES2015 brought a truck-load of new features and structures into Javascript and renewed the language as we knew it. This serie will highlight a few of the ES6 niceties you might find useful in your next Javascript project.
Today’s article is about arrow functions.
Arrow functions have a different syntax than traditional Javascript functions (using =>), but they’re not just a shorthand notation; they behave differently in a few ways. I’ll show you a few common examples of when and how to use those functions, compared to Javascript prior to ES6.
Look at the following piece of code. Here you see the arrow function assembling the tradition Javascript function. You can see the syntax is rather short, and you’ll see its variations get shorter and shorter 🙂
In Javascript you’ll be using anonymous function more than often 🙂 – they’re all over the place! Arrow functions can be quite handy right here, because of their short syntax and their different behavior. Let’s start rather simple, an event handler:
Here the function doSomething is used as an event-handler, and can be (re)used by other code.
Every now and then, you first need to take care of some things in a handler before you start calling reusable code. Sometimes the reusable function expects other parameters or you need to do / check something with the given arguments. For example with the event argument:
Nothing new happened here, but your code gets a lot cleaner.
Remember how short arrow functions’ syntax can get. Imagine how much cleaner the following code becomes compared to its ES5 counterpart:
So far arrow function just makes your code cleaner, but still function as always. One of the main new behaviors you’ll get to use a lot is that it doesn’t (re)bind this.
Apart from when your using a callback for jQuery.each you’ll be using a workaround if you need to access this from within your (anonymous) callback / event-handler function. Often by declaring something like ‘var that = this;‘ before creating the anonymous function, and use that in stead of this.
Compare these two examples:
The short notation variations and implicit returns makes lambda kinda work a breeze:
Sparekassen Thy har valgt altid at være ved kundens side, via en ny mobil app. SejKo har leveret en iOS og Android app til både tablets og telefoner.
Appen giver direkte kontakt til ens rådgiver, og mulighed for at følge med i nyheder og begivenheder.
Alle data og push-notifikationer kan Sparekassen Thy styre fra platformen, hvor de også redigerer deres hjemmeside.
Teknisk er appen bygget som hybrid app, som gør det muligt at målrette både iOS og Android platformene fra en fælles kodebase – hvor man ellers udvikler to vidt forskellige apps; en til hver platform. Dette gavner både udviklingsprocessen og vedligeholdelsen af appen. Både i tid, pengene og projektstyring – da man ikke behøver at arbejde med forskellige udviklings teams.
Kodebasen er udviklet i det robuste framework, Ember.
Download appen Sparthy på Apple AppStore eller Google Play.
WooCommerce has an awful lot of hooks! Very useful if you want to customize a webshop without touching the WooCommerce core – so you’re safe when updating it. Check out the availability in the documentation!
Here’s an example:
In some occasions you want to do something extra with the WooCommerce checkout form. This could either be adding some HTML, or a while Javascript file just for this occasion, or something completely different.
You can use ‘woocommerce_after_checkout_form’ or ‘woocommerce_before_checkout_form’ from your plugin or (child-)theme.
As you can see, you can either output HTML straight away by echo’ing right before / after the markup of the checkout-form, or handle things programatically like enqueing a javascript file. This Javascript file will only be loaded wherever there’s a WooCommerce checkout-form present, and thus you can target those checkout forms directly with your Javascript functionality.
Hjemmesiden Støtnationalparkcenterthy.dk er skabt til at indsamle penge til Nationalparkcenter Thy, og formidle progressionen.
SejKo har leveret denne ‘one-page’ hjemmeside (d.v.s. at man samler alt info på én side – men man stadig kan navigere til det via menuen) mens Thy Nationalpark selv har fyldt indhold på.
Hjemmesiden er udrustet med Sikkerhed-først-pakken mod eventuelle hackerangreb.
Her er hele hjemmesiden på én side; one-page
Web-app CoWorker giver mulighed for alle folk til at benytte sig af kontorlokaler.
Man booker på forhånd et ønsket lokale til en ønsket varighed. For at få adgang til det lokale i det tidsrum, lukker appen døren op for en.
Det er en meget omfattende app, som håndterer bl.a:
Denne web-app er en sammensatning af Django, Bootstrap og Javascript.
Morsø Tømmer- og snedkerforretning har godt fat de lidt ældre kunder. Deres ønske var at få lige så godt fat i de yngre, ved at udarbejde en strategi for hjemmesiden og sociale medier, som vil appelere til det yngre publikum. I samarbejde med Jeanette Lund Kommunikation har sejKo lavet et moderne (men ikke overhipt) website, med et modernt look og tilgængelighed hvor deres referencer skal springe i øjet.
Hjemmesiden på mobil:
Se mtsmors.dk
Dette efterår har sejKo fået lavet en række udvidelser til Mega Journal.
Mega Journal er et udbredt journal system, som sejKo har special udviklet til den selvejet institution Kvadderkjær, for ti år siden 🙂
Systemet bliver en gang i mellem udvidet med nye features og forbedringer, som opstår efter aktuelle behov.
Sidste uge havde sejKo Jonathan Klainberger i praktik.
Det er hårdt men hyggeligt at være praktikant her; først skulle den 15 årige Jonathan følge sejKos programmering lynkursus (med Kaj & Andrea eksempler!) så vises der basics af HTML & CSS (og sikke en funky sider der kom ud af det!), så afsluttes fredagen med et opbygning at et simpelt skyde-spil i Javascript – og en Kaj kage selvfølgelig 🙂
Tak for besøget Jonathan!