This is Yet Another Javascript Guide: a quick guide to Javascript functions and objects. The intended audience is somebody who knows a language like Ruby or Python and has somehow avoided learning Javascript, yet found themselves working on a Javascript project. This is the Cliff's Notes for Javascript. This is for cramming, for all-nighters, for people who need to get things done.
This guide will demonstrate how to declare functions, pass arguments in functions, and use the arguments inside a function. It will also explain the basics of a Javascript object. Hopefully, this information will help to understand how destructuring works when you want to pass an object into a function. Destructuring is a common pattern in present-day Javascript projects, like React or Gatsby or ExpressJS.
- Define a function that says hello
- A function can accept different types of arguments
- Objects
- Resources
function sayHello(name) {
return console.log(`Hello ${name}.`)
}The function is named sayHello. It can be used like this:
sayHello('Sylvia')That will print "Hello Sylvia." in a Javascript console. You can see the code execute by visiting this site and clicking "Run" at the top of the page. You can also open up your browser's developer tools and click console, then copy/paste the code into the console like you would a Ruby or Python console.
Javascript functions can be defined several different ways, using different syntax. Here are examples of different syntaxes which do the same thing. This is outside of this guide, but you should at least know this variety exists. (For further reading.)
The sayHello example function:
- It has a parameter called
name. The parameter can be used as a variable throughout the function. - "Sylvia" is passed into the function as an argument. In other words,
namecarries the value, or passes the message, into the function.
StackOverflow user 0x499602d2 said, "The parameters are the aliases for the values that will be passed to the function. The arguments are the actual values."
Basically, parameter == argument == variable == storing a value and reasoning about code.
For the sayHello function's argument, I'm passing a string with the text "Sylvia". But if I wanted, I could pass any sort of Javascript object or primitive, like:
function sayAge(age) {
return console.log(`My age is ${age}.`)
}
// prints "My age is 6."
sayAge(7)function helloFriends(friends) {
// loop through friends
friends.forEach(function (friend) {
// say hello to each friend
return console.log(`Hello ${friend}.`)
})
}
const myFriends = ['Sylvia', 'Okie', 'Nacho']
// prints
// Hello Sylvia.
// Hello Okie.
// Hello Nacho.
helloFriends(myFriends)Make a function that accepts multiple arguments:
function sayNameAndAge(name, age) {
return console.log(`My name is ${name}. I am ${age} years old.`)
}
// prints "My name is Sylvia. I am 6 years old."
sayNameAndAge("Sylvia", 6)These arguments are positional, which means that flip-flopping the arguments would create a bug:
function sayNameAndAge(name, age) {
return console.log(`My name is ${name}. I am ${age} years old.`)
}
// prints "My name is 6. I am Sylvia years old."
sayNameAndAge(6, "Sylvia")An object is a key/value pair. The value can hold all sorts of stuff. Ruby has the hash, Python has the dictionary, and Javascript has the object. Here is a more thorough explanation.
In it's most basic form, you can create an object like this:
const kitty = {
"name": "Sylvia",
"age": 6
}You can access the values in an object like this:
const kitty = {
"name": "Sylvia",
"age": 6
}
// prints "Sylvia"
console.log(kitty.name)
// prints 6
console.log(kitty.age)Create a function that uses an object inside the function:
function sayNameAndAge(cat) {
return console.log(`My name is ${cat.name}. I am ${cat.age} years old.`)
}
const kitty = {
"name": "Sylvia",
"age": 6
}
// prints "My name is Sylvia. I am 6 years old."
sayNameAndAge(kitty)Notice how the object named kitty does not match the expected parameter cat in sayNameAndAge. You can name your object whatever you want and pass it into the function with no problems. You just need to match the object's keys whenever you're accessing them, like cat.name.
Destructuring is a useful way to do this, too. It looks like this:
function sayNameAndAge({ name, age }) {
return console.log(`My name is ${name}. I am ${age} years old.`)
}
const kitty = {
"name": "Sylvia",
"age": 6
}
// prints "My name is Sylvia. I am 6 years old."
sayNameAndAge(kitty)The important part is this: sayNameAndAge({ name, age }), where the brackets surround the parameters. The function essentially "unpacks" the object so that you can directly access the variables throughout the function, like this: My name is ${name}. I am ${age} years old..
The destructured parameters must match the keys that are in the object. For example:
function sayNameAndAge({ firstName, age }) {
return console.log(`My name is ${firstName}. I am ${age} years old.`)
}
const kitty = {
"name": "Sylvia",
"age": 6
}
// kitty.name does not match the parameter "firstName" so this has a bug
//
// prints "My name is undefined. I am 6 years old." :( poor kitty!
sayNameAndAge(kitty)Here's a real world example to see the two different ways of passing an object into a function. A React component might have a props which you use throughout your component:
function Article(props) {
return (
<article>
<h1>{props.title}</h1>
<p>{props.body}</p>
<article>
)
}Or, you can destructure props so that you don't have to use the props argument in your component:
function Article({ title, body }) {
return (
<article>
<h1>{title}</h1>
<p>{body}</p>
<article>
)
}- Chapters 1 - 6 of Eloquent JavaScript.
- javascript.info for learning ES6 and for reference.
- MDN docs for reference.
Objects section.
You say, "An object is a key/value pair."
Is an object just one single key/value pair or a "collection" of key/value pairs? Or a collection of "properties"? A property is the single key/value pair?
Coming from Ruby, it would be helpful to more clearly explain that a Javascript object is more like a Ruby hash, whereas a Ruby object is more like a Javascript prototype. Is that right?
This is nitpicky, but in your repl illustration you're using the word "cat" In the function name and the "kitty" in the constant name. "Cat" and "Kitty" are basically two words that mean the same thing, but what you're really trying to express is that the constant is a particular cat. "Kitty" doesn't really convey that so maybe the constant name should be "myFavoriteCat" or "myCat" or something like that??