JSFiddle - React, Tailwind, and code Playground

by Caitlin Allie

JavaScript

// Arrow syntax for functions
var test = function (thing) {
	return thing;
}

var test1 = (thing) => {
	return thing;
}

var test2 = (thing) => thing;
var singleArg = thing => thing;

// Let for block scoping
let message = 'hi';
{let message = 'bye'}

console.log(message);

// Default values for function params
function greet(greeting, name = 'Caitlin') {
   console.log(greeting, ', ', name);
}
greet('Sup');

//Assign default function as param
function receive(complete = () => console.log('complete')) {
	complete();
}
receive();

//Contants are read only, and adhere to block scope
const VALUE = 'hello world';
//VALUE = 'cannot change this';
const VALUE2 = {};
VALUE2.whatev = 'can change this';
console.log(VALUE);
console.log(VALUE2);

//Shorthand properties - easily construct objs
let firstName = 'Caitlin';
let lastName = 'Allie';
let person = {firstName, lastName};
console.log(person);

let mascot = 'Dragon'
let team = {person, mascot};
console.log(team);

//Spreading
let first = [1, 2];
let second = [3, 4];
first.push(...second);
console.log(first);

//Pluck values:
function addThreeThings(a, b, c) {
	let result = a + b + c;
  console.log(result);
}
addThreeThings(...first);

//Template literals
var word = 'Hello';
var sentence = `${word}, world`;
console.log(sentence);


//Destructuring
var {color} = {
	color: 'blue'
};
console.log(color);

function generateObj(){
	return {
  	color: 'blue',
    name: 'Caitlin'
  }
}
var {name, color} = generateObj();
console.log(name);
console.log(color);
var {name:fname, color} = generateObj();
console.log(fname);
console.log(color);

var [one,,,,five] = ['one', 'two', 'three', 'four', 'five'];
console.log(one);
console.log(five);


//Modules - exports and imports
/* function sumTwo (a, b) {
   return a + b
}
{ export sumTwo };

import { sumTwo } from 'your/path';
import * as addition from 'your/path';
addition.sumTwo(1, 2); */


//Array.prototype.includes()
let numbers = [1,2,3];
if(numbers.includes(2)) {
 ...