console.log() and Your First Script

You've learned what JavaScript is and where it runs, and you've explored your CodeSandbox workspace and browser Developer Tools. Now, let's write some actual code!

One of the most fundamental tools for any JavaScript developer is console.log(). It's your way of printing messages and values to the console, which is incredibly useful for debugging and understanding what your code is doing.

---

1. What is console.log()?

Imagine you're trying to figure out if a light switch is working. You'd flip the switch and then look at the light bulb to see if it turns on. In programming, console.log() is like attaching a "light bulb" to your code. You tell it to "log" (display) something, and it shows up in your console.

The console.log() function is a built-in part of JavaScript that allows you to:

• Display Messages: Show simple text messages, like "Hello, world!"
• Inspect Values: See the current value of a variable at a specific point in your code.
• Debug: Track the flow of your program and identify where things might be going wrong.

You can log almost anything: text (strings), numbers, boolean values, objects, and more.

---

2. Your First JavaScript Script

Let's write your first line of JavaScript using console.log().

Instructions for CodeSandbox:

1. Open index.js: In the Files Pane (left sidebar) of your CodeSandbox, click on index.js to open it in the editor.

2. Type the code: In the index.js file, type the following exact line of code:

   console.log('Hello, JavaScript!')
   

3. Observe the Console: Look at the Console Panel (usually at the bottom of your CodeSandbox workspace). You should immediately see the message "Hello, JavaScript!" printed there.

   • Didn't see it? Make sure you typed the code exactly as shown (including capitalization, parentheses, quotation marks, and the semicolon). Sometimes, you might need to click a "Run" button in CodeSandbox if auto-run isn't active.
   • Check Browser DevTools: Also, open your browser's Developer Tools (F12 or Cmd + Option + I) and go to the Console tab. You'll see the same message there, confirming that your JavaScript is running in the browser environment.

Breaking Down the Line:

• console: This refers to the console object, which provides access to the browser's debugging console.
• .log(): This is a method (a function associated with an object) of the console object. The log method is what actually performs the action of displaying something in the console.
• ("Hello, JavaScript!"): These are the arguments passed to the log method. In this case, it's a string (text surrounded by quotation marks).
• ; (Semicolon): The semicolon marks the end of a statement in JavaScript. While JavaScript often tries to "guess" where statements end (a feature called Automatic Semicolon Insertion or ASI), it's a best practice to always include semicolons to avoid unexpected behavior and make your code clearer.

---

3. Experimenting with console.log()

Try logging different things to the console:

// Log a number
console.log(123)

// Log a calculation
console.log(5 + 7)

// Log multiple values (they'll appear separated by spaces)
console.log('My name is', 'Alice', 'and I am', 30, 'years old.')

// Log a boolean value
console.log(true)

As you type these, watch your console. The immediate feedback is a powerful way to learn!

---

Congratulations! You've just written and executed your first piece of JavaScript code. console.log() will be your constant companion as you embark on your coding journey.