DEV Community: Salah Eddine Ait Balkacm

JSON - JavaScript Object Notation

Salah Eddine Ait Balkacm — Sat, 08 Feb 2020 12:16:07 +0000

JSON

JavaScript Object Notation

Objects In JavaScript

Object Literal: A JavaScript object literal is a comma-separated list of name-value pairs wrapped in curly braces.

const person = {
  name: "mohammed",
  lastname: "Alaoui",
  age: 26
};

JSON: JavaScript Object Notation

What Is JSON ?
JSON Data Representation format.
JSON is a lightweight format for storing and transporting data.
JSON is often used when data is sent from a server to a web page.

Why Use JSON?

Commonly used for API & Configs.
Lightweight & easy to read/Write.
Integrates easily with most languages.

How To Write JSON?

Use Key/Value Pairs.
Use double quotes around key.
Use only specified data types.

{
  //objects
  "name": "Salah", //string
  "age": 22, //numbers
  "isStudent": true, //booleans
  "friends": [
    //arrays
    {
      "name": "friend1",
      "age": 0.5 //floating numbers
    },
    {
      "name": "friend2",
      "age": -45, //signed numbers
      "isStudent": false
    }
  ],
  "salary": null //and null
}

Data types

Object.
Numbers: 0, -5, 25.6,33.
String: text.
Boolean: true or false.
Array.
Null.

JavaScript function for JSON

JSON.Parse()

Imagine we received this text from a web server:
'{ "name":"John", "age":30, "city":"New York"}'
We use JSON.parse() to convert text into a JavaScript object:

var object = JSON.parse('{"name":"John", "age":30, "city":"New York"}');

JSON.Stringfy()

Now Imagine we have to send this object to the web server again:
We use the JavaScript function JSON.stringify() to convert it into a string.

var myJSON = JSON.stringify(object);

Inheritance In ES6

Salah Eddine Ait Balkacm — Tue, 04 Feb 2020 19:13:32 +0000

Inheritance In ES6

Classes In ES6

Implementing a Class

to Implement a class we use the class keyword.
every class must have a constructor function. attributes of that class are defined using getters/setters(functions as well).
as for attributes we use getters and setters.
getter and setter are special kind of methods that allow us to set the value of an attribut, and get the values of an attribute.

class Person {
  //getter
  //here we used the get keyword and then the name of the getter
  get Name() {
    return this.name; //here we simply return the value of that attribute but with the this key word
    //so that we get the attribute of the select instance of that class
  }
  //setter
  set Name(name_) {
    //and here we set the value of the attribute
    this.name = name_;
  }
  //getter
  get Age() {
    return this.age;
  }
  //setter
  set Age(age_) {
    this.age = age_;
  }
  //constructor
  constructor(name_, age_) {
    this.name = name_;
    this.age = age_;
    this.canWalk = function() {
      console.log("YAY !! I'm Walking");
    };
  }
}

//this is an instance of a Person
let me = new Person("salah", 25);
console.log(me); //Person {name:'salah',age:25}

console.log(me.Age); //getter
me.Age = 22; //setter
console.log(me.Name); //getter
me.Name = "SALAH EDDINE"; //setter

console.log(me); //Person {name:'SALAH EDDINE',age:22}

Inheritance

In modern javascript we have the extends key work which makes easier to implement
inheritance in between our classes.
Male extends Person means that Male class has all the properties and methods of Person And also have it's own.

class Male extends Person {
  //getter
  get Gender() {
    return this.gender;
  }
  constructor(name_, age_ /*,here we can add other attributes as well*/) {
    //in the child class(Male) we must call the parent constructor first
    //we do that using the super method and pass to it age_ and name_ parent properties
    super(name_, age_);
    //and now we assign the child property gender which in this case will have a fixed value
    this.gender = "male";
  }
}

//this is an instance of a male
let MalePerson = new Male("mohammed", 15);
console.log(MalePerson); //Male{name:'mohammed',age:15,gender:''male}

HOW TO CREATE OBJECTS IN JAVASCRIPT

Salah Eddine Ait Balkacm — Mon, 03 Feb 2020 22:01:46 +0000

objects

creating an object

Using Object litteral

this is the simplest way of creating a javascript object
you simply create a variable an assign it to an object with specified properties

const person = {
  name: "salah",
  age: 22
};

using constructors

constructor are methods that creates an instate object based on given values passed as parameters,
the properties of that object are spercifed in the method implementation .
here we define our constructor:

function Person(name_, age_) {
    this.name = name_;
    this.age = age_;
    this.Greeting = function () {
        console.log("hi, My name is " + this.name);
    }
}

and now we only initialize a new instance of Person
let salah = new Person("salah", 25);
so here we can access our objects promerties and methods

salah.Greeting();
console.log(salah.age);
console.log(salah.name);

using factory functions

var personFF = function(name_, age_) {
  return {
    name_,
    age_
//we can add methods and properties here
  };
};
var khalid = personFF("khalid", 15);
console.log(khalid);

using the Object.clone() method

to clone an object is another choice we have.
this method takes one or more objets as parameters and then creates a new object based o what's given

var hamza = Object.assign(khalid);
hamza.name_ = "hamza";

as we can see the assign method copies the values of an object by reference.
so when we changed the second object's property name the first object's property changed to and vise-versa.

console.log(hamza);
console.log(khalid);

same thing if we try to change the age property

khalid.age_ = 33;
console.log(hamza);
console.log(khalid);

so now both objects are referncing the same memory adress
to prevent this problem we can use the spread operator
using the spread operator

var ayoube = {
  ...khalid // this ... is called the spread operator it basically spreads an object's properties into another object
};

console.log(ayoube);
ayoube.name_ = "ayoube";

so now even if we change the second object the first object stays the same and vise versa.

console.log(ayoube);
console.log(khalid);

using the create method
a better way to prevent this problem is the create method
it creates an empty object based on an exesting object's properties.

var khalil = Object.create(khalid);
console.log(khalil);
console.log(khalid);

so now we have an object called khalil that has the same properties as khalid (name* and age*)
but the with no values yet.

khalil.name_ = "khalil";
khalil.age_ = 25;
console.log(khalil);
console.log(khalid);