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
All lines beginning with 2 slashs //
are ignored.
And any text between /*
and */
are ignored.
// this is single line comment /* this is multi-line comment. */
Printing
To print, use alert
or console.log
.
alert("hello"); // bring up a pop-up dialog
console.log("hello"); // print to browser's console
To see the output of console.log
, open your browser's JavaScript console.
[see How to Use Browser Console]
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.
String
Arithmetic
Basic arithmetic.
3 + 4; // 7 3 - 4; // -1 // negation -(3+4); // -7
// multiply, divide 3 * 4; // 12 3 / 4; // 0.75
// remainder (mod) 10 % 3; // 1
// power 2**3 // 8
// square root console.log(Math.sqrt(4) === 2); // true // cube root console.log(Math.cbrt(8) === 2); // true // 4th root console.log(Math.pow(16, 1 / 4) === 2); // true
[see Math]
Assignment
Assignment lets you store a value to a variable.
let z = 5; // 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 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
Use one of
Math.ceil()
Math.floor()
Math.round()
to convert a number to integer.
let x = 3.5847; let f = Math.floor( x ); let c = Math.ceil( x ); console.log(f); // prints 3 console.log(c); // prints 4 console.log(Math.round( 3.54 )); // prints 4 console.log(Math.round( 3.55 )); // prints 4
[see Math]
String/Number Conversion
Variables
The following are ways to declare and or assign variable.
// declare variable let x;
// declare multiple variables let a, b, c;
// declare variable and assign let x = 4;
// declare variable and assign multiple variables let a = 1, b = 2, c = 3;
// declare multiple variables, some with value let a, b = 2, c;
[see let Declaration]
Besides let
, there's 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
// The “and” operator true && true // true // The “or” operator true || true // true // The “negation” operator !true // false
Comparison Operators
3 < 4; // true 3 > 4; // false 3 == 3; // true. 3 == "3"; // true. note: 「==」 does automatic type conversion 3 === "3"; // false. True if both sides are same type and equal 3 != 4; // true. The 「!=」 is the negation of 「==」 3 !== 4; // true. The 「!==」 is the negation of 「===」
What is the difference between ==
and ===
?
==
does automatic type conversion. ===
does not.
You should 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 ); // true
For detail, see Define Function