Skip to content
beginnerPhase 32 · JavaScript Fundamentals

JavaScript Basics

Master variables, operators, control flow, and basic syntax.

45m
0 problems
Topic Progress0%

What is JavaScript

What is JavaScript

JavaScript is a high-level, interpreted programming language that makes web pages interactive.

History

  • Created by Brendan Eich in 1995 (in 10 days!)
  • Originally called Mocha, then LiveScript
  • Standardized as ECMAScript (ES)
  • Modern JavaScript: ES6+ (2015+)

Uses of JavaScript

  • Web development: Frontend interactivity
  • Server-side: Node.js, Deno, Bun
  • Mobile apps: React Native, Ionic
  • Desktop apps: Electron
  • Game development: Three.js, Phaser
  • Machine learning: TensorFlow.js

JavaScript vs ECMAScript

  • ECMAScript: The standard/specification
  • JavaScript: The implementation of the standard

JavaScript Engine

  • V8: Chrome, Node.js
  • SpiderMonkey: Firefox
  • JavaScriptCore: Safari
  • Chakra: Edge (legacy)

How JavaScript Runs

  1. Parsing: Code is read and converted to AST
  2. Compilation: AST is compiled to bytecode
  3. Execution: Bytecode is executed by the engine
  4. Optimization: Hot code is optimized (JIT)

Running JavaScript

Running JavaScript

In the Browser

Inline

<button onclick="alert('Hello!')">Click me</button>

Internal Script

<script>
  console.log('Hello from script!');
</script>

External Script

<script src="app.js"></script>

Script Attributes

<!-- Async: downloads and executes independently -->
<script async src="app.js"></script>

<!-- Defer: downloads, executes after HTML parsing -->
<script defer src="app.js"></script>

In Node.js

# Run a file
node app.js

# Interactive REPL
node

Using the Console

console.log('Hello!');
console.warn('Warning!');
console.error('Error!');
console.table([{a: 1}, {a: 2}]);
console.time('timer');
// ... code ...
console.timeEnd('timer');

Developer Tools

  • Chrome: F12 or Ctrl+Shift+I
  • Firefox: F12 or Ctrl+Shift+I
  • Safari: Cmd+Option+I

Basic Syntax

Basic Syntax

Statements

// Variable declaration
let name = 'John';

// Function call
console.log(name);

// Condition
if (age >= 18) {
  console.log('Adult');
}

Comments

// Single-line comment

/*
  Multi-line
  comment
*/

Semicolons

// Optional but recommended
let x = 5;
let y = 10;
let z = x + y;

Case Sensitivity

let name = 'John';
let Name = 'Jane'; // Different variable
let NAME = 'Bob';   // Another variable

Naming Conventions

// Variables and functions: camelCase
let firstName = 'John';
function getUserName() { }

// Classes: PascalCase
class User { }

// Constants: UPPER_SNAKE_CASE
const MAX_SIZE = 100;

// Private: prefix with _
let _privateVar = 'secret';

Strict Mode

'use strict';

// Catches common mistakes
x = 10; // Error: x is not defined

Console Output

console.log('Hello');        // Regular output
console.log('a', 'b', 'c'); // Multiple values
console.log(`Value: ${x}`); // Template literal

Practice Problems

0/3solved
Build JavaScript Basics Component

Create a reusable React component implementing JavaScript Basics. Include proper state management and accessibility.

Solution
// Production-ready component with:
// - Proper TypeScript types
// - Accessibility (ARIA)
// - Error boundaries
// - Loading states
// - Memoization where needed
JavaScript Basics Testing

Write unit and integration tests for JavaScript Basics using React Testing Library.

Solution
// Test coverage:
// 1. Rendering tests
// 2. Interaction tests
// 3. Edge case tests
// 4. Accessibility tests
JavaScript Basics Performance

Optimize JavaScript Basics for performance. Consider memoization, code splitting, and bundle size.

Solution
// Optimization techniques:
// 1. React.memo / useMemo / useCallback
// 2. Code splitting with lazy()
// 3. Virtual scrolling for lists
// 4. Image lazy loading
// 5. Bundle analysis

Quiz

1. What does JavaScript stand for?

Question 1 options

2. What is the correct way to include an external JavaScript file?

Question 2 options

3. What is the difference between async and defer?

Question 3 options

4. What is 'use strict' used for?

Question 4 options

5. What is the JavaScript engine in Chrome called?

Question 5 options

Flashcards

Question

What is JavaScript?

Click to reveal answer

Answer

A high-level, interpreted programming language that makes web pages interactive.

Question

What is the difference between async and defer?

Click to reveal answer

Answer

async executes immediately after download. defer waits for HTML parsing to complete.

Question

What is 'use strict'?

Click to reveal answer

Answer

A directive that enables strict mode, catching common coding mistakes and preventing unsafe actions.

Question

What is camelCase?

Click to reveal answer

Answer

A naming convention where words are joined with the first letter of each word capitalized: firstName.

Question

What is the JavaScript engine in Chrome?

Click to reveal answer

Answer

V8, developed by Google. Also used in Node.js.

Revision Notes

Key Takeaways

  • 1.JavaScript makes web pages interactive
  • 2.Use defer for scripts that need DOM access
  • 3.Strict mode helps catch common errors
  • 4.JavaScript is case-sensitive
  • 5.V8 is the engine in Chrome and Node.js

Interview Tips

  • •Explain the difference between async and defer
  • •Know the basic JavaScript naming conventions
  • •Understand what strict mode does
  • •Be familiar with console methods for debugging

Cheat Sheet

JavaScript Basics Cheat Sheet

Including Scripts

<script src="app.js"></script>
<script async src="app.js"></script>
<script defer src="app.js"></script>

Console Methods

console.log('Hello');
console.warn('Warning');
console.error('Error');
console.table(obj);
console.time('label');

Naming Conventions

  • Variables/Functions: camelCase
  • Classes: PascalCase
  • Constants: UPPER_SNAKE_CASE
  • Private: _prefix

Strict Mode

'use strict';
// Enables strict error checking