Linepup Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== JS: Methods ======

===== Array Methods =====

==== .forEach() ====

''.forEach()'' Runs a function for each item. Does NOT return a new array.

<code javascript>

// ------------------------
// FOR EACH APPROACH ------
// ------------------------
const fruits = ["apple", "banana", "cherry"]; // build array
const container = document.getElementById("container"); // get container element

fruits.forEach(fruit => {
	const paragraph = document.createElement("p"); // create <p>
	paragraph.textContent = fruit; // <p> text content = fruit
	container.appendChild(paragraph); // append <p> into container
});

// ---------------------------------------
// BONUS: TEMPLATE LITERALS APPROACH -----
// ---------------------------------------
container.innerHTML = fruits
	.map(fruit => `<p>${fruit}</p>`) // Transform array into HTML strings
  .join(""); // Join them into one big text block

</code>

==== .map() ====

Creates a NEW array by transforming every element in an array.

==== .filter() ====

Creates a NEW array with only the elements that pass a test.

==== .find() ====

Returns a single item that matches a rule.

==== .includes() ====

Returns true/false. A simple check to see if an array contains a value.

==== .reduce() ====

Takes a list of items and reduces them down to a single value.

==== .some() ====

Returns true/false. Checks if at least one item in the array passes a test.

==== .every() ====

Returns true/false. Checks if all items in the array pass a test.

==== .sort() ====

Does NOT create a new array. Sorts the existing array.

==== .slice(start, end) ====

The “safe” one. Copies a chunk of the array and returns it. Does NOT change the original array.

==== .splice(start, count) ====

The “destructive” one. Goes into the array and removes items from the original.


===== String Methods =====

==== .split() ====

Chops a string into an array based on a separator character. Removes the separator character.

<code javascript>
const sent = "hello-world-from-js";
const words = sent.split("-"); // ["hello", "world", "from", "js"]
</code>

==== .join() ====

Glues an array back into a string. (opposite of ''.split()'')

<code javascript>
const slug = ["my", "cool", "post"].join("-"); // "my-cool-post"
</code>

==== .trim() ====

Removes whitespace from the start and end of a string.

<code javascript>
const email = "  user@email.com  ";
console.log(email.trim()); // "user@email.com"
</code>

==== .includes() ====

Checks if text exists inside a string. Note: it’s case-sensitive (Fox =/= fox).

<code javascript>
const sentence = "The quick brown fox jumps over the dog.";

// Check if the word "fox" exists in the sentence
const hasFox = sentence.includes("fox");
console.log(hasFox); // true
</code>