Writing your first JavaScript programme

By the end of this article, you will have written a JavaScript programme that outputs a sentence based on a number of variables.

If you've made it to this article you should have read the JavaScript Introduction, and be familiar with variables and data-types.

JavaScript is a weakly-typed language, so its types are inferred. To declare a variable in JavaScript we used the var keyword. In the following example:

• x is assigned the value "Hello World" and has an inferred type of string.
• y is assigned the value True and has an inferred type of boolean.
• a is assigned the value 1 and has an inferred type of number.

var x = "Hello World"
var y = true
var a = 1

Note: There are other ways to declare variables in JavaScript but we’re purposefully omitting them until a later article.

As JavaScript is a weakly-typed language, there is no way to declare a variable as a specific data-type.

It is, however, possible to perform logic based on the type, using the typeof keyword.

The following if statement checks to see if the type of y is a boolean. If it is, the programme will run the code within the curly brackets ({}), otherwise it will skip that block entirely.

var y = true

if (typeof y === 'boolean') {
  // do something if y is a boolean
}

It is possible to have the interpreter perform "typecasting" in JavaScript, but this is not something we’re going to cover in this article.

---

Your first JavaScript programme

It's finally time to write your first JavaScript programme. You can write this anywhere on your machine, however, it is best practice to keep your development code well organised.

Within your home directory ($HOME on Linux and Mac, %userprofile% on Windows) create a new directory called javascript (e.g. the full Linux path would be /home/codetips/javascript).

Navigate to this directory, create another directory called firstApplication and open it in your code editor of choice.

We're going to leave out most of the specifics of JavaScript best practices, so you're not overwhelmed with too much information, but everything will be explained in future articles.

In your new firstApplication directory, create a new file called index.js, add the below code into it, and save the file.

console.log("Welcome to my first JavaScript programme")

Now, open a terminal, navigate to your firstApplication folder, and run the following command:

node index.js

Your output should look very similar to the following:

$ node index.js         
Welcome to my first JavaScript programme

As you can see, the console.log function outputs text to the terminal. Unfortunately, as a first programme goes, this is pretty boring. Let's make this more personal with variables!

Replace the contents of index.js with the following code:

var name = "Simon"
var age = 29
var profession = "Developer"

console.log(
  "Welcome to my first JavaScript programme. My name is %s. I am %d years old. I work as a %s", 
  name, age, profession
)

We’ve extended our programme to output a longer sentence with some specific information about us.

Notice in the first parameter, to console.log (the text beginning “Welcome to my first”), we have string substitution (%s and %d). These are effectively placeholders that we then pass in as additional arguments to console.log (name, age and profession).

The significance of the letter after the percent (%) sign, is it defines the type of the argument that will be passed in (%s denotes a string and %d an int).

Another way to write this is to use something called a template literal:

console.log(`Welcome to my first JavaScript programme. My name is ${name}. I am ${age} years old. I work as a ${profession}.`)

See how we’ve used backticks (`) instead of double quotation marks ("), and our placeholders are now declared using a dollar sign and curly braces (${}) instead of string substitution.

Well done for finishing your first JavaScript programme! Now see if you can complete the following challenges:

• Change the variables so the programme prints out your name, age and profession, instead of mine.
• Add a new variable, favoriteAnimal, and incorporate that into your outputted sentence.

Remember you can always reach out to us with any questions or feedback - we’d love to hear from you!

---

CodeTips strives to help beginners, with zero or very little experience, learn to code.

We do cross-post to other sites to reach a wider audience, but why not subscribe to our newsletter and get the newest articles straight to your mailbox?

The original source for this content is CodeTips. The original content is kept up-to-date, but other sources may not be the latest version.

Comments

[Amin]

Hi there, great introduction into the JavaScript syntax!

Is it intended to use ES6 string template and all, alongside with the old var keyword instead of the new let and const keywords?

[Si]

Hey Amin,

Thanks for your comment. I hadn't realised but the import from CodeTips --> dev.to happened before I edited the article.

I'll have to put a bit of extra time making sure everything is updated on here, but the original article does explain that, in general terms, var should not be used.