JavaScript Basics
This page teaches you the basics of JavaScript, for beginners, in 30 minutes.
This tutorial teachs the ES2015 version of JavaScript.
ES2015 is a new JavaScript spec released in 2015, and is supported by all browsers now. It adds significant features to the language.
Running JavaScript
Comment
Printing
String
Semicolon can be omitted most of the time. When to insert semicolon is complex. For now, just follow examples in this tutorial. For detail, see Semicolon Rules.
Arithmetic
Basic arithmetic.
// plus, add console.log((3 + 4) === 7); // minus, substraction console.log((3 - 4) === -1); // negation console.log(-(3 + 4) === -7); console.log(-(-3) === 3); // multiply console.log(3 * 4 === 12); // divide console.log(3 / 4 === 0.75);
[see Math Operators]
Assignment
Assignment lets you store a value to a variable.
let z = 5; console.log(z === 5);
Assignment returns a value.
// assignment returns a value let z; console.log((z = 2) === 2);
JavaScript also supports x++
and others.
[see Assignment Operators]
Number
JavaScript doesn't have int/float distinction. They are just type “number”. It's similar to other language's “float”.
console.log(typeof 3 === "number"); console.log(typeof 3.2 === "number"); // true
Convert Decimal to Integer
to convert a number to integer.
console.log(Math.floor(3.5847) === 3); console.log(Math.ceil(3.5847) === 4); console.log(Math.round(3.54) === 4); console.log(Math.round(3.55) === 4);
[see Math]
String/Number Conversion
Variables
The following are ways to declare and or assign variable.
// declare variable let x;
// declare variable and assign let x = 4;
[see let Declaration]
Besides let
, there is also const
and var
. They all have the same syntax.
const
is like let
, except that it must be assigned a value, and once assigned, it cannot be changed.
[see const Declaration]
var
is like let
, but has complex scoping rules and has name hoisting.
var
is deprecated in JS2015. You should never use it.
[see var Declaration]
Data Types
Every JavaScript value has a type.
JavaScript value types are:
undefined
null
true
,false
(these are boolean type.)- string
- number (including
NaN
andInfinity
) - symbol
- object. (this includes array, function, regex, ….)
[see Value Types]
True and False
true
and false
are builtin boolean data types.
Zero, empty string, undefined
, null
, NaN
, eval to false
in a “if” statement. Everything else eval to true
.
[see true, false]
Logic Operators
// logical and console.log((true && true) === true); // logical or console.log((true || true) === true); // logical negation console.log((!true) === false);
Number Comparison Operators
console.log(3 < 4); console.log((3 > 4) === false); console.log(3 == 3); console.log(3 == "3"); // note: == does automatic type conversion console.log((3 === "3") === false); // True if both sides are same type and equal console.log(3 != 4); // The != is the negation of == console.log(3 !== 4); // The !== is the negation of ===
What is the difference between double-equal and triple-equal?
==
does automatic type conversion. ===
does not.
TIP: always use ===
If Then Else
Simple “if” statement.
if (3 < 4) console.log("yes");
“if else” statement.
if (3 <= 4) console.log("yes"); else console.log("no");
“else if” chain.
let x = 3; if (x == 1) console.log("is 1"); else if (x == 2) console.log("is 2"); else if (x == 3) console.log("is 3"); else console.log("not found");
[see Branch Control: if then else, switch]
Iteration; Loop
The most useful loop syntax is “for” loop.
for (let i = 0; i < 9; i++) console.log(i);
[see for while do Loop]
Array
Define Function
Example of defining a function:
function ff(x, y) { return x + y; } console.log(ff(3, 4) === 7);
Another example using “arrow function” syntax:
const addOne = ((x) => (x + 1)); console.log(addOne(3) === 4);
For detail, see Define Function