Week 4 - Data structures and loops

Arrays

Loops

Objects

Package managers

Tools (IDE code editing)

Style - Autoformatting

Practice

Assignment

Back to core program

IDE Tools & Shortcuts

https://www.youtube.com/watch?v=dLzMz2Jk_qU

Why Learn Keyboard Shortcuts?

Professional developers rarely use their mouse. Keyboard shortcuts make you significantly faster and keep you in flow. What takes 5 seconds with a mouse takes half a second with a shortcut.

<aside> 💡

Learning shortcuts feels slow at first, but after a week of practice, you'll be noticeably faster. After a month, you won't want to go back.

</aside>

Essential VS Code Shortcuts

These shortcuts work in VS Code (the most popular code editor). Most are similar in other editors.

Comment/Uncomment Code

Purpose: Quickly disable code for testing or add comments

Windows/Linux: Ctrl + /

Mac: Cmd + /

// Select one or multiple lines and press Ctrl+/ (or Cmd+/)

const user = {
  name: 'Alice',
  // age: 28,        // Commented out
  // city: 'Amsterdam'  // Commented out
};

// Press again to uncomment

Works with single lines or multiple selected lines. The editor automatically uses the correct comment syntax for your file type (// for JS, <!-- --> for HTML, # for Python).

<aside> ⌨️

Open a JavaScript file, select 5 lines, and practice commenting/uncommenting them repeatedly until it becomes muscle memory.

</aside>

Move Lines Up/Down

Purpose: Reorder code without cut and paste

Windows/Linux: Alt + ↑ or Alt + ↓

Mac: Option + ↑ or Option + ↓

// Before: want to move function up
function calculateTotal() { }

const products = [];
const prices = [];

// After: cursor on line 1, press Alt+↓ twice
const products = [];
const prices = [];

function calculateTotal() { }

Your cursor doesn't need to select the line - just be anywhere on it. Works with multiple selected lines too.

Duplicate Lines

Purpose: Copy current line(s) without using clipboard

Windows/Linux: Shift + Alt + ↓ (or ↑ for above)

Mac: Shift + Option + ↓ (or ↑ for above)

// Before: cursor on this line
console.log('Debug point 1');

// After: press Shift+Alt+↓
console.log('Debug point 1');
console.log('Debug point 1');  // Duplicated below

Extremely useful for:

Multi-Cursor Editing

Purpose: Edit multiple places simultaneously

Add cursor: Alt + Click (Windows/Linux) or Option + Click (Mac)

Add cursor to next match: Ctrl + D (Windows/Linux) or Cmd + D (Mac)

// Select "user" and press Ctrl+D three times
const user = {
  name: 'Alice'
};

console.log(user.name);
console.log(user.age);
console.log(user.city);

// All three "user" instances now selected - type to change all

<aside> ⌨️

Create an object with 5 properties. Use multi-cursor to add "user." in front of each property name simultaneously.

</aside>

Search and Replace

Purpose: Find and change text across files

Find: Ctrl + F (Windows/Linux) or Cmd + F (Mac)

Replace: Ctrl + H (Windows/Linux) or Cmd + H (Mac)

Find in Files: Ctrl + Shift + F (Windows/Linux) or Cmd + Shift + F (Mac)

// Find all instances of "userName" and replace with "username"
// 1. Press Ctrl+H
// 2. Type "userName" in Find field
// 3. Type "username" in Replace field
// 4. Click Replace All or use Alt+Enter

const userName = 'Alice';  // Before
const username = 'Alice';  // After

Advanced search options:

<aside> 💡

Find in Files (Ctrl+Shift+F) searches your entire project. Essential when refactoring or tracking down where something is used.

</aside>

Rename Symbol

Purpose: Rename variables/functions everywhere they're used

Windows/Linux: F2

Mac: F2

// Before: cursor on "oldName", press F2, type "newName"
function oldName() {
  return 'test';
}

const result = oldName();
console.log(oldName());

// After: All instances renamed automatically
function newName() {
  return 'test';
}

const result = newName();
console.log(newName());

This is smart - it only renames the actual symbol, not every occurrence of that text as a string. Much safer than search-replace.

<aside> ⚠️

Don't use search-replace for renaming variables. Use F2. It understands scope and won't accidentally rename strings or comments containing the same text.

</aside>

More Essential Shortcuts

Action Windows/Linux Mac Usage
Delete line Ctrl + Shift + K Cmd + Shift + K Remove entire line instantly
Select line Ctrl + L Cmd + L Select current line
Go to line Ctrl + G Cmd + G Jump to specific line number
Go to file Ctrl + P Cmd + P Quick open files by name
Command palette Ctrl + Shift + P Cmd + Shift + P Access all VS Code commands
Toggle terminal `Ctrl + ``` `Cmd + ``` Show/hide integrated terminal
Format document Shift + Alt + F Shift + Option + F Auto-format entire file

Practice Strategy

Week 1: Focus on comment toggle and move lines. Use them constantly.

Week 2: Add duplicate lines and search-replace.

Week 3: Master rename symbol and multi-cursor.

Week 4: Learn the "More Essential" shortcuts.

<aside> ⌨️

Set a goal to use zero mouse clicks for your next coding session. Force yourself to use shortcuts. It'll feel slow initially, but you'll be much faster by the end of the week.

</aside>

Summary

| --- | --- | --- | --- |

Additional Resources

Video:

Reading:

Cheat Sheets: