JavaScript Fundamentals

Description

Set of JavaScript cards outlining basics such as primitive vs composite data types, simple arithmetic and logical operators, basic use of functions, objects (to incl. arrays) conditional statements and loops. Introduces the concepts of scope and context.
Andrew Watters
Flashcards by Andrew Watters, updated more than 1 year ago
Andrew Watters
Created by Andrew Watters over 5 years ago
305
3

Resource summary

Question Answer
Object Literal Syntax
Primitive (Primary) Data Types The Primitive (or Primary) data-types in JavaScript are String, Number, Boolean, Undefined, Null and Symbol (new in ES6). Primitive types are considered value types. They are not objects, and have no methods or properties.
Composite (Reference) Data Types If a type is not one of the primitive data-types, it is almost always on object. These are considered reference types. Functions, Objects (including Arrays), Dates, and Regular Expressions are examples of composite data-types.
What is an Object? An object is a wrapper which may hold any number of key-value pairs. Values may be any of the Primitive data types (number, string, etc) or other Objects, Methods or Arrays.
Object Creation
Setting/Accessing Object Properties
What is an Array? An array is a specific, list-like object in JavaScript. Instead of having key-value pairs, each value is accessed via its index (zero-based). Items in the Array are typically referred to as elements.
Array Creation
Accessing Elements (Arrays)
For Loop (Array)
For Loop (Object)
While/Do While Loops
What is a function? Functions are stored snippets of code that execute when they are invoked. They can be declared anonymously or stored in a variable. A function can be defined with parameters, and receive arguments when it is invoked. Upon completion, the "return" keyword is used to pass data out of the function back to the global scope.
Function Declaration Syntax
Function Expression Syntax
What is hoisting? What types of functions are hoisted in JavaScript? When a JavaScript file is loaded, function declarations are "hoisted" to the top of the code by the browser prior to the execution of any code. This allows them to be "known" and utilized/called before they are declared in the actual source-code. Function declarations are hoisted but function expressions are not.
Which of these functions will be hoisted, and why? The multiply function will be hoisted because it is a function declaration. Since the subtract function is a function expression, it will not be hoisted.
+=, -=, *=, /=, %= (Arithmetic Assignment Operators) The arithmetic assignment operators perform the action of the +, -, *, / OR % operator and then re-assign the variable or property on the left to the resultant value. They are called the addition/subtraction/multiplication/division/remainder assignment operators (respectively).
+, -, *, /, % (Arithmetic Operators) The arithmetic operators perform the expected operations: addition, subtraction, multiplication, division and remainder, (respectively). note: The + operator is also used for string concatenation (adding strings together).
++, -- (Arithmetic Operators) The increment/decrement operators (respectively) increase/decrease the value of a number by 1. If called on a non-number they yield NaN.
% (Arithmetic Operator) Modulus Operator: Returns the remainder left over when one operand is divided by a second.
= (Logical Operator) Assignment Operator: points (assigns) the value of the variable or property on the left to the value of the right operand.
== (Logical Operator) Equality Operator: Compares value of two variables/properties, converting them to the same type for comparison.
=== (Logical Operator) Strict Equality Operator: Compares left and right operands, returning true if they are equal in type and value. If comparing two objects, will not check for "deep-equality"
!== (Logical Operator) Strict Inequality Operator: Compares the value and type of the left and right operands, returning true if they are not equal and/or not of the same type.
!= (Logical Operator) Inequality Operator: Compares the left and right operands, returning true if they are not equal in value. If types differ, type is converted for the comparison.
< , > (Logical Operators) Less than and greater than (respectively), compare whether one number is less/greater than another, returning true if so and false otherwise.
<= , >= (Logical Operators) The less-then/Greater-than (respectively) or equal to operators, compare whether one number is less/greater than, or equal to another, returning true if so and false otherwise.
! (Logical Operator) "NOT" Operator: Returns false is it's operand is "truthy" (evaluates to true in a boolean context)
&& (Logical Operator) "AND" Operator: Returns true if both the left and right operands are "truthy" (evaluate to true in a boolean context)
|| (Logical Operator) "OR" Operator: Returns true if either the left or right operands are "truthy" (true in a boolean context). Checks the left operand first and exits with true if it is "truthy".
? (Logical Operator) Ternary Operator: Checks if an expression is true, returning the value to the left of the : operator if so and the value to the right otherwise.
Conditional Statement Syntax
Ternary Operator Syntax
What is a switch statement? The switch statement evaluates an expression, matching the expression's value to a case clause, and executes a block associated with that case. If no case is met, the "default" case will execute. Note: Switch statements can be used in lieu of a conditional or ternary statements
Switch Statement Syntax
What is a "truthy" value? "Truthy" values are values that evaluate to "true" in a boolean context. All values except NaN, null, undefined, 0 (typeof number), false and "" (empty string) are "truthy" in JavaScript.
What is a dialog? Dialogs are contextual message that stop JavaScript execution. They are commonly used to inform or provide feedback to the end user. Alert, confirm and prompt are examples and can all be accessed via the global "window" object.
What is context? Context references the object where the currently executing code exists. It refers to the value of the "this" keyword which, at the global level is the window object and determines which variables are accessible. Although often confused with scope, context is object-based whereas scope is function based.
What is scope? Scope refers to the current level at which variables are accessible within JavaScript. Every function will have its own scope and can access variables in its own scope and at the global scope (accessible anywhere). Although often confused with context, scope is function based whereas context is object based.
What is the difference between Scope and Context? Fundamentally, scope is function-based whereas context is object-based. All functions have both a scope and a context (because they are objects) but objects only have context, and no scope.
Scope Syntax (Example)
Context Syntax (Example)
Show full summary Hide full summary

Similar

Translations and transformations of functions
Christine Laurich
JavaScript
Heather Sorrells
Food Technology - Functions of ingredients
evie.daines
Art & Design in Context
Chloe Scott
Respiratory System
Addeana
Algebra Quiz
Norman McBrien
A Streetcar Named Desire- Context Quiz
Grace Fawcitt
B1 Conditionals recap
Esther Alabart
Functions of a Political Party
Phoebe Fletcher
The Merchant of Venice by William Shakespeare - context
Ona Ojo
Flash cards on cardiovascular system
offintowonderland