Javascript Done Quick
Introduction
JavaScript is a powerful script programming language that commonly used for web development (it can also be used for other purposes too, but web development is the most popular use). With endless support libraries and frameworks, JavaScript is growing strongly.
This guide will cover basic topics that you may need to know for the CSSC Open-source Contest. Note that we will mostly go through keywords and important concepts, and you may want to read other documentation for more details.
Compile JS Code
- Nodejs: The most popular environment for executing JS code, with the use
of V8 engines. You can install Nodejs here:
Download | Node.js (nodejs.org). After
installing successfully Node to your computer, you can run your .js files by
doing this in your Command-line/Powershell
path-to-folder-where-js-file-located>node example.js // run example.js file
- Online IDE: There are many online IDEs that support editing and compiling JS code. Note that you can choose either Nodejs or VanillaJS for development (which technically are both JavaScript).
- Browser Devtool: Your browsers (Google, Microsoft Edge, Firefox,...) also
support V8 engines to execute your code! You can go to More (3-dot icon at the
top right bar) > More Tools > Developer Tool, or using
Ctrl+Shift+I
/F12
Now you can compile your JS Code in the Console of Developer Tool!
Data Types
- String
- Notable methods:
replace
slice
split
join
trim
- String template: Using backticks ``
const hi = 'Hello' console.log(`${hi}, World!`) // print Hello, World! in the console
- Notable methods:
- Number
- Array
- Properties:
length
: return length of array
- Notable methods:
toString
: convert array to string (default is comma separated)pop
: remove the last element in arraypush
: add a new element at the end of arraysplice
: add or remove itemsslice
: slice out part of array
- Built-in array iteration:
forEach
: iterate through each element or array and execute parameter function
const arr = [1, 2, 3] arr.forEach(printNum) // print each number with a new line in the console function printNum(num) { console.log(num) }
map
: creates a new array by performing a function on each array element
const arr = [1, 2, 3] const doubledArr = arr.map(doubleNum) function doubleNum(num) { return num * 2 } console.log(doubledArr) // we can expect [2, 4, 6] being printed in the console
filter
: creates a new array with array elements that passes a test performing by a given function
const arr = [1, 2, 3] const evenArr = arr.filter(isEven) function isEven(num) { return num % 2 === 0 } console.log(evenArr) // we can expect [2] being printed in the console
indexOf
: searches an array for an element value and returns its position.
const arr = [1, 2, 3] const position = arr.indexOf(2) console.log(position) // 1 (index of value 2) will be printed in the console
find
: returns the value of the first array element that passes a test function.
const arr = [1, 2, 3, 4] const firstEvenNumber = arr.find(isEven) function isEven(num) { return num % 2 === 0 } console.log(firstEvenNumber) // we can expect 2 (first even number) being printed in the console
findIndex
: returns the index of the first array element that passes a test function.
const arr = [1, 2, 3, 4] const firstEvenNumberIndex = arr.findIndex(isEven) function isEven(num) { return num % 2 === 0 } console.log(firstEvenNumberIndex) // we can expect 1 (index of first even number) being printed in the console
- Properties:
- Object
- properties
const person = { name: 'John Doe', age: 18, } console.log(person.name) // print John Doe in the console console.log(person.age) // print 18 in the console
- methods (functions stored as properties)
const person = { name: 'John Doe', age: 18, greeting: function() { console.log(`Hello, my name is ${this.name}. I am ${this.age} years old!`) }, } person.greeting() // call the method greeting, which will print "Hello, my name is John Doe. I am 18 years old!"
- Keyword
this
- In an object method,
this
refers to the object. - Alone,
this
refers to the global object. - In a function,
this
refers to the global object. - In a function, in strict mode,
this
is undefined. - In an event,
this
refers to the element that received the event. - Methods like call(), apply(), and bind() can refer
this
to any object.
- In an object method,
- Boolean:
true
andfalse
- Null: an object with an absence of value
- Undefined: a data type whose variable is not initialized
Variables
You must use keywords (var
, let
, or const
) to declare your variables. For
example:
const num = 1; // declare variable num with initial value of 1.
console.log(num); // Print 1 to the console
const maybeNum; // declare variable maybeNum without initial value. You must assign a value afterward before running the code.
Here are some key differences between these 3 keywords:
var | let | const | |
---|---|---|---|
Version supported | Beginning of JS | ES6+ | ES6+ |
Can reassign value? | Yes | Yes | No |
Can redeclare variables? | Yes | No | No |
Scope | Global, Function | Function, Block | Function, Block |
Operators & Logic
- Operators:
+
(Note that in JS we can add 2 or more values with different data types. You can read and experiment how JS handle such cases)-
*
/
%
- Logic
- Equivalent:
==
: compare values and check whether they are equivalent
> 2 == '2' < true
===
: compare values and data types to check whether they are equivalent
> 2 === '2' < false > 2 === 2 < true
- Comparision
>=
<=
!=
!==
- Negation:
!
- Equivalent:
Conditions
if
,else
,else if
- Conditional operators:
? :
// This if else statement
if (2 > 1) {
console.log('You can do math')
} else {
console.log('You must learn math')
}
// equals to the following statement
2 > 1 ? console.log('You can do math') : console.log('You must learn math')
- Switch & case (Source:
JavaScript Switch Statement (w3schools.com))
- The switch expression is evaluated once.
- The value of the expression is compared with the values of each case.
- If there is a match, the associated block of code is executed.
- If there is no match, the default code block is executed.
switch (new Date().getDay()) {
case 0:
day = 'Sunday'
break
case 1:
day = 'Monday'
break
case 2:
day = 'Tuesday'
break
case 3:
day = 'Wednesday'
break
case 4:
day = 'Thursday'
break
case 5:
day = 'Friday'
break
case 6:
day = 'Saturday'
}
Iteration
- For Loop (Source of Guide: W3Schools)
The
for
loop has the following syntax:for (*statement 1*; *statement 2*; *statement 3*) { // *code block to be executed* }
- Statement 1 is executed (one time) before the execution of the code block.
- Statement 2 defines the condition for executing the code block.
- Statement 3 is executed (every time) after the code block has been executed.
We can also perform thefor (let i = 1; i <= 5; i++) { console.log(i) }
for
loop with keywordsin
andof
. You can read more here: - While Loop
while (condition) { // code block to be executed when the condition evaluated to true }
- Keywords:
break
: exit the loopcontinue
: terminate the loop in current iteration and move to next iteration
Functions
(Source: W3Schools)
A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is executed when "something" invokes it (calls it).
Function parameters are listed inside the parentheses () in the function definition.
Function arguments are the values received by the function when it is invoked. Inside the function, the arguments (the parameters) behave as local variables.
- Formal function
- Defined with the
function
keyword, followed by a name, followed by parentheses ().
function *name*(*parameter1, parameter2, parameter3*) { // *code to be executed* }
- Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).
- The parentheses may include parameter names separated by commas:(parameter1, parameter2, ...)
- The code to be executed, by the function, is placed inside curly brackets: {}
- Defined with the
- Arrow function: new way to declare function in ES6+
// 2 functions below do the same thing const sayHi = () => { console.log('Hello World!') } const stillSayHi = () => console.log('Hello World!')
- The key difference between arrow functions and normal functions is the
reference of the
this
keyword. You can read more here: Difference between regular functions and arrow functions in JavaScript (tutorialspoint.com)
- The key difference between arrow functions and normal functions is the
reference of the
- Promises: JavaScript Promises (w3schools.com)
- Async & Await: Make a function executing asynchronously. More details: JavaScript Async/Await | W3Docs Tutorial.
Other Guidelines
- W3Schools
- Mozilla Developers