JavaScript Function Invocation

The code inside a JavaScript function will execute when “something” invokes it.

Invoking a JavaScript Function

The code inside a function is not executed when the function is defined.

The code inside a function is executed when the function is invoked.

It is common to use the term “call a function” instead of “invoke a function“.

It is also common to say “call upon a function”, “start a function”, or “execute a function”.

In this tutorial, we will use invoke, because a JavaScript function can be invoked without being called. Continue reading JavaScript Function Invocation

JavaScript Function Parameters

A JavaScript function does not perform any checking on parameter values (arguments).

Function Parameters and Arguments

Earlier in this tutorial, you learned that functions can have parameters:

function functionName(parameter1, parameter2, parameter3) {
  // code to be executed
}

Function parameters are the names listed in the function definition.

Function arguments are the real values passed to (and received by) the function. Continue reading JavaScript Function Parameters

JavaScript Function Definitions

JavaScript functions are defined with the function keyword.

You can use a function declaration or a function expression.

Function Declarations

Earlier in this tutorial, you learned that functions are declared with the following syntax:

function functionName(parameters) {
  // code to be executed
}

Declared functions are not executed immediately. They are “saved for later use”, and will be executed later, when they are invoked (called upon). Continue reading JavaScript Function Definitions

JavaScript Object Protection

Object Protection Methods

// Prevents re-assignment
const car = {type:"Fiat", model:"500", color:"white"};

// Prevents adding object properties
Object.preventExtensions(object)

// Returns true if properties can be added to an object
Object.isExtensible(object)

// Prevents adding and deleting object properties
Object.seal(object)

// Returns true if object is sealed
Object.isSealed(object)

// Prevents any changes to an object
Object.freeze(object)

// Returns true if object is frozen
Object.isFrozen(object)

Using const

The most common way to protect an object from being changed is by using the const keyword.

With const you can not re-assign the object, but you can still change the value of a property, delete a property or create a new property. Continue reading JavaScript Object Protection

JavaScript Object Accessors

JavaScript Accessors (Getters and Setters)

ECMAScript 5 (ES5 2009) introduced Getter and Setters.

Getters and setters allow you to define Object Accessors (Computed Properties).

JavaScript Getter (The get Keyword)

This example uses a lang property to get the value of the language property.

Example

// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  language: "en",
  get lang() {
    return this.language;
  }
};

// Display data from the object using a getter :

document.getElementById("demo").innerHTML = person.lang;

JavaScript Setter (The set Keyword)

This example uses a lang property to set the value of the language property. Continue reading JavaScript Object Accessors

JavaScript Object Properties

Property Management Methods

// Adding or changing an object property
Object.defineProperty(object, property, descriptor)

// Adding or changing object properties
Object.defineProperties(object, descriptors)

// Accessing a Property
Object.getOwnPropertyDescriptor(object, property)

// Accessing Properties
Object.getOwnPropertyDescriptors(object)

// Returns all properties as an array
Object.getOwnPropertyNames(object)

// Accessing the prototype
Object.getPrototypeOf(object)

JavaScript Object.defineProperty()

The Object.defineProperty() method can be used to:

  • Adding a new property to an object
  • Changing property values
  • Changing property metadata
  • Changing object getters and setters

Continue reading JavaScript Object Properties

JavaScript Object Methods

General Methods

// Copies properties from a source object to a target object
Object.assign(target, source)

// Creates an object from an existing object
Object.create(object)

// Returns an array of the key/value pairs of an object
Object.entries(object)

// Creates an object from a list of keys/values
Object.fromEntries()

// Returns an array of the keys of an object
Object.keys(object)

// Returns an array of the property values of an object
Object.values(object)

// Groups object elements according to a function
Object.groupBy(object, callback)

JavaScript Object.assign()

The Object.assign() method copies properties from one or more source objects to a target object. Continue reading JavaScript Object Methods

JavaScript Object Prototypes

All JavaScript objects inherit properties and methods from a prototype.

In the previous article we learned how to use an object constructor:

Example

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}

const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

We also learned that you can not add a new property to an existing object constructor : Continue reading JavaScript Object Prototypes

JavaScript Object Definition

Methods for Defining JavaScript Objects

  • Using an Object Literal
  • Using the new Keyword
  • Using an Object Constructor
  • Using Object.assign()
  • Using Object.create()
  • Using Object.fromEntries()

JavaScript Object Literal

An object literal is a list of property names:values inside curly braces {}.

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Note:

An object literal is also called an object initializer.

Continue reading JavaScript Object Definition

JavaScript Reserved Words

In JavaScript you cannot use these reserved words as variables, labels, or function names:

abstract arguments await* boolean
break byte case catch
char class* const* continue
debugger default delete do
double else enum* eval
export* extends* false final
finally float for function
goto if implements import*
in instanceof int interface
let* long native new
null package private protected
public return short static
super* switch synchronized this
throw throws transient true
try typeof var void
volatile while with yield

Words marked with* was new in ECMAScript 5 and ECMAScript 6. Continue reading JavaScript Reserved Words