Ole Ersoy

Image by Monika Helmecke from Pixabay

Scenario

We have an array containing the values [1,2,3,4,5] . We want to find the unique value 3 and then stop looking.

Approach

We’ll be using some to iterate over the array. The some function stops iterating after the first match that is true , which in our case is 3 .

let arr: number[] = [1, 2, 3, 4, 5];var unique: number = NaN;function findThree(value: number) {
console.log(value);
unique = value;
return value == 3;
}
arr.some((v) => findThree(v));

We console log the value to see that we are only executing the loop 3 times.

Demo

--

--

Image by experimentMR from Pixabay

Scenario

We have an array of numbers .

const arr: number[] = [1, 2, 3, 4, 5];

We only want to log the even numbers.

Approach

The modulo expression i % 2 will return zero for all even numbers, and and the continue statement causes the for loop to begin the next iteration, skipping the console.log(i) statement.

for (let i of arr) {
if (i % 2) {
continue;
}
console.log(i);
}

Demo

--

--

Image by Ulrike Leone from Pixabay

Scenario

We have a header within a flex container that we want to expand as space allows and also to have a minimum width of 200px.

<div style="display: flex">
<div id="header">this is the header</div>
</div>

Approach

Style the header div with flex: 1 0 200px; , which means flex-grow: 1 and so it will expand to fill space and flex-shrink: 0 , which turns shrinking off after the item reaches the minimum size of 200px;

Demo

--

--