Skip to content

Latest commit

 

History

History
455 lines (346 loc) · 11 KB

session1.md

File metadata and controls

455 lines (346 loc) · 11 KB

JavaScript Basics

Table of Contents

  1. Brief Intro to JavaScript

  2. Values & Variables

  3. Data Types

  4. Let, const, and var

  5. Comments

  6. Basic Operators

  7. Operator Precedence

  8. If / else Statements

  9. Type Conversion and Coercion

  10. Boolean Logic & Logical, Equality Operators

  11. Statements and Expressions

  12. Strings

  13. Template Literals

  14. Functions and Arrow Functions

  15. Intro to Arrays and Objects

  16. Loops

  17. Task

  18. References

Brief Intro to JavaScript

JavaScript is a versatile programming language primarily used to create dynamic and interactive content on web pages. It enables developers to implement features such as form validation, animations, and data manipulation.

Different between Java & JavaScript

Java JavaScript
It is one of the most popular programming languages. It is an object-oriented programming language and has a virtual machine platform that allows you to create compiled programs that run on nearly every platform. Java promised, “Write Once, Run Anywhere It is a light-weighted programming language (“client-side scripting language”) for developing interactive web pages. It can insert dynamic text into the HTML elements. JavaScript is also known as the browser’s language.

Values & Variables

Values represent data, while variables store these values for reuse. You can declare variables using let, const, or var:

let age = 25;
const name = "John";
var isStudent = true;

Data Types

JavaScript has several data types, categorized as:

  • Primitive:
  1. Numbers.
  2. Strings.
  3. Booleans.
  4. Undefined.
  5. Null.
  6. BigInt.
  7. Symbol.
  • Non-Primitive:
  1. Objects.
  2. Arrays.
let num = 10; // Number
let x; // undefined  
let text = "Hello"; // String
let isTrue = false; // Boolean
let obj = {}; // Object

Comments

symbole used for comments in javaScript is // Single line for single line and /* Multi-lines */ for multi-lines

Let, const, and var

  • let: Block-scoped, mutable.
  • const: Block-scoped, immutable (value cannot be reassigned).
  • var: Function-scoped, mutable (avoid using it in modern code).
let count = 10;
const PI = 3.14;
var total = 0; // Older syntax

Basic Operators

Operators perform operations on values:

  • Arithmetic: +, -, *, /, %
  • Assignment: =, +=, -=
  • Comparison: ===, >, <
  • Logical: &&, ||, !
let sum = 10 + 5; // 15
let isGreater = 10 > 5; // true

Operator Precedence

Operator precedence determines the execution order in complex expressions. Use parentheses to control precedence.

let result = 10 + 5 * 2; // 20, multiplication first
let corrected = (10 + 5) * 2; // 30

If / else Statements

Conditional statements execute code blocks based on conditions:

if (age > 18) {
  console.log("Adult");
} else if (age == 18) {
  console.log("you are eighteen");
} else {
  console.log("Minor");
}

Type Conversion and Coercion

Type conversion explicitly changes types, while coercion is implicit:

let num = "5";
console.log(Number(num)); // 5
console.log("5" + 10); // "510" (coercion)

Boolean Logic & Logical, Equality Operators

Boolean logic uses && (AND), || (OR), and ! (NOT). Equality operators include == (loose equality) and === (strict equality):

console.log(true && false); // false
console.log(10 === "10"); // false

Statements and Expressions

  • Expressions produce values: 5 + 5.
  • Statements perform actions: if (true) {}.

Strings

Basic Methods

 let str = "JavaScript";

  1. charAt(index)
    Returns the character at the specified index.

    console.log(str.charAt(4)); // Output: S

  2. charCodeAt(index)
    Returns the Unicode value of the character at the specified index.

    console.log(str.charCodeAt(4)); // Output: 83

  3. concat(string1, string2, ...)
    Concatenates strings.

    console.log("Hello".concat(" ", "World!"," ","Meefr" )); // Output: Hello World!

// same as 
console.log("Hello " + "World! " + "Meefr")

  4. includes(substring, start)
    Checks if a string contains a specified substring.

    console.log(str.includes("Script")); // Output: true

  5. indexOf(substring, start)
    Returns the index of the first occurrence of the substring, or -1 if not found.

    console.log(str.indexOf("a")); // Output: 1

  6. lastIndexOf(substring, start)
    Returns the index of the last occurrence of the substring.

    console.log(str.lastIndexOf("a")); // Output: 3

Case Conversion

  1. toUpperCase()
    Converts a string to uppercase.

    console.log(str.toUpperCase()); // Output: JAVASCRIPT

  2. toLowerCase()
    Converts a string to lowercase.

    console.log(str.toLowerCase()); // Output: javascript

Substrings and Slicing

  1. substring(start, end)
    Extracts characters between two indices.

    console.log(str.substring(0, 4)); // Output: Java

  2. slice(start, end)
    Extracts part of a string, supports negative indices.

    console.log(str.slice(-6)); // Output: Script

  3. split(separator, limit)
    Splits a string into an array based on a separator.

    console.log("Hello World".split(" ")); // Output: ["Hello", "World"]

Trimming and Padding

  1. trim()
    Removes whitespace from both ends of a string.

    console.log("  Hello World  ".trim()); // Output: Hello World

  2. trimStart() / trimEnd()
    Removes whitespace from the start or end of a string.

    console.log("  Hello".trimStart()); // Output: Hello

  3. padStart(targetLength, padString)
    Pads the beginning of the string to a specified length.

    console.log("123".padStart(5, "0")); // Output: 00123

  4. padEnd(targetLength, padString)
    Pads the end of the string.

    console.log("123".padEnd(5, "0")); // Output: 12300

Replacing

  1. replace(pattern, replacement)
    Replaces the first match of a pattern with a replacement.

    console.log("Hello World".replace("World", "JavaScript")); // Output: Hello JavaScript

  2. replaceAll(pattern, replacement)
    Replaces all matches of a pattern.

    console.log("aaa".replaceAll("a", "b")); // Output: bbb

Search

  1. match(regex) Need to know regex !

    Matches a string against a regular expression and returns the matches.

    console.log("JavaScript".match(/a/g)); // Output: ["a", "a"]

  2. search(regex)
    Searches for a match using a regular expression and returns the index of the match.

    console.log("JavaScript".search(/S/)); // Output: 4

Template Literals (Not a method but important)

  • Template literals use backticks for string interpolation and multi-line strings. 
    let name = "John";
console.log(`Hello, ${name}!`); // Output: Hello, John!
  • Extension Retriever 
    let x = "image.png"
// method 1 not generic 
let ext = x.slice(-3)
console.log(ext);
// method 2 generic 
ext = x.split(".")
const index = ext.length - 1 
console.log(ext[index])

Functions and Arrow Functions [No need for all this table to understand]

Feature Function Arrow Function
Syntax Uses the function keyword. Uses => arrow syntax.
this Binding Dynamic (depends on how called). Lexical (inherits from surrounding scope).
arguments Object Available. Not available; use rest parameters instead.
Constructor Support Yes, can be used as constructors. No, cannot be used as constructors.
Method Suitability Ideal for object methods. Ideal for callbacks and non-method functions.
Implicit Return Requires return for output. Supports implicit return for single-line expressions.

Examples

Syntax Example:

  • Function

    function add(a, b) {
  return a + b;
}

  • Arrow Function

    const add = (a, b) => a + b;
// or 
const add = (a,b) => { return a+b };

this Binding Example:

  • Function

    const obj = {
  value: 10,
  method: function () {
    console.log(this.value); // Refers to obj
  }
};
obj.method(); // Output: 10

  • Arrow Function

    const obj = {
  value: 10,
  method: () => {
    console.log(this.value); // Refers to outer scope
  }
};
obj.method(); // Output: undefined

Constructor Example:

  • Function

    function Person(name) {
  this.name = name;
}
const person = new Person("John");
console.log(person.name); // Output: John

  • Arrow Function

    const Person = (name) => {
  this.name = name;
};
const person = new Person("John"); // Error: Person is not a constructor

Functions encapsulate reusable code:

function greet(name) {
  return `Hello, ${name}!`;
}

const arrowGreet = (name) => `Hello, ${name}!`;

Intro to Arrays and Objects

  • Arrays store ordered collections:
let fruits = ["Apple", "Banana"];
  • Objects store key-value pairs:
let person = { name: "Alice", age: 30 };

Loops

Loops repeat code until a condition is met:

  • for loop:
for (let i = 0; i < 5; i++) {
  console.log(i);
}
  • while loop:
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

Task

  1. Solve this Tutorial: Tutorial Link
  2. Solve this Practice : Practice Link
  3. Solve this problems Problem Solving

For more references:

Interview Questions 1 - with solutions

Interview Questions 2 - with solutions