One post tagged with "big-words"

Here's a brief overview of important JavaScript concepts, along with sample code snippets for each:

1. Hoisting​

Hoisting refers to JavaScript's behavior of moving declarations (variables and functions) to the top of their scope before code execution.

console.log(a);  // undefined due to hoisting
var a = 5; 

2. Single Threaded​

JavaScript runs in a single thread, meaning it can only execute one task at a time.

3. Synchronous​

Synchronous code is executed line by line, with each operation blocking the next one until it completes.

console.log("First");
console.log("Second");

4. Function Invocation​

This is the process of calling or executing a function.

function greet() {
  console.log("Hello");
}
greet();  // Function invocation

5. Variable Environment​

The context in which variables are stored and accessed, typically inside a scope (global, function, or block).

6. Scope​

Scope determines the visibility and lifetime of variables and functions. In JavaScript, there are function scope, block scope, and global scope.

if (true) {
  let x = 5;  // Block scope
}
console.log(x);  // Error: x is not defined

7. Asynchronous​

Asynchronous code allows other operations to continue while waiting for a task to complete.

setTimeout(() => {
  console.log("Asynchronous");
}, 1000);

8. How This Happens Inside JS Engine?​

JavaScript's event loop handles asynchronous operations. The call stack executes synchronous code, while the event loop waits for tasks in the callback queue.

9. Dynamic Typing​

In JavaScript, variable types are determined at runtime, allowing flexibility in assigning different types to the same variable.

let data = 42;
data = "Now a string";  // No error

10. Operators​

Operators in JavaScript include arithmetic, comparison, logical, etc.

let sum = 10 + 5;  // Arithmetic
let isEqual = 10 === 10;  // Comparison

11. Operator Precedence​

This defines the order in which operations are executed.

let result = 2 + 3 * 4;  // 14, because * has higher precedence than +

12. Associativity​

Associativity determines the direction in which operators are evaluated.

let result = 10 - 5 - 2;  // Left-associative, evaluated as (10 - 5) - 2

13. Coercion​

JavaScript automatically converts types when required.

let result = '5' - 2;  // '5' is coerced into a number, result is 3

14. Namespace​

A way to organize code by grouping related variables and functions.

let MyApp = {
  name: "My Application",
  version: 1.0
};

15. First-Class Function (FCF)​

Functions in JavaScript can be treated as variables and passed around as arguments or returned from other functions.

function sayHello() {
  return "Hello";
}
let greet = sayHello;  // First-class function

16. Expression​

An expression is any valid unit of code that resolves to a value.

let sum = 5 + 10;  // The expression `5 + 10` evaluates to 15

17. Executing Function Created on the Fly​

Anonymous functions are created and executed instantly.

(function() {
  console.log("Executed on the fly");
})();

18. Mutate​

To modify an object or variable's properties.

let obj = { name: "Alice" };
obj.name = "Bob";  // Mutating the object

19. Arguments​

arguments is an array-like object in functions that contains all the arguments passed.

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}
console.log(sum(1, 2, 3));  // 6

20. Whitespace​

Whitespace (spaces, tabs, newlines) is ignored in JavaScript code for the most part.

21. Closure​

A closure is a function that remembers and accesses variables from its outer scope, even after that scope has closed.

function outer() {
  let x = 10;
  return function inner() {
    console.log(x);
  };
}
const closureFunc = outer();
closureFunc();  // Outputs 10

22. Factory​

A function that returns objects.

function createPerson(name, age) {
  return { name, age };
}
const person = createPerson("John", 30);

23. Callback Function​

A function passed as an argument to another function and executed later.

function fetchData(callback) {
  setTimeout(() => {
    callback("Data fetched");
  }, 1000);
}

fetchData((message) => console.log(message));

24. Function Currying​

Currying transforms a function that takes multiple arguments into a series of functions, each taking one argument.

function add(a) {
  return function(b) {
    return a + b;
  };
}
let add5 = add(5);
console.log(add5(3));  // 8

25. Inheritance​

Inheritance allows one object to acquire properties and methods of another.

class Animal {
  speak() {
    console.log("Animal speaks");
  }
}

class Dog extends Animal {
  bark() {
    console.log("Dog barks");
  }
}

26. Function Constructors​

A way to create objects in JavaScript using constructor functions.

function Person(name, age) {
  this.name = name;
  this.age = age;
}
const john = new Person("John", 30);

27. Polyfill​

A polyfill is code that provides functionality for older browsers that don't natively support newer features.

if (!Array.prototype.includes) {
  Array.prototype.includes = function(element) {
    return this.indexOf(element) !== -1;
  };
}

28. Syntactic Sugar​

Syntactic sugar refers to language features that don't add new functionality but make the code easier to read and write.

// Arrow function is syntactic sugar for writing function expressions
const add = (a, b) => a + b;