Skip to main content

Non Primitive Types

Non-primitive data types are objects that can store multiple values and have properties and methods. JavaScript has three non-primitive data types as discussed in the Data Types section. In this section, we will be talking about the non-primitive types in more detail.

Object​

The Object data type represents a collection of key-value pairs. It is a complex data type that can store multiple values and has properties and methods. Objects are used to represent real-world entities and are the building blocks of JavaScript. Here is an example of an object:

object.js
let person = {
  name: 'John Doe',
  age: 30,
  isEmployed: true
};

In the example above, the person object has three properties: name, age, and isEmployed. Each property has a key and a value. You can access the properties of an object using dot notation or bracket notation. Here is an example:

accessing-properties.js
let person = {
  name: 'John Doe',
  age: 30,
  isEmployed: true
};
console.log(person.name); // Output: John Doe
console.log(person['age']); // Output: 30

You can also add new properties to an object, update existing properties, and delete properties. Here is an example:

updating-properties.js
let person = {
  name: 'John Doe',
  age: 30,
  isEmployed: true
};
person.age = 35; // Update the age property
person['isEmployed'] = false; // Update the isEmployed property
person.city = 'New York'; // Add a new city property
delete person.isEmployed; // Delete the isEmployed property

Array​

The Array data type represents a list of elements. It is an ordered collection of values that can be of different data types. Arrays are used to store multiple values in a single variable and are one of the most commonly used data structures in JavaScript. Here is an example of an array:

array.js
let numbers = [1, 2, 3, 4, 5];

In the example above, the numbers array contains five elements: 1, 2, 3, 4, and 5. You can access the elements of an array using index notation. Here is an example:

accessing-elements.js
let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // Output: 1
console.log(numbers[2]); // Output: 3
note
  • Arrays in JavaScript are zero-indexed, meaning that the first element of an array has an index of 0. The last element of an array has an index of length - 1.
  • The index is used to access the elements of an array, update elements, and add new elements at a specific position.

You can also add new elements to an array, update existing elements, and remove elements. Here is an example:

updating-elements.js
let numbers = [1, 2, 3, 4, 5];
numbers[2] = 10; // Update the element at index 2
numbers.push(6); // Add a new element to the end of the array
numbers.pop(); // Remove the last element from the array, also returns the removed element

Function​

The Function data type represents a block of code that can be executed. Functions are used to perform specific tasks or calculations and can be reused throughout a program. Functions are one of the fundamental building blocks of JavaScript and are used to organize and structure code. Here is an example of a function:

function.js
function greet() {
  console.log('Hello, World!');
}

Calling a Function​

After defining a function, you can call it to execute the code inside the function.

calling-function.js
function greet() {
  console.log('Hello, World!');
}
greet() // Output: Hello, World!

To call a function, you use the function name followed by parentheses. You can pass arguments to the function inside the parentheses.

Parameters and Arguments​

A function can take zero or more parameters. Parameters are variables that are defined in the function signature and are used to pass values to the function. Arguments are the actual values that are passed to the function when it is called. Multiple parameters or arguments are separated by commas. Here is an example of a function with parameters:

parameters.js
function greet(name) {
  console.log(`Hello, ${name}!`);
}
greet('John'); // Output: Hello, John!

In the example above, the greet function takes a name parameter and logs a greeting message with the name(John in this case) passed as an argument.

Positional Arguments​

When you call a function, you can pass arguments to the function by separating them with commas inside the parentheses. The order of the arguments must match the order of the parameters in the function signature. Here is an example:

positional-arguments.js
function greet(firstName, lastName) {
  console.log(`Hello, ${firstName} ${lastName}!`);
}
greet('John', 'Doe'); // Output: Hello, John Doe!

Default Parameters​

You can define default parameter values for a function. If an argument is not passed to the function, the default value will be used. Here is an example:

default-parameters.js
function greet(name = 'World') {
  console.log(`Hello, ${name}!`);
}
greet(); // Output: Hello, World!
greet('John'); // Output: Hello, John!
tip
  • Functions can take zero or more parameters.
  • You can define default parameter values for a function.
  • The difference between parameters and arguments is that parameters are defined in the function signature, while arguments are the actual values passed to the function when it is called.
  • You can pass arguments to a function by separating them with commas inside the parentheses.
  • You can return a value from a function using the return keyword.

Returning a Value​

A function can return a value using the return keyword. The return statement stops the execution of the function and returns a value to the caller. Here is an example of a function that returns a value:

return-value.js
function add(a, b) {
  return a + b;
}
let result = add(5, 10);
console.log(result); // Output: 15

In the example above, the add function takes two parameters a and b and returns the sum of the two parameters. The result of the function call is stored in the result variable and then logged to the console.

Types of Functions​

There are two types of functions in JavaScript: named functions and anonymous functions.

Named Functions​

A named function is a function that has a name. You can define a named function using the function keyword followed by the function name.

named-function.js
function greet(name) {
  return `Hello, ${name}!`;
}

Anonymous Functions​

An anonymous function is a function that does not have a name. You can define an anonymous function using the function keyword without a function name.

anonymous-function.js
let greet = function() {
  return 'Hello, World!';
};

Arrow Functions​

Arrow functions are a more concise way to write functions in JavaScript. They are also known as fat arrow functions. Arrow functions do not have their own this value and are not suitable for defining object methods. Here is an example of an arrow function:

arrow-function.js
let add = (a, b) => a + b;

In the example above, the add function takes two parameters a and b and returns the sum of the two parameters. You can call a function by using its name followed by parentheses. Here is an example:

calling-function.js
function add(a, b) {
  return a + b;
}
let result = add(5, 10);
console.log(result); // Output: 15

Conclusion​

In this section, you learned about the non-primitive data types in JavaScript: Object, Array, and Function. These data types are used to store and manipulate complex data structures and are essential for building applications in JavaScript. You also learned about defining objects, arrays, and functions, accessing their properties and elements, and updating them. You also learned about calling functions, passing arguments, and returning values from functions. You are now ready to use non-primitive data types in your JavaScript programs.

In the next section, we will talk about Operators and the types of Operators. Let's keep going 🚀

Made with ❤️ by Fasakin Henry