DISCLAIMER: this is just an experiment, there's no evidence to suggest this is a good idea

This is a small guide intended to aid you in learning JS by quickly scrolling through incrementally complex examples, that subtly introduces new concepts over time. To run them, the devtools console will do just fine, but you can use mostly any other method, like referencing a file in a <script> tag or using NodeJS. You are encouraged to make changes to them and play around, perhaps in a pen ;)

At the end of each chapter, there will be links (if any) to delve deeper into that subject.

This chapter is best understood after going through all basics chapters, starting from basics 1.1

  let x = 1;
console.log(x);
// 1

  let x = 1;
x = 2;
console.log(x);
// 2

  let x = 1;
x = x + 1;
console.log(x);
// 2

  const x = 1;
console.log(x);
// 1

  const x = 1;
x = 2;
// ERROR: Uncaugh TypeError: Assignment to constant variable
console.log(x);
// the log never runs

  let x = 1;
const y = 2;
x = y;
console.log(x, y, x === y);
// 2, 2, true

  const xs = [1, 2, 3];
xs.push(4);
xs[0] = 100;
console.log(xs);
// [100, 2, 3, 4]

  const xobj = {
  a: 1,
  b: 2
};
xobj.c = 3;
xobj.a = 100;
console.log(xobj);
// {a: 100, b: 2, c: 3}

  const xs = [1, 2, 3];
xs = [4, 5, 6];
// ERROR: Uncaught TypeError: Assignment to constant variable
console.log(xs);
// the log never runs

  let number = 3;
console.log(number);
number = 'but this is not a number';
console.log(number);
// 3
// "but this is not a number"

  let x = 1;
{
  let x = 9;
  console.log(x):
}
console.log(x);
// 9
// 1

  let x = 1;
{
  x = 9;
  console.log(x);
}
console.log(x);
// 9
// 9

  let x = 1;
if(true) {
  let x = 9;
  console.log(x);
}
console.log(x);
// 9
// 1

  let x = 1;
if(true) {
  x = 9;
  console.log(x);
}
console.log(x);
// 9
// 9

  let x = 99;
let i = 0;
console.log('from loop');
while(i < 5) {
  i = i + 1;
  x = i;

  console.log(x);
}
console.log('from outside of loop');
console.log(x);
// "from loop"
// 1
// 2
// 3
// 4
// 5
// "from outside of loop"
// 5

  let x = 99;
let i = 0;
console.log('from loop');
while(i < 5) {
  i = i + 1;
  let x = i;

  console.log(x);
}
console.log('from outside of loop');
console.log(x);
// "from loop"
// 1
// 2
// 3
// 4
// 5
// "from outside of loop"
// 99

  let n = 3;
const logSuccessor = (n) => {
  console.log(n + 1);
}
logSuccessor(100);
console.log(n);
// 101
// 3

  let n = 1;
let x = 9;
const logSelfAndSuccessor = (n) => {
  let x = n + 1;
  console.log(n, x);
}

logSelfAndSuccessor(100);
console.log(n, x);
// 100, 101
// 1, 9

  let xobj = {
  a: 1,
  b: 9
};
let a = xobj.a;
let b = xobj.b;
console.log(a, b);
// 1, 9

  let xobj = {
  a: 1,
  b: 9
};
let {a, b} = xobj;
console.log(a, b);
// 1, 9

  let xs = [1, 9];
let a = xs[0];
let b = xs[1];

console.log(a, b);
// 1, 9

  let xs = [1, 9];
let [a, b] = xs;
console.log(a, b);
// 1, 9

  let xobj = {
  a: 1,
  b: 9
};
let { x } = xobj;
console.log(x);
// 1

  let xs = [1, 9];
let [a] = xs;
console.log(a);
// 1

  const getX = (obj) => obj.x;
const xobj = {
  x: 1,
  y: 9
};
console.log(getX(xobj));
// 1

  const getX = ({ x }) => x
const xobj = {
  x: 1,
  y: 9
};
console.log(getX(xobj));
// 1

  const getXSuccessor = ({ x }) => x + 1;
const xobj = {
  x: 1,
  y: 9
};
console.log(getXSuccessor(xobj));
// 2

  const getFirst = (arr) => arr[0];
const xs = [1, 9];
console.log(getFirst(xs));
// 1

  const getFirst = ([first]) => first;
const xs = [1, 9];
console.log(getFirst(xs));
// 1

  const getYSuccessor = ({ y }) => y + 1;
const xobj = {
  x: 1,
  y: 9
};
console.log(getYSuccessor(xobj));
// 10

  const getXPlusY = ({ x, y }) => x + y;
const xobj = {
  x: 5,
  y: 10
};
console.log(getXPlusY(xobj));
// 15

  const getSecond = ([_, second]) => second;
const xs = [1, 9];
console.log(getSecond(xs));
// 9

  const firstPlusSecond = ([first, second]) => first + second;
const xs = [5, 10];
console.log(firstPlusSecond(xs));
// 15

  const x = 1;
const xobj = {
  x: x,
  y: 9
};
console.log(xobj);
// {x: 1, y: 9}

  const x = 1;
const xobj = {
  x,
  y: 9
};
console.log(xobj);
// {x: 1, y: 9}

All of these topics will be further covered in either later chapters, or in the "advanced" series. Until then, check out the mdn pages for let, const, and destructuring. Do note that the content on mdn assumes more knowledge that has either not been covered yet (the ... spread operator), has had improvements and rendered almost useless (var), or goes against modern practices I follow (the function keyword). Nevertheless, I often look at mdn if I have some doubts, it's an amazing source of knowledge that is currently the standard for user-friendly javascript documentation.

This concludes the first chapter of the everyday series! The next one is about numbers and operations: everyday 2.2! Any feedback or suggestions can be sent to me either in the comments, or via twitter :D


3,119 0 8