Skip to content

Latest commit

 

History

History
190 lines (132 loc) · 5.11 KB

variables.md

File metadata and controls

190 lines (132 loc) · 5.11 KB

General Assembly Logo

Introduction to JavaScript: Variables

Variables are containers for information -- we can store any value in them.

Think of a variable like a box. You can put lots of things into the box, like a doll, rug, or cat. The box still contains something.

We use variables to help repeat, change, store, or edit our data.

In order to declare a variable in JavaScript we use the keywords var, const, or let. The original declaration keyword was var, but in newer versions of JavaScript const and let were implemented. const is used on variables that will not be changed in your JavaScript code. let is used for variables that do change.

Most of the time, we want our variables to immediately store a value (like a box with a cat in it). Therefore, we assign values to our variables when we declare them.

We can create a variable without assigning it a value, if we want. This would be like having an empty box.

let noValue
console.log(noValue)
// => undefined

Here are three examples of variable assignment and declaration at the same time.

const myVar = 42
console.log(myVar)

const sum = myVar + 8
console.log(sum)

let doubleSum = 2 * sum
console.log(doubleSum)

When we declare a variable using let or with the old keyword var we can update our variables:

let noValue
console.log(noValue)
// => undefined

noValue = "assigned now"
console.log(noValue)
// => 'assigned now'


var num = 0
console.log(num)
// => 0

num = 1
console.log(num)
// => 1

But you can NOT reassign a variable declared with const

const mobilePhone = 'iPhone'

mobilePhone = 'samsung'
console.log(mobilePhone)
// => Uncaught TypeError: Assignment to constant variable.

JavaScript is a "dynamically-typed" language, meaning a variable can switch between data types. The following change is valid.

var myFavoriteNumber = 5

console.log(myFavoriteNumber)
// => 5

myFavoriteNumber = "five"

console.log(myFavoriteNumber)
// => "five"

Review Questions ❓

  1. What is the difference between var and let?
  2. Will the following code run without throwing an error?
const person = {
  name: 'Frank',
  age: 23,
  favFood: 'tacos'
}
person.name = 'Frankie'

Variable Syntax (5 minutes / 1:25)

Semicolons

camelCase

JavaScript variables and function names are case sensitive. You can write them however you want, but they're conventionally written using camel case syntax.

  • First letter of first word lowercase
  • First letter of remaining words uppercase
  • No spaces or punctuation between words

Examples

const pizzaTopping = "pepperoni";
const isThisVariableCamelCase = true;
const hasURLChanged = false;

Because Javascript is case sensitive, it helps to be consistent in your naming conventions.

const pizzaTopping = "pepperoni";
console.log(pizzatopping);
// Uncaught ReferenceError: pizzatopping is not defined

Note: Other types: kebab-case, which separates words with dashes, and snake case, which uses underscores.

Use kebab case for CSS classes. CSS is essentially case-sensitive, so this-class-name is much easier to read (and type!) than thisClassName.

snake_case is used in programming languages like Python.

You don't have to follow camelCase standards, you could just UPPERCASE EVERYTHING. But it's a good idea to be consistent everywhere, especially when working with other developers.

Comments

Comments are an extremely important part of writing code. They help us make sense of our code, especially for other people reading our code, or when we have walked away from some code and have completely forgotten what certain sections of it do. This happens much more quickly than you may imagine.

If you are working on a team, your documentation and commenting practices often translate to how easy you are to work with!

// Single line comment

/*
  Multiple
  line
  comments
*/

There is a short cut for commenting something out. To comment out a single line, click anywhere on the desired line and hold command and press /. The same is goes for commenting a line back in.

This short cut also works for multiline comments. Simply highlight all the lines you'd like to comment out and do the same: command + /.


Previous: Intro to JS