Nadi Dikun    Interface Mechanics
   About    Contact   

How to handle an unknown number of arguments?

Hey guys, did you know that JavaScript functions can have unknown arguments? JS functions can also have optional arguments and an even optional number of arguments!

And the best part of it, is that arguments can be treated as arrays, including built-in JavaScript methods.

To explain this using a very simple example, let’s create a function, that will sum up any numbers that are passed to it.

Try it live at JSFiddle, or simply click ‘Result’ in the form below:


Searching for element's index number in Array

While learning Arrays today, I needed a search function which could find any element in an Array and return its index number.

function find(arr, value){
    for (var i=0;i<arr.length;i++){
        if (arr[i] === value){
            return i;
        }
    }
    return -1;
}

var abc = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];

alert( find(abc,'q') );

BTW, to create this very long Array I used JavaScript too.

Check out the result function with a very long Array here, or below by clicking “Result”:


Editing strings with built-in JavaScript methods

While learning some very useful strings methods today, I decided to practice them together with short if-else syntax I discovered yesterday.

  1. This function re-format string begins with capital letter followed by lowercase letters, using toUpperCase and toLowerCase methods:
function toCapitalLetter(string) {
    return (string === '') ? '' : string = string[0].toUpperCase() + string.slice(1).toLowerCase();
}
  1. This function cuts the end of a string, if it’s longer then the maximum number of symbols, using length and slice methods:
function checkLength(string, maxlength) {
    return (string.length <= maxlength) ? string : string.slice(0 , maxlength-3) + '...';
}
  1. This function checks, if the phrase contains spam words, using indexOf and toLowerCase methods:
function checkSpam(string) {
    return ( ~string.toLowerCase().indexOf('viagra') || ~string.toLowerCase().indexOf('xxx') ) ? true : false;
}

You may check all these functions with working examples at JSFiddle or below by clicking “Result”:


If (if-else loop is shorter) {...

It turns out that it’s not only just architects who love minimalism, but JavaScript developers do too. :)

John Pawson Interior

Check out another, shorter, way of writing the if-else loop. It’s really useful to have a short loop that can be easily understood in just one line:

(if condition is true) ? this happens : else;

Sweet! Let’s eat some apples! First, here’s an example of some classic If-Else syntax:

var oneApple = {
    color: 'red',
    status: 100
};

function bite(apple) {
    if (apple.color === 'red') {
        apple.status = apple.status - 25;
        alert ('There is only '+apple.status+' % of apple available now.');
    } else {
        alert ('Apple is still ripening.')
    }
}

bite(oneApple);

Now, let’s write If-Else using a new, shorter method:

Read more


How much time has passed?

Two weeks have passed since I started my JavaScript Marathon along with writing this blog! Time to celebrate.

Just yesterday, I worked with Dates in JavaScript. So to celebrate this day, I created a universal function, which tells you the time that has passed from any moment in the past till the present moment. Let’s go!

Here we go. Let’s create a function, which would take any Date as an argument and return us the information on how long ago it happened:

function analyzeDate(date) {

    var now = new Date();
    var diff = Math.round(now - date);
    
    if ( diff < 1000 ) {
        return('Now');
    
    } else if ( diff >= 1000 && diff < 60*1000) {
        return( diff/1000 +' seconds ago');
    
    } else if ( diff >= 60000 && diff < 60*60*1000) {
        return ( diff/60000 +' minutes ago'); // 55 minutes ago
    
    } else {
        return reformatDate(date);
    }
}

As an additional feature, I’d like to change the Date output into European format so it is presented as dd.mm.yy hh:mm:

Read more