JAVASCRIPT(JS)
WHAT IS JAVASCRIPT?
JavaScript is a programming language that allows you to
implement complex features on a website, such as dynamic
elements or interactivity, JavaScript is executed once the
information from the HTML and CSS in the source code has
been parsed and constructed. JavaScript is a lightweight dynamic scripting
programming language.
HTML CONTENT
CSS DESIGN
JAVASCRIPT INTERACTION
WHAT IS THE FEATURES OF JAVASCRIPT?
JavaScript is used to create interactive websites. It is mainly used for:
JavaScript is a object-based scripting language.
Giving the user more control over the browser.
It Handling dates and time.
It Detecting the user's browser and OS,
It is light weighted.
JavaScript is a scripting language and it is not java.
JavaScript is interpreter-based scripting language.
JavaScript is case sensitive.
JavaScript is object-based language as it provides predefined objects.
Every statement in JavaScript must be terminated with semicolon (;).
Most of the JavaScript control statements syntax is same as syntax of
control statements in C language.
An important part of JavaScript is the ability to create new functions within
scripts. Declare a function in JavaScript using function keyword.
10 TERMINOLOGIES OF JAVASCRIPT:
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, 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.
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.
(function () {
//body
})();
Above is an IIFE (Immediately Invoked Function Expression). The function in it is
anonymous since it doesn't have a name. Now, take a look at the one:
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.
function order() {
var food;
function waiter(order) {
chef(order);
return food;
}
function chef(order) {
if (order === 'pasta') {
food = ['pasta', 'gravy', 'seasoning'];
cook();
}
}
function cook() {
[Link]('cooked');
}
return waiter;
}
var myOrder = order();
[Link](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.
function addx(x) {
function addy(y) {
return x + y;
}
return addy;
}
function add(x, y) {
return(x + y);
}
[Link](addx(3)(4)); //7
[Link](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...
var add4 = addx(4);
[Link](add4(8)); //12
[Link](add4(6)); //10
[Link](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.
var name = 'Mr. Burns';
[Link](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 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.
'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.
function getPos(ary, val) {
var i = 0, len = [Link];
for(; i< len; i++) {
if(ary[i]===val) return i + 1;
}
return -1;
}
[Link](getPos(['r','y','w'],'y')); //2
[Link](getPos(['r','y','w'],'g')); //-1
9. Vanilla
Vanilla is considered a traditional standard flavor. Vanilla JavaScript is referred to
the standard JavaScript — 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.
function test(...a) {
[Link](a);
}
test('a','b','c',8,[56,-89]);
//output is Array [ 'a', 'b', 'c', 8, Array[2] ]
Written by Beulah Perikala