Introducing the Basics of JavaScript Syntax

A first look at the building blocks of the JavaScript programming language.

Scroll down...

Content

Resources

Comments

This section is going to dive deeper into the building blocks of programming, through the lens of JavaScript. Most programming languages share the same logical constructs, differing primarily in syntax and implementation. Just as you can translate a book between any two languages, you can write the same program in any programming language—keeping in mind that certain languages may fit your requirements better than others.

Primitive Types

Every programming language will provide you with some basic data types. These are the atomic elements from which you will construct your own more complex data models. Here are the basic data types we will focus on:

  • Strings
“Hey there!”
“I am 300 years old.”
“Cool.”

Strings are basically chunks of text, though this text can be comprised of symbols, numbers, and even emoji 🤓. They are called strings because they represent strings of characters, just as beads are strung upon a necklace.

JavaScript bling

Programming terms will often be based upon implementation details like this. If the context interests you or provides a mnemonic benefit, then please explore with gusto. But do not feel obligated to obtain the complete history of each term you come across. In programming, every rabbit hole contains at least two more rabbit holes. There will be many times when you must decide between going deeper and moving forward. Computer science is built upon abstractions, so don't feel guilty about cashing out with just the abstraction when it is expedient.

  • Numbers
-99
3.14159265359
300

Some programming languages distinguish between whole numbers and decimals. JavaScript, however, only has a single Number type, so you don't have to worry about it. Numbers are numbers. And look, it's a word you already know. You’ve got this!

  • Booleans
true
false

A boolean is a value that is either true or false. Booleans are very important in computer science because, as you may have heard, computers run on zeros and ones. This term also has some historical context, though it is based on an origination rather than an implementation detail. Check out George Boole if you are interested.

Functions

// define the function
function bark() {
    console.log("Woof! Woof! I am a dog.")
}

// ...sometime later
// call the function
bark()

Functions are the élan vital of JavaScript. They’re little packets of behavior that you can package up, pass around, and execute. In JavaScript, functions are quite powerful. And while the concept of naming and storing a piece of code isn’t too difficult to grasp, there are many interesting details to explore. And explore we shall, in due time.

Data Structures

Data structures rest a level above the primitive data types, they are ways of collecting, organizing, and structuring your data.

  • Arrays
[1,2,3]
["Dog", "Cat", "Bobby"]
[2.5, false, "McGillicuddy"]

One of the most common data structures, arrays store an ordered lists of data. Whenever you think the word “group” or “set” or “list” or even just use the plural form of a word, you should immediately think array.

  • Objects
{ age: 15, name: "Bobo", isOnFire: true }
{ age: 22, name: "Fluppo", isOnFire: true }
{ age: 5900, name: "Xaangaalaax", fireBreathing: true}

Objects allow you to create custom data structures. If you can distill a real world entity or concept down to its quantitative traits, then you can model it using an object. Believe it or not, objects are the basis of object-oriented programming.

Loops

while dirtyDishesRemain() {
    cleanDish()
}

for (i = 0; i < cleanDishes.count; i++) {
    smashADishAgainstTheWall()
}

Computers are impervious to boredom, and loops are a great way to leverage that monomaniacal focus. Loops enable us to execute a block of code an arbitrary number of times. The precise number of repetitions to perform can be dynamic. For instance, you will often see the loop tied to the length of an array—a number you are unlikely to know ahead of time and one which is subject to change.

JavaScript primarily uses while and for loops, as shown above. There are also, however, less explicit looping constructs, such as the forEach method. We’ll look into that soon enough.

Control Flow

if (1 > 0) {
  console.log("Duh.")
} else {
  console.log("Huh?")
}

Control flow is about defining the path the computer takes through your code. It all boils down to conditional logic: If this, then that.

If Sally is taller than 4 feet, then let her on the ride. Otherwise, throw her in amusement park prison.

If the Refrigerator door is already open, then reach in and grab some leftovers. Otherwise, starve.

An if/else statement is the clearest example of control flow. We will explore some other instances in an upcoming lesson.

Wrapping Up

So you’re now at least able to pick JavaScript out of a lineup. We’ve briefly examined the major aspects of the syntax and now we’re ready to take a second, deeper pass. This time we’ll be interspersing our pontification with Codecademy’s interactive exercises. Before long, you’ll be ready to tackle some assignments on your own.



Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: JavaScript ES6