Jumpstart Your Coding Journey with JavaScript

Your first Steps!

Hey there! If you’re reading this, you're probably curious about programming and want to dive into its world. Welcome! For starters I do recommend JavaScript, is not just popular; it’s everywhere. from websites to server-side applications, it's a powerful tool in the hands of a coder. no matter your experience level.

The objective of today's article is to provide you with a hands-on, introduction to programming using JavaScript. By the end of this article, I expect you to be able to create and run very simple instructions that will allow you to start experimenting programming. Let's get started and make coding an exciting adventure!

Why JavaScript?

First off, why JavaScript? It's versatile and ubiquitous, it flexibility will allow you to learn as you go instead of blocking you, and frankly, is really fun! Whether you’re building a website, a game, or an app, JavaScript can do it all. Plus, there’s a huge community of developers out there, so you’ll never be short on resources or support.

Understanding the basics

a Program is a set of instructions that a computer can execute to perform a specific task. Let’s break down some fundamental concepts, for now, let's keep it simple, I will be providing additional sources as links along the way for additional context.

Variables

Think of variables as containers for storing data. You can declare them using the keywords var, let, and const to store in them any data type.

const name = 'Ezequiel Carrizo' // String
let age = 33
var hobbies = ['Programming', 'Muscle cars']

Data Types

JavaScript has various data types like strings, numbers, booleans, arrays, and objects, let's have a glance at them:

• String: any type of text like data such as names, addresses, messages, comments...

  const name = 'Ezequiel Carrizo'

  ---

• Number: Numeric Data like amount, prices, etc

  const price = 12.99

  ---

• Boolean: True or False

  const halfFull = true
  const halfEmpty = false

  ---

• Object A collection of key-value pairs

  const ezequielProfile = { name: 'Ezequiel', age: 33 }

  ---

• Array A list of values, it can contain any of the data types mentioned above

  const fruits = ['apple', 'banana', 'lemon', 'tomato']
  const oddNumbers = [1, 3, 5, 7, 9]
  const users = [{ name: 'Ezequiel' }, { name: 'Kyra' }]

  ---

Control Structures

Control structures allow you to dictate the flow of your program, among them you can find Sequence, Conditional, and iteration

Conditionals

Imagine you have a daily decision-making process based on the weather. If it's raining, you take an umbrella. If it's sunny, you wear sunglasses. If it's cold, you wear a jacket. This decision-making process can be translated into programming using if, else if, and else conditionals along with Comparison Operators.

You can read more about Conditionals and Comparisons Operators clicking here

// Declare a variable to keep track of Your program output
let programOutput = ''

// Declare a variable to inform your program the current weather status
const weatherStatus = 'raining'

// Use conditionals, Check different possible weather status
// and update your program output accordingly
if (weatherStatus === 'raining') {
    programOutput = 'Do not forget your umbrella'
} else if (weatherStatus === 'sunny') {
    programOutput = 'Pick your sunglasses'
} else if (weatherStatus === 'cold') {
    programOutput = 'Wear a jacket'
} else {
    programOutput = 'It is a lovely day, enjoy it!'
}

Try this code in the playground!

In this example, We have used the strict comparison operator === for simplicity. there are many operators available and combinations of them available,read more about Comparison operators

Iteration 101: for Loops

Loops allow you to repeat instructions instead of writing each instruction individually. There are different ways for performing iterations available in JavaScript. For now, let's focus on the for loop.

A loop works by executing a block of code multiple times, which is known as iteration. Imagine you have to send a message to a list of friends; each time the message is sent, it is one iteration of the loop. Here's how you might write this using a for loop in JavaScript:

const friends = ['Alice', 'Bob', 'Charlie'];
for (let i = 0; i < friends.length; i++) {
  console.log(`Hello, ${friends[i]}!`);
}

Try this code in the playground!

Trying it out

You don't need to install any programs or do anything complicated to start experimenting with JavaScript. All you need is a web browser. Here's how you can try it out:

Using a JS Playground

While there are plenty of ways of executing javascript, the easiest way for beginners is using a playground in a Web Browser, follow the steps below for starting your JavaScript experience:

• Open your browser and go to https://playcode.io/javascript
• Copy and paste the Programs mentioned in this article, write your own, or alternatively you can ask an AI tools like ChatGPT to generate some test code for you I recommend the following Prompt to get started:
  Generate a Simple JavaScript Program in which output can be seen in the Console I want my program to do the following: *your input* (e.g: Generate a simple JavaScript program that prints the numbers from 1 to 10) After generating the code, please explain to me the code generated step by step
• In Playcode.io you can write your program in the first box at top left, and then review the results in the second box at the bottom of the screen

What is Console.log?

You might have noticed that in the code examples that I used console.log, This is a method in JavaScript that outputs a message to the "console". For now all you have to understand is that it is primarily to help you understand what's happening in your code by displaying variables, messages, or results directly in the console. You can use it to have a visual results of your first JavaScript Attempts!

console.log('Hello, World!')

const myVariable = 12345
console.log(myVariable)

console.log(true)
console.log(false)

What come next?

While there is much more to learn, at the end of the day, programs are built from groups of small instructions that you can understand and build upon the basics mentioned here.

Remember, programming is an iterative process. As you continue to practice, you'll refine your skills, learn new techniques, and discover best practices. Keep experimenting, building, and learning, and soon you'll be creating more sophisticated applications.

More importantly, Stay curious, and happy coding!

Next Post: Javascript Conditionals, Comparison and Logical Operators

Continue reading more about JavaScript in my Posts and visit the following sources

• MDN: JavaScript basics
• MDN: Conditionals and Comparison Operators
• Dev.to: Javascript Community
• Reddit: Javascript Community
• 10 games to learn JavaScript