If the variable points to an object or an array we'll see more about objects and arrays later the content of the object or the array can freely change. My advice is to always use const and only use let when you know you'll need to reassign a value to that variable. Because the less power our code has, the better. If we know a value cannot be reassigned, it's one less source for bugs. Now that we saw how to work with const and let , I want to mention var.
Until , var was the only way we could declare a variable in JavaScript. Today, a modern codebase will most likely just use const and let. There are some fundamental differences which I detail in this post but if you're just starting out, you might not care about them.
Just use const and let. Once you assign a value with some type to a variable, you can later reassign the variable to host a value of any other type without any issues. In JavaScript we have 2 main kinds of types: primitive types and object types. Any value that's not of a primitive type a string, a number, a boolean, null or undefined is an object. Object types have properties and also have methods that can act on those properties. An expression is a single unit of JavaScript code that the JavaScript engine can evaluate, and return a value.
Arithmetic expressions are expressions that take a variable and an operator more on operators soon , and result in a number:. Operators allow you to get two simple expressions and combine them to form a more complex expression.
We can classify operators based on the operands they work with. Some operators work with 1 operand. Most work with 2 operands. Just one operator works with 3 operands. In this first introduction to operators, we'll introduce the operators you are most likely familiar with: operators with 2 operands. Let's now introduce another set of binary operators that you're already familiar with from basic math.
If you divide by zero, JavaScript does not raise any error but returns the Infinity value or -Infinity if the value is negative. A remainder by zero is always NaN , a special value that means "Not a Number":. Every complex statement with multiple operators in the same line will introduce precedence problems. Some operations have more precedence than the others.
The precedence rules are listed in this table:. After assignment and math operators, the third set of operators I want to introduce is conditional operators. Comparison operators always return a boolean, a value that's true or false. In addition to those, we have 4 equality operators. They accept two values, and return a boolean:. An if statement is used to make the program take a route, or another, depending on the result of an expression evaluation.
The conditional checks the expression you pass to it for a true or false value. If you pass a number, that always evaluates to true unless it's 0. If you pass a string, it always evaluates to true unless it's an empty string. Those are general rules of casting types to a boolean.
Did you notice the curly braces? That is called a block , and it is used to group a list of different statements. A block can be put wherever you can have a single statement. And if you have a single statement to execute after the conditionals, you can omit the block, and just write the statement:.
The first is using the array literal syntax. The second uses the Array built-in function. Since we can add an array into an array, we can create multi-dimensional arrays, which have very useful applications e. You can initialize a new array with a set of values using this syntax, which first initializes an array of 12 elements, and fills each element with the number 0 :. Note that you can set the length of the array. If you assign a bigger number than the arrays current capacity, nothing happens.
If you assign a smaller number, the array is cut at that position:. Returns the first item that returns true, and returns undefined if the element is not found. I personally prefer single quotes all the time, and use double quotes only in HTML to define attributes. Another way to define strings is to use template literals, defined inside backticks.
They are especially useful to make multiline strings much simpler. With single or double quotes you can't define a multiline string easily - you'd need to use escaping characters. Once a template literal is opened with the backtick, you just press enter to create a new line, with no special characters, and it's rendered as-is:. Template literals are also great because they provide an easy way to interpolate variables and expressions into strings.
With a loop we can automate and repeat a block of code however many times we want it to run, even indefinitely. We add a condition after the while keyword, and we provide a block that is run until the condition evaluates to true. Very similar to while , we have do.. It's basically the same as while , except the condition is evaluated after the code block is executed. We use the for keyword and we pass a set of 3 instructions: the initialization, the condition, and the increment part. Just like with while loops, you can interrupt a for loop using break and you can fast forward to the next iteration of a for loop using continue.
This loop is relatively recent introduced in and it's a simplified version of the for loop:. Note that in the second invokation I passed the black string parameter as the color argument, but no age.
In this case, age inside the function is undefined. Although the conditional will also be true if age is null , 0 or an empty string. You can pass any value as a parameter: numbers, strings, booleans, arrays, objects, and also functions. A function has a return value. By default a function returns undefined , unless you add a return keyword with a value:. They are very often used instead of "regular" functions, the ones I described in the previous chapter.
You'll find both forms used everywhere. If the function body contains just a single statement, you can omit the parentheses and write everything on a single line:. Arrow functions allow you to have an implicit return - values are returned without having to use the return keyword.
Like with regular functions, we can have default values for parameters in case they are not passed:. The two types of functions are very similar, so you might ask why arrow functions were introduced. The big difference with regular functions is when they are used as object methods.
This is something we'll soon look into. Any value that's not of a primitive type a string, a number, a boolean, a symbol, null, or undefined is an object. This is the object literal syntax, which is one of the nicest things in JavaScript. You can also initialize an object using the new keyword before a function with a capital letter. This function serves as a constructor for that object. In there, we can initialize the arguments we receive as parameters, to setup the initial state of the object:.
If you assign a variable the same value of another, if it's a primitive type like a number or a string, they are passed by value:. Even arrays or functions are, under the hood, objects, so it's very important to understand how they work. The value of a property can be of any type, which means that it can be an array, a function, and it can even be an object, as objects can nest other objects. Here we have a car object with a property named color , with value blue.
Labels can be any string, but beware of special characters - if I wanted to include a character not valid as a variable name in the property name, I would have had to use quotes around it:. The second which is the only one we can use for properties with invalid names , is to use square brackets:. Functions can be assigned to a function property, and in this case they are called methods.
In this example, the start property has a function assigned, and we can invoke it by using the dot syntax we used for properties, with the parentheses at the end:. In the following example, we have access to the brand and model properties values using this. It's important to note this distinction between regular functions and arrow functions - we don't have access to this if we use an arrow function:.
We can create a class named Person note the capital P , a convention when using classes , that has a name property:. There is a special method called constructor that we can use to initialize the class properties when we create a new object instance.
Now we can instantiate a new object from the class, pass in a string, and when we call hello we'll get a personalized message:. When the object is initialized, the constructor method is called with any parameters passed. A class can extend another class, and objects initialized using that class inherit all the methods of both classes.
Now if we instantiate a new object with the class Programmer , it has access to the hello method:. One of the simplest examples of how to use callbacks is with timers. Timers are not part of JavaScript, but they are provided by the browser and Node.
Let me talk about one of the timers we have: setTimeout. The setTimeout function accepts 2 arguments: a function, and a number. The number is the milliseconds that must pass before the function is ran. The function containing the console. If you add a console. This is a very common pattern when working with the file system, the network, events, or the DOM in the browser. As we saw in the previous chapter, with callbacks we'd be passing a function to another function call that would be called when the function has finished processing.
The main problem with this approach is that if we need to use the result of this function in the rest of our code, all our code must be nested inside the callback, and if we have to do callbacks we enter in what is usually defined "callback hell" with many levels of functions indented into other functions:. We first call the function, then we have a then method that is called when the function ends.
Now, to be able to use this syntax, the doSomething function implementation must be a little bit special. It must use the Promises API. This function receives 2 parameters. The first is a function we call to resolve the promise, the second a function we call to reject the promise. Resolving a promise means to complete it successfully which results in calling the then method in whatever uses it. Rejecting a promise means ending it with an error which results in calling the catch method in whatever uses it.
Any code that wants to use this function will use the await keyword right before the function:. With one particular caveat: whenever we use the await keyword, we must do so inside a function defined as async. As you can see in the example above, our code looks very simple. Compare it to code using promises, or callback functions.
And this is a very simple example, the major benefits will arise when the code is much more complex. When I introduced variables, I talked about using const , let , and var. If a variable is defined outside of a function or block, it's attached to the global object and it has a global scope, which mean it's available in every part of a program. There is a very important difference between var , let and const declarations. A variable defined as var inside a function is only visible inside that function, similar to a function's arguments.
A variable defined as const or let on the other hand is only visible inside the block where it is defined. A block is a set of instructions grouped into a pair of curly braces, like the ones we can find inside an if statement, a for loop, or a function. It's important to understand that a block does not define a new scope for var , but it does for let and const. Suppose you define a var variable inside an if conditional in a function.
This is because var is function scoped, and there's a special thing happening here called hoisting. In short, the var declaration is moved to the top of the closest function by JavaScript before it runs the code. This is what the function looks like to JS internally, more or less:. This is why you can also console. It can be tricky at first, but once you realize this difference, then you'll see why var is considered a bad practice nowadays compared to let - they have less moving parts, and their scope is limited to the block, which also makes them very good as loop variables because they cease to exist after a loop has ended:.
If you switch to let , when you try to console. If this article was helpful, tweet it. Learn to code for free. Get started.
Forum Donate. They allow you to execute blocks of code desired number of times with different values:. These types of statements are easy to understand. Using them, you can set conditions for when your code is executed. If certain conditions apply, something is done, if not — something else is executed. A similar concept to if else is the switch statement.
However, using the switch you select one of several code blocks to execute. Strings are what JavaScript calls to text that does not perform a function but can appear on the screen. In JavaScript, strings are marked with single or double-quotes. If you want to use quotation marks in a string, you need to use special characters:. Regular expressions are search patterns used to match character combinations in strings.
The search pattern can be used for text search and text to replace operations. You can also work with and modify dates and time with JavaScript. This is the next chapter in the JavaScript cheat sheet. It is the code of the structure of a webpage. Besides HTML elements, JavaScript is also able to take into account the user browser and incorporate its properties into the code.
Events are things that can happen to HTML elements and are performed by the user. The programming language can listen for these events and trigger actions in the code.
No JavaScript cheat sheet would be complete without them. When working with JavaScript, different errors can occur.
There are several ways of handling them:. JavaScript is gaining much importance as a programming language. It is increasingly the go-to language for building web properties thanks to its proven track record and benefits. In the JavaScript cheat sheet above, we have compiled many of the most basic and important operators, functions, principles, and methods.
It provides a good overview of the language and a reference for both developers and learners. We hope you have found it useful. Do you have additions to the JavaScript cheat sheet? Please let us know in the comments section below! Twitter Facebook. Last updated: Sep 3, 26 Comments.
Below you can find the Javascript cheat sheet in. It can be reassigned but only accessed within a function. Variables defined with var move to the top when the code is executed. Data Types Variables can contain different types of values and data types. Objects Objects are certain kinds of variables.
0コメント