We use variables to store information and use them to organize our code. Declaring a variable is easy, but things get complicated when we declaring a variable with other variables and passing them around. So always knowing what's the value of a variable represents is very important.
Each variable points to a value. The expression on the right hand side of = will be evaluated to a value. When we access a variable, it's also an expression, so JavaScript will evaluate its value.
const myName = 'gohomewho'
const greetingMessage = 'Hi, I am ' + myName
console.log(greetingMessage) // 'Hi, I am gohomewho'
In this case, 'Hi, I am ' + myName is first evaluated to 'Hi, I am gohomewho' then access greetingMessage will point to that value.
Primitive
In JavaScript, a primitive (primitive value, primitive data type) is data that is not an object and has no methods or properties. There are 7 primitive data types: string, number, bigint, boolean, undefined, symbol, and null.
We will ignoreSymbolin this article.
Imagine there is already one value for each primitive in JavaScript and that's the only one. For example, all combinations of String that you can think of already exist, like fwaelkmfalwkem or wea;rnwealkna, or Number like 12423450124.
With this mental model, a equals to b not because they look the same. It's because they are pointing to the same value in JavaScript, or a computer memory location if you will.
const a = 'blah blah blah'
const b = 'blah blah blah'
console.log(a === b) // true
a === b is comparing the value of a points to and the value of b points to.
Reference
Unlike primitive values that already exist in computer memory, When we declaring a variable to be an object or an array, we create a new value on a computer memory location.
{} and {} look identical, but a doesn't equal to b because they point to different values in memory.
const a = {} // create a value in memory
const b = {} // create another value in memory
console.log(a === b) // false
a === b is comparing the value of a points to and the value of b points to.
a has a value in memory, we assign that value to c, so a and c point to a same value. a.name = 'apple' change the information we want to store in that value. Since c and a point to the same value, accessing c.name equals to access the name property on the object that a points to.
const c = a
console.log(c === a) // true
a.name = 'apple' // { name: 'apple' }
console.log(c.name) // 'apple'
Changing the information of a reference value will reflect to all variable that point to that value, since they all reference to a same value.
Function
General speaking, People don't say function is a variable because we already has a dedicated word for it, that's "function". But function is just like variable, it let us store information.
Print information of a function like we would do with variables.
function add (a, b){
return a + b
}
console.log(add)
The parameters are also variables, you can think of it as declaring them with let keyword without assigning an initial value.
function add (a, b){ // let a, b
return a + b
}
We can give parameters default value, and it will be something like this:
function add (a = 1, b = 2){ // let a = 1, b = 2
return a + b
}
const result = add()
console.log(result) // 3
Without passing any value to add(), the default value of variable a and b will be used.
When we pass values to function add, the values will be assign to the variables a and b like this:
function add (a = 1, b = 2){ // let a = 1, b = 2
// when called with add(3, 4)
// reassign the variables with the values that we pass
// a = 3
// b = 4
return a + b
}
const result = add(3, 4)
console.log(result) // 7
This is a way to help thinking. The comments // are just pseudo code. I don't know what really happens behind the scene, but we don't need to know that. What we care is the value of the variables represent.
When we pass objects or arrays to functions, we are not just passing the information, we are passing the values in memory. If we change the information of a value, it reflects to all variables that access to that value. So we need to be careful which value we are dealing with.
This is a contrive example that demonstrate when we want to create a new object based on an exist object, we might accidently change the information on the based object.
const a = { num: 1 }
function createNewObjWithDoubleNum(obj) {
obj.num = obj.num * 2
return obj
}
// return the value of `a` points to
const b = createNewObjWithDoubleNum(a)
// return the value of `b` points to
const c = createNewObjWithDoubleNum(b)
console.log(a) // {num: 4}
console.log(b) // {num: 4}
console.log(c) // {num: 4}
In this case, we are constantly changing the information of the value that a points to.
How to fix this? We need to copy the information to a new object. An easy way to do this is using spread operator ...
{...a} copy all properties on a to a new {} object that has a value in the memory. Same idea applies to {...b}.
const b = createNewObjWithDoubleNum({...a})
const c = createNewObjWithDoubleNum({...b})
console.log(a) // {num: 1}
console.log(b) // {num: 2}
console.log(c) // {num: 4}
a and b, and c have their own respective values. So changing information of the values doesn't affect others. Note that {...a} only performs a shallow copy, we are copying all values of properties of a to a new object, but the value can be an object. Changing the information of that value like a.owner.name = 'gohomewho' will reflect to b and c because the value of a.owner is copied to b.owner and c.owner. So accessing a.owner or b.owner, or c.owner will point to the same value which gives us the same piece of information.
You can learn more about deep copy on MDN.
Naming Convention
We can name a variable whatever we like, as long as it is valid in JavaScript. There is no strict rule but it is better to follow the convention so people can easily understand what we are saying, like how we speak in a language. The most important thing is to make the information clear and readable.
Pascal case
Capitalize each word.
MySuperButton
Camel case
Except the first word, capitalize rest of the words.
Generally, we name variables in this way.
createTask
kebab-case
Connect words with -.
max-item-count
shake_case
Connect words with _
MAX_ITEM_COUNT
Wrap up
We use variables to store information. It's important to know what value of a variable represents. A variable always points to a value. Variables can point to the same value. Things can go wrong and hard to debug when we don't know what values are being passed around and the information could be changed accidently.
Oldest comments (2)
Great article. For users who get into react, components are pascal cased so getting into the habit of pascal casing functions in vanilla JS could cause you some confusion later on.
I am so glad you like it. Thank you :D
It's common that a framework or library has their own naming philosophy, that a naming convention is applied to a specific thing. I wanted to include this in the article because I hope this would help someone felt less stressful when they see strange variable name. It's just people's decisions on how to label the information they want to store.