U svetu modernog Javascript-a postoji mnogo novih, brzih i pouzdanih stvari. Kada se pojavio ES6 (ECMAScript – Javascript standardizacija) sredinom 2015. godine, Javascript je postao jedan od najmoćnijih programskih jezika. Ova verzija bila je prva koja je sadržala klase i module i koja je koristila ‘strict’ mod (lakše pronalaženje grešaka u kodu). U junu 2018. godine, objavljen je najnoviji ES9 ili ES2018. U toku te tri godine (od juna 2015. do juna 2018. godine), ECMAScript je napravio dosta izmena postojećem Javascript jeziku i sada postoje mnogo dobrih pomoćnih stvari koje mi danas koristimo u development procesu.

var, const & let

Sa pojavom ES6, dobili smo nove ključne reči kao što su const i let. U verzijama ES6+ preporučuje se da se ne koristi ključna reč var jer je to sada najslabiji mogući signal u Javascript jeziku. Ključna reč const znači da identifikator neće biti preimenovan ili preinačen. Za razliku od toga, ključna reč let znači da se promenljiva može promeniti i takva ključna reč se naziva block-scoped. Dakle, promenljivu deklarisanu u jednom bloku sa ključnom rečju let je jedino moguće koristiti u tom bloku.

let howMany = 4;
   
if(howMany > 3){ 
  let displayApples = "I have more than 3 apples"; 
  console.log(displayApples); // "I have more than 3 apples" 
}  

console.log(displayApples); // displayApples is not defined

Deklaracije ključnih reči const su takođe block-scoped i obe ključne reči, i const i let ne mogu da budu ponovo deklarisane. Međutim, kada je const objekat, jedan deo tog objekta može da se izmeni.

// This is OK - updating apples
let apples = "3 apples"; 
apples = "4 apples";

// This is NOT OK - re-declare pears 
let pears = "3 pears"; 
let pears = "4 pears"; // error: Identifier 'pears' has already been declared   

// This is OK - different scopes, same variable name 
let bananas = "3 bananas"; 
if( true ){ 
  let bananas = "4 bananas"; 
  console.log(bananas); // "4 bananas" 
} 
console.log(bananas); // "3 bananas"   

// CONST part   

// This is NOT OK - updating const 
const appleConst = "3 apples"; 
applesConst = "4 apples"; // error: Assignment to constant variable.    

// This is NOT OK - re-declare const 
const pearsConst = "3 pears"; 
const pearsConst = "4 pears"; // error: Identifier 'pearsConst' has already been declared   

// This is OK - update property of CONST object 
const showMe = { 
  what: "apples", 
  howMany: 3 
};   

showMe.howMany = 4; 
console.log(showMe.howMany + ' ' + showMe.what); // "4 apples" - property howMany was updated

forEach pomoćnik

Ovaj metod poziva zadatu funkciju po jednom za svaki element u nizu, po redu. Funkcija se ne izvršava za elemente niza koji nemaju vrednosti.

var colors = ['red', 'yellow', 'purple'];   

colors.forEach(function(color) { 
  console.log(color);
});

every and some pomoćnici

Metod every proverava da li svi elementi u nizu prolaze test koji je implementiran zadatom funkcijom.

Metod some proverava da li bar jedan element u nizu prolazi test koji je implementiran zadatom funkcijom.

var applesInBaskets = [32, 33, 16, 40];
var pearsInBaskets = [32, 33, 39, 40];
var bananasInBaskets = [6, 10, 12, 17];

function checkBasket(basket) {
    return basket >= 20;
}

// All baskets in array should have more than 20 fruits to return TRUE

console.log(applesInBaskets.every(checkBasket)); // false - one basket with apples has less than 20 apples (16)
console.log(pearsInBaskets.every(checkBasket)); // TRUE - all baskets with pears have more than 20 pears (32, 33, 39 and 40)
console.log(bananasInBaskets.every(checkBasket)); // false - all baskets with bananas have less than 20 bananas

// At least one basket in array should have more than 20 fruits to return TRUE
console.log(applesInBaskets.some(checkBasket)); // TRUE - three baskets with apples have more than 20 apples (32, 33, 40)
console.log(pearsInBaskets.some(checkBasket)); // TRUE - all baskets with pears have more than 20 apples (32, 33, 39, 40)
console.log(bananasInBaskets.some(checkBasket)); // false - all baskets with bananas have less than 20 bananas

map pomoćnik

Ovaj pomoćnik je umnogome sličan sa već opisanim forEach pomoćnikom. Međutim, dok forEach metoda jednostavno poziva zadatu funkciju za svaki element u nizu, map metod u stvari vraća novi niz (Array) jednake veličine – vraća transformisane elemente.

let arr = [1, 2, 3, 4, 5];

let doubled = arr.map(num => {
    return num * 2;
});

console.log(doubled); // [2, 4, 6, 8, 10]

find and findIndex pomoćnici

Metod find vraća vrednost prvog elementa u nizu koji prolazi zadati test. Metod findIndex je vrlo sličan, ali umesto vrednosti, on vraća indeks elementa koji prolazi test implementiran zadatom funkcijom.

let fruit = ['banana','pear','ananas', 'apple', 'peach'];
let stuffs = ['desk', 'pen', 'wardrobe'];

function findApple(newFruit){
  return newFruit==='apple';
}

console.log(fruit.find(findApple)); // "apple"
console.log(stuffs.find(findApple)); // undefined

console.log(fruit.findIndex(findApple)); // 3
console.log(stuffs.findIndex(findApple)); // -1

filter pomoćnik

Metod filter pravi novi niz sa elementima koji prolaze test koji je implementiran zadatom funkcijom.

let baskets = [12, 5, 8, 130, 44];

function moreThanTenApples(element) {
   return (element >= 10);
}

let passed = baskets.filter(moreThanTenApples);
console.log("Those baskets have more than 10 apples: " + passed ); // "Those baskets have more than 10 apples: 12, 130, 44"

‘Template literals’

Template literals je način da se naprave dinamični stringovi ili stringovi po šablonu, kao i da se njima rukuje. Sa ovim karakteristikama Javascripta, mnogo je lakše nositi se sa stringovima. Više nije bitno šta ste izabrali: ‘jednostruke navodnike’ ili “dvostruke navodnike”. Takođe, najvažnija nova stvar su: `backticks` u Javascript stringovima. Unutar backticks-a, mogu da se kombiniju jednostruki ili dvostruki navodnici koliko god mi to želimo.

let firstString = `He says: "Ok, let's do that".`; // He says: "Ok, let's do that".

// Variable interpolation
let name = "Joe";
let secondString = `Hi, my name is ${name}.`; // Hi, my name is Joe.

// Expression interpolation
let isMarry = true;
let thirdString = `Please say hello to ${isMarry ? "Marry" : "Mike"}!`; // Please say hello to Marry!

// Multi-line
let paragraph = `This is first line,
but this should be on second line.
And this on third line.`;
/*
This is first line,
but this should be on second line.
And this on third line.
*/

// HTML templates
let HTMLstring = `
<div>
  <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
  </ul>
</div>
`;
// returns HTML with unorder list and three elements

‘spread/rest’ operator

Sa pojavom ES2015, dobili smo još jedan jako koristan operator ‘…’ (tri tačke). Ukoliko ovaj operator razdvaja niz u listu argumenata, naziva se – spread operator. Međutim, ukoliko se koristi da grupiše listu argumenata u niz, naziva se – rest operator.

// Spread operator
function fruits(apples, bananas, pears){
  console.log(apples);
  console.log(bananas);
  console.log(pears);
}
fruitsNo = [7, 9, 14];

fruits(...fruitsNo);
/*
7
9
14
*/

// Rest operator
function getFruitsByBasket(apples, bananas, pears) {
  var fruits = [...arguments];
  var howMany = fruits.map(function (fruit){
       return fruit;
  });
  console.log(`In baskets, there are ${howMany} fruits.`)
}

getFruitsByBasket(6, 7, 8); // In baskets, there are 6,7,8 fruits.

Zaključak

Moderni Javascript čini život developer-a mnogo lakšim. Neke od opisanih karakteristika su široko prihvaćene u Javascript zajednici. Uz to, Javascript je najbrže-rastući jezik u svetu developer-a i stoga su mogućnosti modernog Javascript-a gotovo beskonačne.