JavaScript Introduction Notes

Jul 15, 2024

JavaScript Introduction: Four Key Questions

In this 3-minute introduction, the speaker addresses four frequently asked questions about JavaScript. Here are the key points:

1. What is JavaScript?

  • Popularity: One of the most popular and widely used programming languages in the world.
  • Growth: Growing faster than any other language.
  • Usage: Used by big companies like Netflix, Walmart, and PayPal.
  • Opportunities: Average salary of a JavaScript developer in the US is $72,000/year.
  • Roles: Can work as front-end, back-end, or full-stack developer.

2. What Can You Do with JavaScript?

  • Old Perception: Previously seen as a toy language for browsers.
  • Modern Use: Supported by large companies and communities.
    • Applications: Build web, mobile apps, real-time apps (chats, streaming), command-line tools, and games.

3. Where Does JavaScript Code Run?

  • Browsers: Originally designed to run in browsers (JavaScript engines like SpiderMonkey in Firefox, V8 in Chrome).
  • Node.js: A C++ program by Ryan Dahl using Chrome's V8 engine to run JS outside browsers.
    • Usage: Allows building backends for web/mobile apps.
  • Runtime Environments: Can run in both browsers and Node.js.

4. Difference between JavaScript and ECMAScript?

  • ECMAScript: Specification defined by Ecma International.
  • JavaScript: Programming language conforming to ECMAScript specification.
    • Incremental Updates: Continuous updates since 1997; annual releases starting from ECMAScript 2015 (ES6).

JavaScript in Action

  • Browser Console: Writing simple JS code in Chrome developer tools.
    • Example Code: console.log('Hello World');, alert('Yo');.

Setting Up Development Environment

  • Code Editors: Recommended editors include Visual Studio Code (VS Code), Sublime Text, Atom.
    • Favorite: VS Code (simple, lightweight, cross-platform, powerful).
  • Node.js: Installation required from nodejs.org for running JS outside browsers and using third-party libraries.
  • Project Setup: Create a folder, open it in VS Code.
    • HTML File: Basic boilerplate setup with basic tags (<!DOCTYPE html>, <html>, <head>, <body>).
  • Live Server: VS Code extension for serving web applications and refreshing automatically.

Writing JavaScript Code

  • Script Tag Location: Place the script tag at the end of the body for better performance and ensuring elements are rendered.
  • First Code: console.log('Hello World'); with explanations about statements, strings, and comments.

External JavaScript Files

  • Separation of Concerns: Split JS from HTML for organized, maintainable code.
    • Syntax: Reference script file in HTML (<script src="index.js"></script>).
  • Example: Create index.js, move the JS code there, reference in HTML.

Executing JavaScript in Node.js

  • Installation: Install Node.js from nodejs.org.
  • Running Code: Use integrated terminal in VS Code to run JavaScript files.
    • Example: node index.js.
  • Function of Node: Node is a runtime environment for executing JavaScript code outside the browser.

Variables

  • Purpose: Use variables to store data temporarily in memory.
  • Declaration: Use let for variable declaration.
  • Initialization: Optionally initialize during declaration (let name = 'Mosh';).
  • Rules for Naming Variables:
    1. Cannot be a reserved keyword.
    2. Should be meaningful.
    3. Cannot start with a number.
    4. Must follow camelCase.
    5. Cannot contain spaces or hyphens.

Constants

  • Usage: Use const to declare variables that should not change.
  • Example: const interestRate = 0.3;.

Primitives and Dynamic Typing

  • Primitive Types: Strings, Numbers, Booleans, Undefined, Null, and Symbol (in ES6).
  • Dynamic Typing: JavaScript variables can change types at runtime.
    • Example: let name = 'Mosh'; name = 30; (string to number).
  • Type Checking: Use typeof to check variable types.

Reference Types: Objects, Arrays, Functions

Objects

  • Definition: Objects are used to group related data (key-value pairs).
  • Syntax: let person = { name: 'Mosh', age: 30 };.
  • Accessing Properties: Use dot notation or bracket notation.
    • Example: person.name or person['name'];.

Arrays

  • Definition: Arrays are used to store lists of items.
  • Syntax: let selectedColors = ['red', 'blue'];.
  • Accessing Elements: Use index notation.
    • Example: selectedColors[0].
  • Dynamic Nature: Arrays can change length and types of elements.

Functions

  • Definition: Functions are sets of statements that perform tasks or calculate values.
  • Syntax: function greet(name) { console.log('Hello ' + name); }.
  • Calling Functions: Use the function name with parentheses.
    • Example: greet('John');.
  • Parameters vs. Arguments: Parameters are declared in the function definition; arguments are provided when calling the function.
  • Example of Calculating Function: function square(number) { return number * number; }.