JavaScript for Beginners

JavaScript is a High level, often just in time compiled language. JavaScript is scripting language which is mostly use in web development along with HTML and CSS. JavaScript is a single threaded, Blocking and synchronous language.

JavaScript Variables

let
var
const

Var

Var variables can be re-declared and updated.

var temp = "Hello";
var temp = "Hi Siri";
temp = "Hello Sir!";

Scope of var variables is global which is declared outside of the function. Scope of var variables is function limited means it can be accessed only within that function. For example

var temp = "Hi globally";
function Greetings () {
 var test="Hello";
}

The scope of temp is global because it is declared outside a function while test is function scoped so we cannot access it outside of the function.

var temp = "Hi globally";
function Greetings () {
 var test="Hello"
}
console.log(test) // Error: test is undefined

Let

Let variables can be updated but not re-declared.

let temp= "hi"
temp="say hello" 

It will give an error.

let temp = "hi"
let temp = "Hello" // error: Identifier 'temp' has already been declared

Let is block scoped. Block is defined by curly braces { }. If variable is declared in curly braces then we cannot access that variable outside of the curly braces.

{
  let temp = "hello";
  console.log(temp);
}
console.log(temp); // temp is not defined

Const

Const variables cannot be updated and re-declared.

const temp = "hello";
temp = "hi"; // error: Assignment to constant variable. 

Const is block scoped. Like let declarations, const variables can only be accessed within the same block.

{
  const temp = "hello";
  console.log(temp);
}
console.log(temp); // temp is not defined

JavaScript Functions

JavaScript functions is a block of code to perform a particular task and it executed when “something” invokes it(calls it).

function myfunction (parameter1, parameter2) {
  return parameter1 * parameters2
}

Arrow Functions

Arrow functions were introduced in ES6, it totally changed the usage of JavaScript and how it looks. I never used function keywords in the last couple of years. Arrow functions allows you to write functions in shorter syntax.

Get Abdullah Shafiq’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Like previous syntax was changed from this

const myFunction = function () {
  //...
 }

to this

 const myFunction = () => { 
   //...
 }

If the function body contains only single statement then you can omit brackets and write it on single line without brackets.

 const myFunction = (p1,p2) => p1 * p2

The Spread Operators(…)

It was introduced in ES6. It allows iterable objects to expand into multiple elements. Let’s check it by example

const dialogue = ['Its', 'all about', 'finding the calm', 'in the chaos']

console.log(...dialogue)
// Its all about finding the calm in the chaos

The most probably use of spread operator is combining arrays.

const abc = ['a', 'b', 'c']
const def = ['d', 'e', 'f']

const combined = [...abc,...edf]
console.log(combined)

// ['a','b','c','d','e','f]

The Rest operator(…)

The rest operator is opposite of the spread operator. Spread operator “expands” an array into its element while rest operator collects multiple elements and “condenses” them into single element.

function sum (a, b, c) {
  return a+b+c;
}
const numbers =[1, 2, 3];

console.log(sum(...numbers));
//expected output : 6

JavaScript Destructuring

Destructuring is a JavaScript expression which allows you to unpack values from array, properties from objects into distinct element.

Let’s make an Example object of Person and destructure it.

const person= {
  first_name: 'Harry',
  last_name: 'Potter',
  dob: '2-10-2000',
  address: {
    streetNo: 'Oxford OX1 2JD',
    city: 'Oxford',
    country: 'UK'
  }
}

const { first_name, ...rest } = person;
console.log(rest) // {
                  //   last_name: 'Potter',
                  //   dob: '2-10-2000',
                  //   address: {
                  //              streetNo: 'Oxford OX1 2JD',
                  //              city: 'Oxford',
                  //              country: 'UK'
                  //             }

Conclusion

JavaScript is a programming language, that is one of the core technologies of word wide web alongside HTML and CSS. Hopefully you will get an idea about basics of JavaScript after reading this article.

Thanks for reading this article :)