As you know, JavaScript is the top programming language in the world, the language of the web, of mobile hybrid apps (like PhoneGap or Appcelerator), of the server side (like NodeJS or Wakanda) and has many other implementations. It’s also the starting point for many new developers to the world of programming, as it can be used to display a simple alert in the web browser but also to control a robot (using nodebot, or nodruino). The developers who master JavaScript and write organized and performant code have become the most sought after in the job market.

In this article, I’ll share a set of JavaScript tips, tricks and best practices that should be known by all JavaScript developers regardless of their browser/engine or the SSJS (Server Side JavaScript) interpreter.

Don’t forget “var” keyword when assigning a variable’s value for the first time.

Assignment to an undeclared variable automatically results in a global variable being created. Avoid global variables.

Use “===” instead of “==”

The == (or !=) operator performs an automatic type conversion if needed. The === (or !==) operator will not perform any conversion. It compares the value and the type, which could be considered faster than ==

[10] === 10    // is false

[10]  == 10    // is true

'10' == 10     // is true

'10' === 10    // is false

 []   == 0     // is true

 [] ===  0     // is false

 '' == false   // is true but true == "a" is false

 '' ===   false // is false 

undefined, null, 0, false, NaN, '' (empty string) are all falsy.

Use Semicolons for line termination

The use of semi-colons for line termination is a good practice. You won’t be warned if you forget it, because in most cases it will be inserted by the JavaScript parser. For more details about why you should use semi-colons.

Create an object constructor

function Person(firstName, lastName){

    this.firstName =  firstName;

    this.lastName = lastName;        

}  

var Khalid = new Person("Khalid", "Ansari");

Be careful when using typeof, instanceof and constructor.

typeof: a JavaScript unary operator used to return a string that represents the primitive type of a variable, don’t forget that typeof null will return “object”, and for the majority of object types (Array, Date, and others) will return also “object”.

constructor: is a property of the internal prototype property, which could be overridden by code.

instanceof: is another JavaScript operator that check in all the prototypes chain the constructor it returns true if it’s found and false if not.

var arr = ["a", "b", "c"];

typeof arr;   // return "object" 

arr  instanceof Array // true

arr.constructor();  //[]

Define a Self-calling Function

This is often called a Self-Invoked Anonymous Function or Immediately Invoked Function Expression (IIFE). It is a function that executes automatically when you create it, If you want to use this function you can write in the following way: 

(function(){

    // some private code that will be executed automatically

})();  

(function(p,q){

    var r = p+q;

    return r;

})(40,50);

Get a random item from an array

var items_array = [12, 548 , 'a' , 2 , 5478 , 'toogit' , 8852, , 'freelance' , 2145 , 119];

var  randomItem = items[Math.floor(Math.random() * items.length)];

Get a random number in a specific range

This code snippet can be useful when trying to generate fake data for testing purposes, such as a salary between min and max.

var x = Math.floor(Math.random() * (max - min + 1)) + min;

Generate an array of numbers with numbers from 0 to max

var numbersArray = [] , max = 100;

for( var i=1; numbersArray.push(i++) < max;);  // numbers = [1,2,3 ... 100] 

Generate a random set of alphanumeric characters

function generateRandomAlphaNum(len) {

    var rdmString = "";

    for( ; rdmString.length < len; rdmString  += Math.random().toString(36).substr(2));

    return  rdmString.substr(0, len);

}

Shuffle an array of numbers

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];

numbers = numbers.sort(function(){ return Math.random() - 0.5});

A better option could be to implement a random sort order by code (e.g. : Fisher-Yates shuffle), than using the native sort JavaScript function

A string trim function

The classic trim function of Java, C#, PHP and many other language that remove whitespace from a string doesn’t exist in JavaScript, so we could add it to the String object.

String.prototype.trim = function(){return this.replace(/^s+|s+$/g, "");};  

A native implementation of the trim() function is available in the recent JavaScript engines.

Append an array to another array

var array1 = [12 , "foo" , {name "Joe"} , -2458];

var array2 = ["Doe" , 555 , 100];

Array.prototype.push.apply(array1, array2);

Transform the arguments object into an array

var argArray = Array.prototype.slice.call(arguments);

Verify that a given argument is a number

function isNumber(n){

    return !isNaN(parseFloat(n)) && isFinite(n);

}

Verify that a given argument is an array

function isArray(obj){

    return Object.prototype.toString.call(obj) === '[object Array]' ;

}

Note that if the toString() method is overridden, you will not get the expected result using this trick.

Or Use..

Array.isArray(obj); // its a new Array method

You could also use instanceofif you are not working with multiple frames. However, if you have many contexts, you will get a wrong result.

var myFrame = document.createElement('iframe');

document.body.appendChild(myFrame);

var myArray = window.frames[window.frames.length-1].Array;

var arr = new myArray(a,b,10); // [a,b,10]  

// instanceof will not work correctly, myArray loses his constructor 

// constructor is not shared between frames

arr instanceof Array; // false

Get the max or the min in an array of numbers

var  numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; 

var maxInNumbers = Math.max.apply(Math, numbers); 

var minInNumbers = Math.min.apply(Math, numbers);

Empty an array

var myArray = [12 , 222 , 1000 ];  

myArray.length = 0; // myArray will be equal to [].

Don’t use delete to remove an item from array

Use splice instead of using delete to delete an item from an array. Using delete replaces the item with undefined instead of the removing it from the array.

Instead of…

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; 

items.length; // return 11 

delete items[3]; // return true 

items.length; // return 11 

Use

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; 

items.length; // return 11 

items.splice(3,1) ; 

items.length; // return 10 

Clearing or truncating an array

An easy way of clearing or truncating an array without reassigning it is by changing its length property value:

const arr = [11,22,33,44,55,66];

// truncanting

arr.length = 3;

console.log(arr); //=> [11, 22, 33]

// clearing

arr.length = 0;

console.log(arr); //=> []

console.log(arr[2]); //=> undefined

Simulating named parameters with object destructuring

Chances are high that you’re already using configuration objects when you need to pass a variable set of options to some function, like this:

doSomething({ foo: 'Hello', bar: 'Toogit!', baz: 42 });

function doSomething(config) {  

const foo = config.foo !== undefined ? config.foo : 'Hi';  const bar = config.bar !== undefined ? config.bar : 'Me!';  const baz = config.baz !== undefined ? config.baz : 13;  // ...

}

This is an old but effective pattern, which tries to simulate named parameters in JavaScript. The function calling looks fine. On the other hand, the config object handling logic is unnecessarily verbose. With ES2015 object destructuring, you can circumvent this downside:

function doSomething({ foo = 'Hello', bar = 'Toogit!', baz = 13 }) {  // ...}

And if you need to make the config object optional, it’s very simple, too:

function doSomething({ foo = 'Hello', bar = 'Toogit!', baz = 13 } = {}) {  // ...}

Object destructuring for array items

Assign array items to individual variables with object destructuring:

const csvFileLine = '1997,John Doe,US,john@doe.com,New York';const { 2: country, 4: state } = csvFileLine.split(',');

What is the difference between Java and JavaScript?

These are two different programming languages.

Javascript is a language that has gained tremendous popularity as a language on the web browsers to create dynamic and interactive web pages.

Java is a language that has got a similar popularity when you build a “backend” system, which is a fancy word for “almost anything”.

Despite the common prefix, they are not related; there creators are different and so are their origin stories (as highlighted by other answers). 

- JavaScript is a genius marketing scam that polluted the world of browsers exceptionally well. The browser reads JavaScript’s code line by line and executes it.

- Java is a general purpose language that is used almost everywhere, from Android mobile apps and cryptography to OS and cloud computing. Java’s code is stored in bytecoded format and then gets JIT compiled before the actual execution. In other words, it translates the bytecode to machine code.

- Java is class based. JS is prototype based. All objects, like Array or Function inherit from the Object.prototype which remains on top of the chain.

- JavaScript uses dynamic type checking (checks the variables while the code executes), unlike Java’s static checking system (variables are verified at compile time), which is more bug free.

- The word “Script.” It’s a joke, in case you didn’t get it.

JavaScript (JS) is a lightweight interpreted or JIT-compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environmentsalso use it, such as Node.js, Apache CouchDB and Adobe Acrobat.JavaScript is a prototype-based, multi-paradigm, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.

JavaScript is a cross-platform, object-oriented scripting language used to make webpages interactive (e.x. having complex animations, clickable buttons, popup menus, etc.).  There are also more advanced server side versions of javascript such as Node.Js which allow you to add more functionality to a website than simply downloading files (such as realtime collaboration between multiple computers). Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.

JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:

• Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.

• Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server.

Are you planing to hire a CSS developer—how can you find a top developer for your front-end or PSD to CSS project?

CSS has been in use for more than 20 years and has become an integral part of any front-end development. Therefore, there is no shortage of developers with CSS listed on their resumes. Locating CSS developers is fairly easy, but choosing the perfect one is that much more of a challenge. This article offers a sampling of effective questions to help you identify the best CSS developers who are experts in their field.

What is CSS?

CSS stands for Cascading Style Sheets, CSS is a programming language that describes the style of a HTML document. If you want to customize your website background image, text colors or border then you need CSS design. Alongside HTML (responsible for structure) and JavaScript (responsible for interactivity), CSS (responsible for style) is one of the big three core components of the web.

Next, we learn about what a CSS developer does, and provide you with a general framework for writing a CSS project description to help you find the right developer for your requirements. How to hire a top css developer to get work done.

What kind of work a CSS developer should deliver to you? A front-end developer uses a combination of HTML, CSS, and JavaScript to build everything a user sees and interacts with on a website—everything from front-end features like fonts and sliders, to the overall manner in which web content like photos, videos, and articles are displayed in your web browser. A CSS developer who specializes in CSS, taking .psd files and mockups and writing the CSS code that incorporates all of the colors, padding, margins, and more that comprise those designs. Beyond the fundamentals, they can work magic with raw CSS, are well versed in preprocessors like LESS/Sass, and may even use a front-end CSS framework like Bootstrap or Foundation.

Hire the best CSS Developers Work with the world's best talent on Toogit — the top growing freelancing website trusted by over 150,000 users.

Writing A CSS Development Project Description

After you get a firm idea of your project deliverables, it’s time to write a project description. The way you write a description will determine the quality of developer that you’ll attract. It’s important to be concise yet detailed enough so developers interested in your project can submit proposals with fairly accurate cost and time estimates. Here our recommendation to use Toogit’s auto-proposal to speed up your hiring procedure and feel the power of AI in freelancing.

The title of your project description can include the type of development that you need. You know that you need a CSS developer, but why specifically a front-end developer specialized in CSS? The title should attract CSS developers with the specific technologies or skills you require for your project.

Next is the project overview. Describe what you’re planning to build or what you’ll need the developer to do. Be as detailed as possible, and include any wireframes or mockups that can help you attract the talented developer for your needs. 

Part of your description should also define the deliverables including any designs, documentation, or source code. 

Sample CSS Project Description

Below sample will help you to write a perfect project description. 

Project Title:

CSS Developer for a Fashion design website 

Description: 

We’re looking for an expert CSS developer to help us build an exciting new fashion design website template. The project is based on the (MongoDB, AngularJS, and Node.js) stack, so familiarity using Bootstrap with AngularJS is required.

The right developer will be able to provide us with the following skills and services:

• Translation of designer mock-ups and wireframes into front-end code
• Front-end integration with a MEAN back-end
• Unit testing
• Bootstrap, LESS, AngularJS
• Familiarity with API Creation and RESTful services

Project Scope & Deliverables:

While much of the project has already been completed, we still need additional support to help us polish our website and meet our launch deadline in 4 months (mm/dd/yyyy). We will need the following three deliverables:

Deliverable #1 by (date) 

Deliverable #2 by (date) 

Deliverable #3 by (date)

Hire a CSS Designer

On Toogit.com you can hire CSS coders and designers to make your web design and custom CSS project shine. Get started today.

Conclusion

For a top CSS developer, read our css interview question and answer section this might come off as a bit basic. However, It cover most of the core CSS concepts and principles, and provide a starting point for evaluating individuals. Being able to discuss CSS principles and concepts in a clear and coherent manner will demonstrate candidate’s communication skills as well as their theoretical and peripheral subject knowledge. Finding true CSS expert is a challenge. We hope you find the interview questions to be a useful foundation in your quest for the elite few among CSS developers. Finding such candidates is well worth the effort, as they will undoubtedly have a significant positive impact on your team’s productivity and results.