md`# JavaScript Basics`
md`
## Structural Types
### Array
The JavaScript Array class is a global object that is used in the construction of arrays; which are high-level, list-like objects. Arrays cannot use strings as element indexes (as in an associative array) but must use integers.
Example:
\`\`\`JavaScript
//creating an array in JS
let fruits = ['Apple', 'Banana', 'cherry'];
// Apple
let first = fruits[0];
//3
console.log(fruits.length)
\`\`\`
Reference from [MDN Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array).
### Object
#### Define an Object
Objects can contain many values. It's similar to python's dictionary. The values are written as **name:value** pairs (seperating with a colon):
\`\`\`JavaScript
var person = {
firstName: "Edward",
lastName: "Johns",
age: 34
};
\`\`\`
#### Object Properties
The name:values pairs in JavaScript objects are called **properties**:
<img src="${await FileAttachment("image.png").url()}" style="width: 1000px;">
#### Accessing Properties
There are two ways of accessing the property:
* *objectName.propertyName*
* *objectName[propertyName]*
Choose the *dot property accessor* when the property name is known ahead of time. It will responds correctly when the property name is a proper identifier (An identifier in JavaScript contains Unicode letters, $, _, and digits 0..9, but cannot start with a digit.).
Choose to use the *square brackets property accessor* when the property name is determined at runtime, or when the identifier doesn't work for dot property accessor.
#### Object Methods
Objects can also have methods in them. Methods are stored in properties as function definitions.
Methods are functions stored as property.
<img src="${await FileAttachment("image@1.png").url()}" style="width: 1000px;">
Example:
\`\`\`JavaScript
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
\`\`\`
#### Accessing a Methods
An object method can be access with the following syntax:
* *objectName.methodName()*
If you access a method without the () parentheses, it will return the function definition.
Note: Try to avoid String, Number, and Boolean objects. They will slow down execution speed.
reference and pictures from:
[W3Schools JS Object](https://www.w3schools.com/js/js_objects.asp).
For difference between Javascript and Python:
[Python vs JavaScript for Pythonistas](https://realpython.com/python-vs-javascript/)
`
md`
## Different Kinds of Loops
### For Loop
\`\`\`JavaScript
for (i = 0; i < 5; i++) {
//01234
Consold.log(i);
}
\`\`\`
### For-of Loop
The for...of statement creates a loop iterating over iterable objects, including: built-in String, Array, array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables. (reference from [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)).
\`\`\`JavaScript
const array1 = ['a', 'b', 'c'];
for (const element of array1) {
console.log(element);
}
// expected output: "a"
// expected output: "b"
// expected output: "c"
\`\`\`
### while loops
The while loop loops through a block of code as long as a specified condition is true.
\`\`\`JavaScript
while (condition) {
// code block to be executed
}
\`\`\`
<br>
## If statement
* Use *if* to execude code if a specified condition is true
* Use else to execude code if the same condition is false
* Use else if to specify a new condition if the first condition is false
\`\`\`JavaScript
if (time < 8) {
meal = "breakfast";
} else if (time < 12 ) {
meal = "breakfast";
} else {
meal = "breakfast";
}
\`\`\`
`
md`
## Arrow function VS Traditional function
Arrow functions were introduced in ES6, and they allow us to write shorter function syntax:
**(param1, paramN) => expression**
<br>
Example:
\`\`\`JavaScript
//Traditional function
hello = function() {
return "Hello World!";
}
//Arrow function
hello = () => {
return "Hello World!";
}
// Traditional Function
function (a){
return a + 100;
}
// Arrow Function Break Down
// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
return a + 100;
}
// 2. Remove the body brackets and word "return" -- the return is implied.
(a) => a + 100;
// 3. Remove the argument parentheses
a => a + 100;
\`\`\`
`
md`
## Other
### Strict equality (===)
Comparing to the normal equality operator (==), stricr equality checks whether the two operands are equal, and it also check whether the type of the two operands are the same, returning a boolean result.
\`\`\`JavaScript
console.log("3" === 3); // false
console.log("3" == 3); // true
\`\`\`
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
