Hollie  Ratke

Hollie Ratke

1621653914

Everything You Should Know About JavaScript Array - JS Array Handbook

In programming, an array is a collection of elements or items. Arrays store data as elements and retrieve them back when you need them.

The array data structure is widely used in all programming languages that support it.

In this handbook, I’ll teach you all about arrays in JavaScript. You’ll learn about complex data handling, destructuring, the most commonly used array methods, and more.

The Original Article can be found on https://www.freecodecamp.org

Why Did I Write this Article?

There are many great articles on JavaScript arrays already available around the internet. So why did I write yet another article on the same subject? What’s the motivation?

Well, over the years of interacting with my mentees, I realized that most beginners need a tutorial that covers arrays thoroughly from beginning to end with examples.

So I decided to create such an article chock full of meaningful examples. If you are a beginner at JavaScript, I hope you’ll find it very helpful.

But even as an experienced developer, this handbook may come in handy to help you brush up on things as you need. I’m also learning the whole thing again while writing about it. So let’s dive in.

What is an Array in JavaScript?

A pair of square brackets [] represents an array in JavaScript. All the elements in the array are comma(,) separated.

In JavaScript, arrays can be a collection of elements of any type. This means that you can create an array with elements of type String, Boolean, Number, Objects, and even other Arrays.

Here is an example of an array with four elements: type Number, Boolean, String, and Object.

const mixedTypedArray = [100, true, 'freeCodeCamp', {}];

The position of an element in the array is known as its index. In JavaScript, the array index starts with 0, and it increases by one with each element.

So, for example, in the above array, the element 100 is at index 0, true is at index 1, ‘freeCodeCamp’ is at index 2, and so on.

The number of elements in the array determines its length. For example, the length of the above array is four.

Interestingly, JavaScript arrays are not of fixed length. You can change the length anytime by assigning a positive numeric value. We will learn more about that in a while.

How to Create an Array in JavaScript

You can create an array in multiple ways in JavaScript. The most straightforward way is by assigning an array value to a variable.

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];

You can also use the Array constructor to create an array.

const salad = new Array('🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑');

Please Note: new Array(2) will create an array of length two and none of the elements are defined in it. However, new Array(1,2) will create an array of length two with the elements 1 and 2 in it.

There are other methods like Array.of() and Array.from(), and the spread operator( ...) helps you create arrays, too. We will learn about them later in this article.

How to Get Elements from an Array in JS

You can access and retrieve elements from an array using its index. You need to use the square bracket syntax to access array elements.

const element = array[index];

Based on your use-cases, you may choose to access array elements one by one or in a loop.

When you’re accessing elements using index like this:

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad[0]; // '🍅'
salad[2]; // '🥦'
salad[5]; // '🥕'

You can use the length of an array to traverse backward and access elements.

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
const len = salad.length;
salad[len - 1]; // '🥑'
salad[len - 3]; // '🌽'

You can also loop through the array using a regular for or forEach loop, or any other loop.

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];

for(let i=0; i<salad.length; i++) {
  console.log(`Element at index ${i} is ${salad[i]}`);
}

And here’s the output:

How to Add Elements to an Array in JS

Use the push() method to insert an element into an array. The push() method adds an element at the end of the array. How about we add some peanuts to the salad, like this:

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.push('🥜');

Now the salad array is:

[“🍅”, “🍄”, “🥦”, “🥒”, “🌽”, “🥕”, “🥑”, “🥜”]

Note that the push() method adds an element to the end of the array. If you want to add an element to the beginning of the array, you’ll need to use the unshift() method.

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.unshift('🥜');

Now the salad array is:

[“🥜”, “🍅”, “🍄”, “🥦”, “🥒”, “🌽”, “🥕”, “🥑”]

How to Remove Elements from an Array in JS

The easiest way to remove a single element from an array is using the pop() method. Every time you call the pop() method, it removes an element from the end of the array. Then it returns the removed element and changes the original array.

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.pop(); // 🥑

console.log(salad); // ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕']

Use the shift() method to remove an element from the beginning of an array. Like the pop() method, shift() returns the removed element and changes the original array.

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
salad.shift(); // 🍅

console.log(salad); // ['🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];

How to Copy and Clone an Array in JS

You can copy and clone an array to a new array using the slice() method. Note that the slice() method doesn’t change the original array. Instead, it creates a new shallow copy of the original array.

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];
const saladCopy = salad.slice();

console.log(saladCopy); // ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑']

salad === saladCopy; // returns false

Alternatively, you can use the spread operator to create a copy of the array. We will learn about that soon.

How to Determine if a Value is an Array in JS

You can determine if a value is an array using the Array.isArray(value) method. The method returns true if the passed value is an array.

Array.isArray(['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑']); // returns true
Array.isArray('🍅'); // returns false
Array.isArray({ 'tomato': '🍅'}); // returns false
Array.isArray([]); // returns true

Array Destructuring in JavaScript

With ECMAScript 6 (ES6), we have some new syntax to extract multiple properties from an array and assign them to variables in one go. It is handy to help you keep your code clean and concise. This new syntax is called destructuring syntax.

Here is an example of extracting the values from an array using the destructuring syntax:

let [tomato, mushroom, carrot] = ['🍅', '🍄', '🥕'];

Now you can use the variables in your code:

console.log(tomato, mushroom, carrot); // Output, 🍅 🍄 🥕

To do the same thing without the destructuring, it would look like this:

let vegetables = ['🍅', '🍄', '🥕'];
let tomato = vegetables[0];
let mushroom= vegetables[1];
let carrot= vegetables[2];

So, the destructuring syntax saves you from writing lots of code. This gives you a massive boost in productivity.

How to Assign a Default Value to a Variable

You can assign a default value using destructuring when there is no value or undefined for the array element.

In the example below, we assign a default value for the mushroom variable.

let [tomato , mushroom = '🍄'] = ['🍅'];
console.log(tomato); // '🍅'
console.log(mushroom ); // '🍄'

How to Skip a Value in an Array

With destructuring, you can skip an array element to map to a variable. For example, you may not be interested in all the elements in an array. In that case, skipping a value comes in handy.

In the example below, we skip the mushroom element. Notice the space in the variable declaration at the left side of the expression.

let [tomato, , carrot] = ['🍅', '🍄', '🥕'];

console.log(tomato); // '🍅'
console.log(carrot); // '🥕'

Nested Array Destructuring in JS

In JavaScript, arrays can be nested. This means that an array can have another array as an element. Array nesting can go to any depth.

For example, let’s create a nested array for fruits. It has a few fruits and an array of vegetables in it.

let fruits = ['🍈', '🍍', '🍌', '🍉', ['🍅', '🍄', '🥕']];

How would you access the ‘🥕’ from the above array? Again, you could do this without destructuring, like this:

const veg = fruits[4]; // returns the array ['🍅', '🍄', '🥕']
const carrot = veg[2]; // returns '🥕'

Alternatively, you could use this short-hand syntax:

fruits[4][2]; // returns '🥕'

You can also access it using the destructuring syntax, like this:

let [,,,,[,,carrot]] = ['🍈', '🍍', '🍌', '🍉', ['🍅', '🍄', '🥕']];

How to Use the Spread Syntax and Rest Parameter in JavaScript

Since ES6, we can use the ... (yes, three consecutive dots) as spread syntax and the rest parameter in array destructuring.

  • For the rest parameter, the ... appears on the left side of the destructuring syntax.
  • For the spread syntax, the ... appears on the right side of the destructuring syntax.

How to Use the Rest Parameter in JS

With Rest Parameter, we can map out the left elements of an array in a new array. The rest parameter must be the last variable in the destructuring syntax.

In the example below, we have mapped the first two of the array elements to the tomato and mushroom variables. The remaining elements are mapped to the rest variable using the .... The rest variable is a new array containing the leftover elements.

const [tomato, mushroom, ...rest] = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];

console.log(tomato); // '🍅'
console.log(mushroom); // '🍄'
console.log(rest); // ["🥦", "🥒", "🌽", "🥕", "🥑"]

How to Use the Spread Operator in JS

With the spread operator, we can create a clone/copy of an existing array like this:

const salad = ['🍅', '🍄', '🥦', '🥒', '🌽', '🥕', '🥑'];

const saladCloned = [...salad];
console.log(saladCloned); // ["🍅", "🍄", "🥦", "🥒", "🌽", "🥕", "🥑"]

salad === saladCloned // false

Destructuring Use Cases in JavaScript

Let’s look at a few exciting use-cases of array destructuring, the spread operator, and the rest parameter.

How to Swap Values with Destructuring

We can swap the value of two variables easily using the array destructuring syntax.

let first = '😔';
let second = '🙂';
[first, second] = [second, first];

console.log(first);  // '🙂'
console.log(second); // '😔'

How to Merge Arrays

We can merge two arrays and create a new array with all the elements from both arrays. Let’s take two arrays — one with a couple of smiley faces and another with a few veggies.

const emotion = ['🙂', '😔'];
const veggies = ['🥦', '🥒', '🌽', '🥕'];

Now, we will merge them to create a new array.

const emotionalVeggies = [...emotion, ...veggies];
console.log(emotionalVeggies); // ["🙂", "😔", "🥦", "🥒", "🌽", "🥕"]

JavaScript Array Methods

So far, we have seen a few array properties and methods. Let’s do a quick recap of the ones we’ve looked at:

  • push() – Insert an element at the end of the array.
  • unshift() – Insert an element at the beginning of the array.
  • pop() – Remove an element from the end of the array.
  • shift() – Remove an element from the beginning of the array.
  • slice() – Create a shallow copy of an array.
  • Array.isArray() – Determine if a value is an array.
  • length – Determine the size of an array.

Now we’ll learn about other important JS array methods with examples.

How to Create, Remove, Update, and Access Arrays in JavaScript

In this section, we will learn about methods you can use to create a new array, remove elements to make the array empty, access elements, and many more.

The concat() array method

The concat() method merges one or more arrays and returns a merged array. It is an immutable method. This means it doesn’t change (mutate) existing arrays.

Let’s concat two arrays.

const first = [1, 2, 3];
const second = [4, 5, 6];

const merged = first.concat(second);

console.log(merged); // [1, 2, 3, 4, 5, 6]
console.log(first); // [1, 2, 3]
console.log(second); // [4, 5, 6]

Using the concat() method we can merge more than two arrays. We can merge any number of arrays with this syntax:

array.concat(arr1, arr2,..,..,..,arrN);

Here is an example:

const first = [1, 2, 3];
const second = [4, 5, 6];
const third = [7, 8, 9];

const merged = first.concat(second, third);

console.log(merged); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

The join() array method

The join() method joins all the elements of the array using a separator and returns a string. The default separator used for joining is comma(,).

const emotions = ['🙂', '😍', '🙄', '😟'];

const joined = emotions.join();
console.log(joined); // "🙂,😍,🙄,😟"

You can pass a separator of your choice to join the elements. Here is an example of joining the elements with a custom separator:

const joined = emotions.join('<=>');
console.log(joined); // "🙂<=>😍<=>🙄<=>😟"

Invoking the join() method on an empty array returns an empty string:

[].join() // returns ""

The fill() array method

The fill() method fills an array with a static value. You can change all the elements to a static value or change a few selected items. Note that the fill() method changes the original array.

const colors = ['red', 'blue', 'green'];

colors.fill('pink');
console.log(colors); // ["pink", "pink", "pink"]

Here is an example where we are changing only the last two elements of the array using the fill() method:

const colors = ['red', 'blue', 'green'];

colors.fill('pink', 1,3); // ["red", "pink", "pink"]

In this case, the first argument of the fill() method is the value we change with. The second argument is the start index to change. It starts with 0. The last argument is to determine where to stop filling. The max value of it could be colors.length.

Also, you may find this demo project helpful: https://github.com/atapas/array-fill-color-cards.

The includes() array method

You can determine the presence on an element in an array using the includes() method. If the element is found, the method returns true, and false otherwise.

const names = ['tom', 'alex', 'bob', 'john'];

names.includes('tom'); // returns true
names.includes('july'); // returns false

The indexOf() array method

You may want to know the index position of an element in array. You can use the indexOf() method to get that. It returns the index of the first occurrence of an element in the array. If an element is not found, the indexOf() method returns -1.

const names = ['tom', 'alex', 'bob', 'john'];

names.indexOf('alex'); // returns 1
names.indexOf('rob'); // returns -1

There is another method lastIndexOf() that helps you find the index of the last occurrence of an element in the array. Like indexOf()lastIndexOf() also returns -1 if the element is not found.

const names = ['tom', 'alex', 'bob', 'tom'];

names.indexOf('tom'); // returns 0
names.lastIndexOf('tom'); // returns 3

The reverse() array method

As the name suggests, the reverse() method reverses the elements’ positions in the array so that the last element goes into the first position and the first one to the last.

const names = ['tom', 'alex', 'bob'];

names.reverse(); // returns ["bob", "alex", "tom"]

The reverse() method modifies the original array.

The sort() array method

The sort() method is probably one of the most often used array methods. The default sort() method converts the element types into strings and then sorts them. The default sorting order is ascending. The sort() method changes the original array.

const names = ['tom', 'alex', 'bob'];

names.sort(); // returns ["alex", "bob", "tom"]

The sort() method accepts an optional comparator function as an argument. You can write a comparator function and pass to the sort() method to override the default sorting behavior.

Let’s now take an array of numbers and sort them in ascending and descending order using a comparator function:

const numbers = [23, 5, 100, 56, 9, 13, 37, 10, 1]

First, we’ll invoke the default sort() method and see the output:

numbers.sort();

Now the sorted array is, [1, 10, 100, 13, 23, 37, 5, 56, 9]. Well, that’s not the output we expect. But it happens because the default sort() method converts the elements to a string and then compares them based on the UTF-16 code unit values.

To solve this, let’s write a comparator function. Here is one for the ascending order:

function ascendingComp(a, b){
  return (a-b);
}

Now pass this to the sort() method:

numbers.sort(ascendingComp); // retruns [1, 5, 9, 10, 13, 23, 37, 56, 100]

/* 

We could also code it like,

numbers.sort(function(a, b) {
  return (a-b);
});

Or, with the arrow function,

numbers.sort((a, b) => (a-b));

*/

For descending order, do this:

numbers.sort((a, b) => (b-a));

Check out this GitHub repository for more sorting examples and tips: https://github.com/atapas/js-array-sorting

The splice() array method

The splice() method helps you add, update, and remove elements in an array. This method may be a bit confusing at the beginning, but once you know how to use it properly, you will get it right.

The main purpose of the splice() method is to delete elements from array. It returns an array of the elements deleted and modifies the original array. But you can add and replace elements using it as well.

To add an element using the splice() method, we need to pass the position where we want to add, how many elements to delete starting with the position, and the element to add.

In the example below, we are adding an element zack at the index 1 without deleting any elements.

const names = ['tom', 'alex', 'bob'];

names.splice(1, 0, 'zack');

console.log(names); // ["tom", "zack", "alex", "bob"]

Have a look at the following example. Here we are removing one element from the index 2 (the 3rd element) and adding a new element, zack. The splice() method returns an array with the deleted element, bob.

const names = ['tom', 'alex', 'bob'];

const deleted = names.splice(2, 1, 'zack');

console.log(deleted); // ["bob"]
console.log(names); // ["tom", "alex", "zack"]

Static Array Methods in JavaScript

In JavaScript, arrays have three static methods. We have discussed Array.isArray() already. Let’s discuss the other two now.

The Array.from() array method

Let’s take a simple HTML code snippet that contains a div and a few list elements:

<div id="main">
  <ul>
    <ol type="1">
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
    </ol>
  </ul> 
</div>

Now we’ll query the DOM using the getElementsByTagName() method.

document.getElementsByTagName('li');

It returns a HTMLCollection that looks like this:

HTMLCollection is an Array-Like Object

So it is like an array. Now let’s try iterating over it using forEach:

document.getElementsByTagName('li').forEach(() => {
 // Do something here..
})

Guess what the output is? It’s an error like this:

Error while using forEach on the Array-Like object

But why? Because the HTMLCollection is not an array. It is an Array-Like object. So you can not iterate over it using forEach.

The proto is Object

This is where you should use the Array.from() method. It converts an array-like object to an array so that you can perform all the array operations on it.

const collection = Array.from(document.getElementsByTagName('li'))

Here the collection is an array:

The proto is Array

The Array.of() array method

The Array.of() method creates a new array using any number of elements of any type.

Array.of(2, false, 'test', {'name': 'Alex'})

The output looks like this:

Output of the Array.of() method

Array Iterator Methods in JavaScript

Now we’re gonna learn about array iterator methods. These are very useful methods for iterating through array and performing computations, making decisions, filtering out stuff, and more.

So far, we have not seen an example of an array of objects. In this section, we will use the following array of objects to explain and demonstrate the methods below.

This array contains the information for some students subscribed to various paid courses:

let students = [
   {
      'id': 001,
      'f_name': 'Alex',
      'l_name': 'B',
      'gender': 'M',
      'married': false,
      'age': 22,
      'paid': 250,  
      'courses': ['JavaScript', 'React']
   },
   {
      'id': 002,
      'f_name': 'Ibrahim',
      'l_name': 'M',
      'gender': 'M',
      'married': true,
      'age': 32,
      'paid': 150,  
      'courses': ['JavaScript', 'PWA']
   },
   {
      'id': 003,
      'f_name': 'Rubi',
      'l_name': 'S',
      'gender': 'F',
      'married': false,
      'age': 27,
      'paid': 350,  
      'courses': ['Blogging', 'React', 'UX']
   },
   {
      'id': 004,
      'f_name': 'Zack',
      'l_name': 'F',
      'gender': 'M',
      'married': true,
      'age': 36,
      'paid': 250,  
      'courses': ['Git', 'React', 'Branding']
   } 
];

Alright, let’s get started. All the array iterator methods take a function as an argument. You need to specify the logic to iterate and apply in that function.

The filter() array method

The filter() method creates a new array with all the elements that satisfies the condition mentioned in the function. Let’s find the student who is female. So the filter condition should be that the gender is equal to ‘F’.

const femaleStudents = students.filter((element, index) => {
  return element.gender === 'F';
})

console.log(femaleStudents);

The output is this:

That’s right. The student with name Rubi is the only female student we have got so far.

The map() array method

The map() method creates a new array by iterating through the elements and applying logic we provided in the function as an argument. We’ll create a new array of full names of all the students in the students array.

const fullNames = students.map((element, index) => {
  return {'fullName': element['f_name'] + ' ' + element['l_name']}
});

console.log(fullNames);

The output looks like this:

Here we see a new array with the fullName properties that is computed using the f_name and l_name properties of each student object.

The reduce() array method

The reduce() method applies a reducer function on each of the array elements and returns an output value. We’ll apply a reducer function on the students array to compute the total amount paid by all the students.

const total = students.reduce(
   (accumulator, student, currentIndex, array) => {
      accumulator = accumulator + student.paid;
      return (accumulator);
   }, 
0);

console.log(total); // 1000

In the above code,

  • We initialize the accumulator with 0.
  • We apply the reduce method on each of the student objects. We access the paid property and add it to the accumulator.
  • Finally, we return the accumulator.

The some() array method

The some() method returns a boolean value (true/false) based on at least one element in the array passing the condition in the function. Let’s see if there are any students below the age 30.

let hasStudentBelow30 = students.some((element, index) => {
  return element.age < 30;
});

console.log(hasStudentBelow30); // true

Yes, we see there is at least one student younger than 30.

The find() array method

Using the some() method, we have seen that there is a student below age 30. Let’s find out who that student is.

To do that, we will use the find() method. It returns the first matched element from the array that satisfies the condition in the function.

Arrays have another related method, findIndex(), that returns the index of the element we find using the find() method. If no elements match the condition, the findIndex() method returns -1.

In the example below, we pass a function to the find() method that checks for the age of each of the student. It returns the matched student when the condition satisfies.

const student = students.find((element, index) => {
  return element.age < 30;
});

console.log(student);

The output is this:

As we see, it is Alex who is 22 years old. We found him.

The every() array method

The every() method detects if every element of the array satisfies the condition passed in the function. Let’s find if all the students have subscribed to at least two courses.

const atLeastTwoCourses = students.every((elements, index) => {
  return elements.courses.length >= 2;
});

console.log(atLeastTwoCourses); // true

As expected, we see that the output is true.

Proposed Array Methods

As of May, 2021, ECMAScript has a method in proposal, the at() method.

The at() Method

The proposed at() method would help you access the elements of an array using a negative index number. As of now, this is not possible. You can access elements only from the beginning of the array using a positive index number.

Accessing elements from the back of the array is possible using the length value. With the inclusion of the at() method, you would be able to access the elements using both positive and negative indexes using a single method.

const junkFoodILove = ['🥖', '🍔', '🍟', '🍕', '🌭', '🥪', '🌮', '🍿'];

junkFoodILove.at(0); // 🥖
junkFoodILove.at(3); // 🍕
junkFoodILove.at(-1); // 🍿
junkFoodILove.at(-5); // 🍕
junkFoodILove.at(-8); // 🥖
junkFoodILove.at(10); // undefined

Here is a quick demo of it:

JavaScript Array at() method Demo

You can use this polyfill to achieve the functionality of the at() method until this method gets added to the JavaScript language. Please checkout this GitHub repository for the at() method examples: https://github.com/atapas/js-array-at-method

Before We End…

I hope you’ve found this article insightful, and that it helps you understand JavaScript arrays more clearly. Please practice the examples multiple times to get a good grip on them. You can find all the code examples in my GitHub repository.

Let’s connect. You will find me active on Twitter (@tapasadhikary). Please feel free to give a follow.

#javascript

What is GEEK

Buddha Community

Everything You Should Know About JavaScript Array - JS Array Handbook

NBB: Ad-hoc CLJS Scripting on Node.js

Nbb

Not babashka. Node.js babashka!?

Ad-hoc CLJS scripting on Node.js.

Status

Experimental. Please report issues here.

Goals and features

Nbb's main goal is to make it easy to get started with ad hoc CLJS scripting on Node.js.

Additional goals and features are:

  • Fast startup without relying on a custom version of Node.js.
  • Small artifact (current size is around 1.2MB).
  • First class macros.
  • Support building small TUI apps using Reagent.
  • Complement babashka with libraries from the Node.js ecosystem.

Requirements

Nbb requires Node.js v12 or newer.

How does this tool work?

CLJS code is evaluated through SCI, the same interpreter that powers babashka. Because SCI works with advanced compilation, the bundle size, especially when combined with other dependencies, is smaller than what you get with self-hosted CLJS. That makes startup faster. The trade-off is that execution is less performant and that only a subset of CLJS is available (e.g. no deftype, yet).

Usage

Install nbb from NPM:

$ npm install nbb -g

Omit -g for a local install.

Try out an expression:

$ nbb -e '(+ 1 2 3)'
6

And then install some other NPM libraries to use in the script. E.g.:

$ npm install csv-parse shelljs zx

Create a script which uses the NPM libraries:

(ns script
  (:require ["csv-parse/lib/sync$default" :as csv-parse]
            ["fs" :as fs]
            ["path" :as path]
            ["shelljs$default" :as sh]
            ["term-size$default" :as term-size]
            ["zx$default" :as zx]
            ["zx$fs" :as zxfs]
            [nbb.core :refer [*file*]]))

(prn (path/resolve "."))

(prn (term-size))

(println (count (str (fs/readFileSync *file*))))

(prn (sh/ls "."))

(prn (csv-parse "foo,bar"))

(prn (zxfs/existsSync *file*))

(zx/$ #js ["ls"])

Call the script:

$ nbb script.cljs
"/private/tmp/test-script"
#js {:columns 216, :rows 47}
510
#js ["node_modules" "package-lock.json" "package.json" "script.cljs"]
#js [#js ["foo" "bar"]]
true
$ ls
node_modules
package-lock.json
package.json
script.cljs

Macros

Nbb has first class support for macros: you can define them right inside your .cljs file, like you are used to from JVM Clojure. Consider the plet macro to make working with promises more palatable:

(defmacro plet
  [bindings & body]
  (let [binding-pairs (reverse (partition 2 bindings))
        body (cons 'do body)]
    (reduce (fn [body [sym expr]]
              (let [expr (list '.resolve 'js/Promise expr)]
                (list '.then expr (list 'clojure.core/fn (vector sym)
                                        body))))
            body
            binding-pairs)))

Using this macro we can look async code more like sync code. Consider this puppeteer example:

(-> (.launch puppeteer)
      (.then (fn [browser]
               (-> (.newPage browser)
                   (.then (fn [page]
                            (-> (.goto page "https://clojure.org")
                                (.then #(.screenshot page #js{:path "screenshot.png"}))
                                (.catch #(js/console.log %))
                                (.then #(.close browser)))))))))

Using plet this becomes:

(plet [browser (.launch puppeteer)
       page (.newPage browser)
       _ (.goto page "https://clojure.org")
       _ (-> (.screenshot page #js{:path "screenshot.png"})
             (.catch #(js/console.log %)))]
      (.close browser))

See the puppeteer example for the full code.

Since v0.0.36, nbb includes promesa which is a library to deal with promises. The above plet macro is similar to promesa.core/let.

Startup time

$ time nbb -e '(+ 1 2 3)'
6
nbb -e '(+ 1 2 3)'   0.17s  user 0.02s system 109% cpu 0.168 total

The baseline startup time for a script is about 170ms seconds on my laptop. When invoked via npx this adds another 300ms or so, so for faster startup, either use a globally installed nbb or use $(npm bin)/nbb script.cljs to bypass npx.

Dependencies

NPM dependencies

Nbb does not depend on any NPM dependencies. All NPM libraries loaded by a script are resolved relative to that script. When using the Reagent module, React is resolved in the same way as any other NPM library.

Classpath

To load .cljs files from local paths or dependencies, you can use the --classpath argument. The current dir is added to the classpath automatically. So if there is a file foo/bar.cljs relative to your current dir, then you can load it via (:require [foo.bar :as fb]). Note that nbb uses the same naming conventions for namespaces and directories as other Clojure tools: foo-bar in the namespace name becomes foo_bar in the directory name.

To load dependencies from the Clojure ecosystem, you can use the Clojure CLI or babashka to download them and produce a classpath:

$ classpath="$(clojure -A:nbb -Spath -Sdeps '{:aliases {:nbb {:replace-deps {com.github.seancorfield/honeysql {:git/tag "v2.0.0-rc5" :git/sha "01c3a55"}}}}}')"

and then feed it to the --classpath argument:

$ nbb --classpath "$classpath" -e "(require '[honey.sql :as sql]) (sql/format {:select :foo :from :bar :where [:= :baz 2]})"
["SELECT foo FROM bar WHERE baz = ?" 2]

Currently nbb only reads from directories, not jar files, so you are encouraged to use git libs. Support for .jar files will be added later.

Current file

The name of the file that is currently being executed is available via nbb.core/*file* or on the metadata of vars:

(ns foo
  (:require [nbb.core :refer [*file*]]))

(prn *file*) ;; "/private/tmp/foo.cljs"

(defn f [])
(prn (:file (meta #'f))) ;; "/private/tmp/foo.cljs"

Reagent

Nbb includes reagent.core which will be lazily loaded when required. You can use this together with ink to create a TUI application:

$ npm install ink

ink-demo.cljs:

(ns ink-demo
  (:require ["ink" :refer [render Text]]
            [reagent.core :as r]))

(defonce state (r/atom 0))

(doseq [n (range 1 11)]
  (js/setTimeout #(swap! state inc) (* n 500)))

(defn hello []
  [:> Text {:color "green"} "Hello, world! " @state])

(render (r/as-element [hello]))

Promesa

Working with callbacks and promises can become tedious. Since nbb v0.0.36 the promesa.core namespace is included with the let and do! macros. An example:

(ns prom
  (:require [promesa.core :as p]))

(defn sleep [ms]
  (js/Promise.
   (fn [resolve _]
     (js/setTimeout resolve ms))))

(defn do-stuff
  []
  (p/do!
   (println "Doing stuff which takes a while")
   (sleep 1000)
   1))

(p/let [a (do-stuff)
        b (inc a)
        c (do-stuff)
        d (+ b c)]
  (prn d))
$ nbb prom.cljs
Doing stuff which takes a while
Doing stuff which takes a while
3

Also see API docs.

Js-interop

Since nbb v0.0.75 applied-science/js-interop is available:

(ns example
  (:require [applied-science.js-interop :as j]))

(def o (j/lit {:a 1 :b 2 :c {:d 1}}))

(prn (j/select-keys o [:a :b])) ;; #js {:a 1, :b 2}
(prn (j/get-in o [:c :d])) ;; 1

Most of this library is supported in nbb, except the following:

  • destructuring using :syms
  • property access using .-x notation. In nbb, you must use keywords.

See the example of what is currently supported.

Examples

See the examples directory for small examples.

Also check out these projects built with nbb:

API

See API documentation.

Migrating to shadow-cljs

See this gist on how to convert an nbb script or project to shadow-cljs.

Build

Prequisites:

  • babashka >= 0.4.0
  • Clojure CLI >= 1.10.3.933
  • Node.js 16.5.0 (lower version may work, but this is the one I used to build)

To build:

  • Clone and cd into this repo
  • bb release

Run bb tasks for more project-related tasks.

Download Details:
Author: borkdude
Download Link: Download The Source Code
Official Website: https://github.com/borkdude/nbb 
License: EPL-1.0

#node #javascript

Lowa Alice

Lowa Alice

1624388400

JavaScript Arrays Tutorial. DO NOT MISS!!!

Learn JavaScript Arrays

📺 The video in this post was made by Programming with Mosh
The origin of the article: https://www.youtube.com/watch?v=oigfaZ5ApsM&list=PLTjRvDozrdlxEIuOBZkMAK5uiqp8rHUax&index=4
🔥 If you’re a beginner. I believe the article below will be useful to you ☞ What You Should Know Before Investing in Cryptocurrency - For Beginner
⭐ ⭐ ⭐The project is of interest to the community. Join to Get free ‘GEEK coin’ (GEEKCASH coin)!
☞ **-----CLICK HERE-----**⭐ ⭐ ⭐
Thanks for visiting and watching! Please don’t forget to leave a like, comment and share!

#arrays #javascript #javascript arrays #javascript arrays tutorial

Javascript Array copyWithin Example | JS Array copyWithin

Javascript Array copyWithin() is an inbuilt method that copies part of an array to the same array and returns it, without modifying its size i.e, copies array element of an array within the same array. The copyWithin() method copies array elements to another position in the array, overwriting the existing values. The copyWithin() method will never add more items to the array. The  array copyWithin method overwrites the original array.

Javascript Array copyWithin Example

The copyWithin() works like a C and C++’s memmove and is the high-performance method to shift a data of an Array. It especially applies to a TypedArray method of the same name. The sequence is copied and pasted as only one operation; pasted sequence will have a copied values even when a copy and paste region overlap.

#javascript #js #javascript array copywithin

Javascript Array copyWithin Example | JS Array copyWithin

Javascript Array copyWithin() is an inbuilt method that copies part of an array to the same array and returns it, without modifying its size i.e, copies array element of an array within the same array. The copyWithin() method copies array elements to another position in the array, overwriting the existing values. The copyWithin() method will never add more items to the array. The  array copyWithin method overwrites the original array.

Javascript Array copyWithin Example

The copyWithin() works like a C and C++’s memmove and is the high-performance method to shift a data of an Array. It especially applies to a TypedArray method of the same name. The sequence is copied and pasted as only one operation; pasted sequence will have a copied values even when a copy and paste region overlap.

The copyWithin() function is intentionally generic, and it does not require that its this value be the Array  object.

The copyWithin() method is the mutable method. It does not modify the length of this, but it will change its content and create the new properties, if necessary.

#javascript #js #js array copywithin

Javascript Array lastIndexOf Example | JS Array lastIndexOf()

Javascript Array lastIndexOf is an inbuilt function that searches an array for the specified element and returns its position. The search will start backward at the specified position, or the end if no start position is specified, and end the search at the beginning of the array. It returns -1 if an element is not found.

If you want to find a particular character’s position in the array then Javascript lastIndexOf() function is useful for you.

If you want to search an array from the start to end, use the  Javascript array indexOf() method.

#javascript #js #js array lastindexof()