Skip to content

Instantly share code, notes, and snippets.

@AllThingsSmitty
Last active November 9, 2024 16:01
Show Gist options
  • Save AllThingsSmitty/9a5463870d12c62fc33b to your computer and use it in GitHub Desktop.
Save AllThingsSmitty/9a5463870d12c62fc33b to your computer and use it in GitHub Desktop.

Revisions

  1. AllThingsSmitty revised this gist Nov 21, 2015. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions js-terms.md
    Original file line number Diff line number Diff line change
    @@ -83,7 +83,7 @@ function order() {

    var myOrder = order();
    console.log(myOrder('pasta'));
    // Array [ "pasta", "gravy", "seasoning", "cooked" ]
    // Array [ 'pasta', 'gravy', 'seasoning', 'cooked' ]
    ```

    As you can see from the above code, everything apart from `waiter` and its return value from inside the order function isn't exposed to the outside world.
    @@ -133,7 +133,7 @@ It doesn't matter where you type the code to declare a function or variable, dur

    ```javascript
    var name = 'Mr. Burns';
    console.log(sayCatchPhrase(name)); //"Excellent!"
    console.log(sayCatchPhrase(name)); //'Excellent!'

    function sayCatchPhrase(name) {
    phrases = {
    @@ -162,7 +162,7 @@ There's even an API called [MutationObserver](https://developer.mozilla.org/en-U
    It does not contribute anything to the programming language itself and its syntax may vary. They only affect the compiler behavior. JavaScript also has few pragmas, one of them is `strict`.

    ```javascript
    "use strict";
    'use strict';
    ```

    By the above pragma, the JavaScript code will be executed in strict mode. In strict mode, bad syntax isn't allowed, *hoisting* isn't
    @@ -204,5 +204,5 @@ function test(...a) {
    console.log(a);
    }
    test('a','b','c',8,[56,-89]);
    //output is Array [ "a", "b", "c", 8, Array[2] ]
    //output is Array [ 'a', 'b', 'c', 8, Array[2] ]
    ```
  2. AllThingsSmitty created this gist Aug 22, 2015.
    208 changes: 208 additions & 0 deletions js-terms.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,208 @@
    # 10 JavaScript Terms You Should Know

    From currying to closures there are quite a number of special words used in JavaScript. These will not only help you increase your vocabulary but also better understand JavaScript. **Special terms are normally found in documentation and technical articles.** But some of them like closures are pretty standard things to know about. Knowing what the word itself means can help you know the concept it's named for better.

    1. [Arity](#1-arity)
    1. [Anonymous](#2-anonymous)
    1. [Closure](#3-closure)
    1. [Currying](#4-currying)
    1. [Hoisting](#5-hoisting)
    1. [Mutation](#6-mutation)
    1. [Pragma](#7-pragma)
    1. [Sentinel](#8-sentinel)
    1. [Vanilla](#9-vanilla)
    1. [Variadic](#10-variadic)


    ## 1. Arity

    *Arity* (from Latin) is the term used to refer to the number of arguments or operands in a function or operation, respectively. You're most likely to come across this word in the realm of JavaScript when it's used to mention the **number of arguments expected by a JavaScript function**.

    There's even a property named [arity](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/arity), of the `Function` object that returns the number of expected arguments in a function. It's now obsolete though and replaced by `length`.

    The following function has an arity of 3.

    ```javascript
    function getName(first, middle, last) {
    return first + ' ' + middle + ' ' + last;
    }
    ```


    ## 2. Anonymous

    When something or someone is referred to as anonymous it means that thing's or person's name is unidentified. Likewise in JavaScript an anonymous function is the one that isn't identified by a name.

    ```javascript
    (function () {
    //body
    })();
    ```

    Above is an [IIFE](http://benalman.com/news/2010/11/immediately-invoked-function-expression/) (Immediately Invoked Function Expression). The function in it is anonymous since it doesn't have a name. Now, take a look at the one:

    ```javascript
    var foo = function () {

    };
    ```

    That's also said to be an anonymous function since there's no name after the keyword `function`.


    ## 3. Closure

    Here's one of the definitions from oxford dictionary for closure: *"A thing that closes or seals something, such as a cap or tie."*

    In JavaScript, closure is an inner function, that's accessible outside of its outer function's scope, with its connection to the outer function's variables still intact.

    To explain things (maybe not accurately but simply enough), consider closure as a waiter in a restaurant. A lot of things happen inside a restaurant kitchen, where we aren't allowed to enter or see. But how are we supposed to get our food then?

    That's where waiters come in. We call them, order the food, and then they'll go to the kitchen, inform the chefs of the orders, and bring it to us when the order is ready. This way we haven't broken any "rules" and can still manage to grab a meal.

    The waiter is someone who is able to take our order into the kitchen and return with the food. JavaScript closures are similar to that, they are able to **take our parameters** and **bring us back variables** (references to those variables, to be precise) from inside a function that we aren't allowed in.

    ```javascript
    function order() {
    var food;
    function waiter(order) {
    chef(order);
    return food;
    }
    function chef(order) {
    if (order === 'pasta') {
    food = ['pasta', 'gravy', 'seasoning'];
    cook();
    }
    }
    function cook() {
    food.push('cooked');
    }
    return waiter;
    }

    var myOrder = order();
    console.log(myOrder('pasta'));
    // Array [ "pasta", "gravy", "seasoning", "cooked" ]
    ```

    As you can see from the above code, everything apart from `waiter` and its return value from inside the order function isn't exposed to the outside world.


    ## 4. Currying

    The effect, named after Haskell Curry, refers to **using multiple functions with single arguments**, in place of a single function with multiple arguments. Let's see the `add` functions below for example.

    ```javascript
    function addx(x) {
    function addy(y) {
    return x + y;
    }
    return addy;
    }

    function add(x, y) {
    return(x + y);
    }

    console.log(addx(3)(4)); //7
    console.log(add(3,4)); //7
    ```

    Both of the functions return the same result. The function `addx` accepts a parameter `x` while returning `addy` which in turn accepts the `y` value, performs the addition with `x` and returns the sum.

    The function `add` simply takes both `x` and `y` at the same time, performs the addition and returns the sum. So far the first function might not seem very useful, until...

    ```javascript
    var add4 = addx(4);
    console.log(add4(8)); //12
    console.log(add4(6)); //10
    console.log(add4(-74)); //-70
    ```

    Now, the former function suddenly gets interesting. In currying, you can always fix a step in a sequence of operations like the addition of 4 from the above code, which is helpful when one of the variables used in the operation is always the same.


    ## 5. Hoisting

    Hoist means to raise something. *Hoisting* in JavaScript also means the same and what gets raised is the declaration (variable & function declarations).

    Declarations are where variables and functions are created with keywords `var` (not for global) and `function`.

    It doesn't matter where you type the code to declare a function or variable, during evaluation all the declarations are moved up inside the scope where they reside (except for in strict mode). Hence, it's possible to write a working code with the code for function call placed before function declaration.

    ```javascript
    var name = 'Mr. Burns';
    console.log(sayCatchPhrase(name)); //"Excellent!"

    function sayCatchPhrase(name) {
    phrases = {
    'Homer': 'Mmm...beer.',
    'Marge': 'Homie!',
    'Bart': 'Eat my shorts.',
    'Lisa': 'If anyone wants me, I\'ll be in my room.',
    'Mr. Burns': 'Excellent!'
    };
    return phrases[name];
    }
    ```


    ## 6. Mutation

    Mutation means change or modification. If you ever come across the word mutation in JavaScript it's probably referring to the changes that DOM elements went through.

    There's even an API called [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to keep an eye out for the DOM mutations like **addition of child elements or changes to the element's attributes**.


    ## 7. Pragma

    *Pragma* is short for pragmatic information. In plain English, pragmatic is an adjective that means sensible and practical. In programming, *pragma* refers to the code that consist of useful information on **how a compiler or interpreter or assembler should process the program**.

    It does not contribute anything to the programming language itself and its syntax may vary. They only affect the compiler behavior. JavaScript also has few pragmas, one of them is `strict`.

    ```javascript
    "use strict";
    ```

    By the above pragma, the JavaScript code will be executed in strict mode. In strict mode, bad syntax isn't allowed, *hoisting* isn't
    done, silent errors are shown, etc. It helps in **writing a more secure and optimized JavaScript code**.


    ## 8. Sentinel

    *Sentinels* are soldiers who stand guard (Remember the ones from X-Men?). In programming, *sentinels* are values that are used to indicate the end of a loop or process. They can also be called "flags".

    You can use any reasonable value as a *sentinel*. Here's an example of *sentinels* used in JavaScript; the `indexOf` method which returns -1 (the sentinel value) when the search value isn't found in the targeted string. Below is a function that returns the position of an array value and if value isn't found, returns -1.

    ```javascript
    function getPos(ary, val) {
    var i = 0, len = ary.length;
    for(; i< len; i++) {
    if(ary[i]===val) return i + 1;
    }
    return -1;
    }
    console.log(getPos(['r','y','w'],'y')); //2
    console.log(getPos(['r','y','w'],'g')); //-1
    ```


    ## 9. Vanilla

    Vanilla is considered a **traditional standard flavor**. *Vanilla* JavaScript is referred to the standard JavaScript &#8212; no framework. Vanilla in fact isn't only used to describe the standard version of JavaScript but also other languages like CSS.


    ## 10. Variadic

    *Variadic* is an adjective created by joining "variable" and "adicity". "Adicity" is from ancient Greek, with a meaning that's the same as the Latin word "arity" (Item 1 in this list). Thus, the term *variadic* is used to **express something that has variable number of arguments**.

    In JavaScript, a *variadic* function takes in any number of arguments. It can be created using `arguments` property, `apply` method and since ES6, the spread operator. Below is an example using a spread operator.

    ```javascript
    function test(...a) {
    console.log(a);
    }
    test('a','b','c',8,[56,-89]);
    //output is Array [ "a", "b", "c", 8, Array[2] ]
    ```