Category: Vanilla JavaScript

Javascript Objects

Objects

Definition: Objects in Javascript are used to group related data and functions together. Each piece of data inside an object is called a property.

Syntax:

var myComputer = { // variable is assigned to object starts with a curly brace
operatingSystem: 'Mac', // each property starts with a property name, semicolon, property value in quotes if string. Each property is separated by a comma

screenSize: '15 inches',
purchaseYear: '2011'
}; // ends with a curly brace. The last object ends with a semicolon

Calling an Object

To call an entire object, type object name.
To call a property, type the object name followed by a period and property name.

Method

A method is a property of an object that is a function.

For Loop

Example in English: i = 0 // Initialization Say “hey” if i < 3 // Condition Increase i by 1 // Final Expression Syntax: for (initializtion; condition; final-expression) { } Example: for (var i = 0; i < 3; i++) { console.log("hey"); }

Javascript Functions

Functions

Definition: Functions are just recipes. To use declare function followed by function name and parenthesis and braces. Lines within a function ends in semicolons.
Syntax:// function syntax – runs code with no options
function functionName() {
// code here
}

Functions with Parameters

Parameter – Values inside the () when creating a function are called parameters.
Arguments – Values inside the () when running a function are called arguments.

Syntax:// function syntax – runs code with parameter with argument
function functionName(parameter) {
// code here
}
// run function
functionName(argument)

Customizing Functions

A variable or ‘string’ can be added to a function inside the (). This makes a function customizable.

Example:
function sayHiTo(person) {
console.log(‘hi’, person);
}

//run function
sayHiTo(‘gordon’) // person = ‘gordon’

= hi gordon

Functions Inside Functions

var todos = [‘item 1’, ‘item 2’, ‘item 3’]

function displayTodos() {
console.log(todos);
}

function addTodo(todo) {
todos.push(todo);
displayTodos();
}

Functions with Multiple Parameters

Example:
function changeTodo(position, newValue) {
todos[position] = newValue;
displayTodos();
}

Javascript Comments

Create a comment by writing // at the beginning of the line

Complete code for Todo List
var todos = [‘item 1’, ‘item 2’, ‘item 3’];

// It should have a function to display todos
function displayTodods () {
console.log(‘My Todos:’, todos);
}

//It should have a function to add todos
function addTodo(todo) {
todos.push(todo);
displayTodos();
}

//It should have a function to change todos
function changeTodo(position, newValue) {
todos[position] = newValue;
displayTodos();
}

//It should have a function to delete todos
function deleteTodo(position) {
todos.splice(position, 1);
displayTodos();
}

Variable Scope in Functions

If you’re inside a function, you can look out and see data, but the opposite isn’t true. If you’re outside, you can’t look in

Example

var myName = ‘Gordon’;

function sayName() {
var secret = ‘watchandcode’;
console.log(myName)
}
sayName(); // ‘Gordon’
console.log(secret); // error – can’t see variable inside function

Checking Your Code with Circles & Arrows

Draw circles around each function. Draw arrows from where the variable is being called to where it is declared. The only rule is arrows can’t enter circles, only exit. Any arrow trying to enter a circle is trying to read variable data that is out of its scope.

Javascript Arrays

Arrays

Definition: Array is a term for a list in JavaScript
Syntax: Each item surrounded by a quotation and group surrounded by bracket separated with commas.
Example: [‘Item 1’, ‘Item 2’, ‘Item 3’]

Variables

Definition: Variables is a container that stores information
Syntax: start with var, then variable name, =, then the value to set variable to
Example: var todos = ['Item 1', 'Item 2', 'Item 3']

console.log() Function

console.log() – Prints to console. Can take multiple items.
Example:

var todos = ['Item 1', 'Item 2', 'Item 3']
console.log("My ToDos:", todos)
= My ToDos: ["item 1", "item 2", "item 3"]

Adding Array Items

.push() Function

.push() – command to add items to an array. Think of it as pushing to (adding to the end of) the array. Returns new number of items in the array
Example: todos.push(‘item 4’)
= 4
console.log(“My ToDos:”, todos)
= My ToDos [“item 1”, “item 2”, “item 3” ‘item 4’]

Calling Array Items

Call a array item – to call a specific item in an array use brackets with a number within. Important, the first item is 0, second item is 1, ect.
Syntax: varName[number]
Example:
todos[0]
= item 1

Changing Array Items

Change an array item – to change an array i
Syntax: varName[number] = ‘new value’
Example: todos[0] = ‘item 1 updated’
= “item 1 updated”

Deleting Array Items

.splice() – Deletes array items. requires first item to delete and how many items. Returns the deleted item. If [] is returned, the command wasnt able to delete anything.

Syntax: array.splice(firstItem, numItems)
Example:
todos.splice(0, 1) – deletes first item