1.5 ECMAScript 5 (ES5) - 2009

ECMAScript 5 (ES5), released in 2009, significantly enhanced the JavaScript language

ECMAScript 5 (ES5) - 2009

ECMAScript 5 (ES5), released in 2009, significantly enhanced the JavaScript language, introducing features that addressed common pain points and enabling more robust, maintainable, and performant web applications. ES5's improvements laid the groundwork for modern JavaScript development practices. Here are some of the key features introduced in ES5, along with examples:

1. Strict Mode

Strict Mode is a way to opt in to a restricted variant of JavaScript, thereby implicitly opting-out of "sloppy mode". Strict mode makes it easier to write "secure" JavaScript by converting mistakes into errors.

'use strict';
x = 3.14; // This will cause an error because x is not declared

2. JSON Support

ES5 provided built-in support for parsing and stringify-ing JSON (JavaScript Object Notation), facilitating easier data interchange between clients and servers.

var jsonText = '{"name": "John", "age": 30}';
var obj = JSON.parse(jsonText);
console.log(obj.name); // Outputs: John

var str = JSON.stringify(obj);
console.log(str); // Outputs: {"name":"John","age":30}

3. Array Methods

ES5 introduced several new methods for arrays, making it easier to manipulate and query array data.

var fruits = ['apple', 'banana', 'cherry'];

fruits.forEach(function(item, index) {
  console.log(index, item);
});

var found = fruits.filter(function(item) {
  return item.startsWith('b');
});
console.log(found); // Outputs: ["banana"]

4. Function.bind

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

function greet() {
  console.log('Hello, ' + this.name);
}
var person = { name: 'John' };
var greetPerson = greet.bind(person);
greetPerson(); // Outputs: Hello, John

5. Object Methods

ES5 introduced methods for object manipulation, which were especially useful for object property enumeration and manipulation.

var person = { name: 'John' };

// Define a new property with specific property descriptors
Object.defineProperty(person, 'age', {
  value: 30,
  writable: true
});

console.log(person.age); // Outputs: 30

// Getting property names
var properties = Object.keys(person);
console.log(properties); // Outputs: ["name", "age"]

6. Accessor Properties (Getters and Setters)

ES5 formalized getter and setter functions, allowing you to define object properties that call a function when they are accessed or modified.

var person = {
  firstName: 'John',
  lastName: 'Doe',
  get fullName() {
    return this.firstName + ' ' + this.lastName;
  },
  set fullName(name) {
    var words = name.toString().split(' ');
    this.firstName = words[0] || '';
    this.lastName = words[1] || '';
  }
};

console.log(person.fullName); // Outputs: John Doe

person.fullName = 'Jane Doe';
console.log(person.firstName); // Outputs: Jane

7. Property Descriptors

ES5 allowed for more control over properties through descriptors, enabling developers to precisely define properties as writable, enumerable, and configurable.

var obj = {};
Object.defineProperty(obj, 'readOnly', {
  value: 42,
  writable: false
});

obj.readOnly = 12;
console.log(obj.readOnly); // Outputs: 42 (because the property is not writable)

ECMAScript 5 was a milestone in the evolution of JavaScript, addressing many of the language's shortcomings and laying down the foundation for future enhancements. Its introduction of strict mode, enhanced object manipulation capabilities, and new array methods significantly improved the language's robustness and developer experience.

Support us ❤️

Buy Us A Coffee