Skip to content

Commit bf79a8b

Browse files
committed
Update JS Guide
1 parent fe9c34f commit bf79a8b

File tree

1 file changed

+31
-14
lines changed

1 file changed

+31
-14
lines changed

data/guide/javascript.md

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,49 +4,54 @@ title: Introducing JavaScript
44

55
Now that you got a taste of HTML and CSS, let's talk about JavaScript. It's the third language that the browser understands. One of the easiest ways to get your feet wet with JavaScript, is in your browser's console.
66

7-
Open your [browser's developer tools](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools#how_to_open_the_devtools_in_your_browser) again. (Ideally on your published web page, but anywhere will do). But this time, switch to the tab named **Console**.
7+
Open your [browser's developer tools](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools#how_to_open_the_devtools_in_your_browser) again. (Perhaps on your published web page, or right here on this one). But this time, switch to the tab named **Console**.
88

99
![](https://developer.chrome.com/static/docs/devtools/console/javascript/image/the-console-99991743a015_2880.png)
1010

11-
This is an interactive JavaScript console, which means that you can type in JavaScript, hit `enter`, and it will calculate the result. Try adding two numbers by typing:
11+
This is an interactive JavaScript console, which means that you can type in JavaScript, hit `enter`, and it will calculate the result. Try adding two **numbers** by typing:
1212

1313
```js title=Console
1414
1 + 2
1515
```
1616

1717
After hitting `enter`, a new line will be shown with the result: `3`.
1818

19-
A piece of text, that a program works with, is called a _string_. In JavaScript, strings are usually wrapped in either single quotes or double quotes. Type:
19+
A piece of text, that a program works with, is called a _string_. In JavaScript, **strings** need to be wrapped either in single quotes `'`, double quotes `"`, or backticks `` ` ``. Type:
2020

2121
```js title=Console
2222
'1' + "2 cats"
2323
```
2424

2525
and hit `enter`. It returns `"12 cats"` (this time with quotes). That's because when working on strings (as opposed to numbers), the `+` operator concatenates them together.
2626

27-
If you want your program to remember something for later, assign it to a variable. Create the variable `myName` and assign it the string `"Peter"` by typing:
27+
If you want your program to remember something for later, assign it to a variable. Create the **variable** `myName` and assign the string `"Peter"` to the variable:
2828

2929
```js title=Console
3030
const myName = "Peter";
3131
```
3232

33-
The semicolon at the end is customary to mark the end of a statement. Statements (as opposed to expressions) will not directly give a result – that's why it prints a line saying `undefined`.
33+
You can see that it printed out `undefined`. That's because the assignment statement itself doesn't return anything (as opposed to expressions). The semicolon is optional, but customary to mark the end of a statement.
3434

35-
A third way to write a string is to wrap it in backticks. This allows you to put variables (and other expressions) in it using `${ }`:
35+
The `const` at the beginning means you are declaring a **constant**: you cannot assign to this variable again within this part of the program (or within the same console session). You can try writing the above statement again, and you'll get the error:
36+
37+
> redeclaration of const myName
38+
39+
The third way to write a string is to wrap it in **backticks**. This allows you to put variables (and other expressions) in it using `${ }`:
3640

3741
```js title=Console
3842
`I am ${myName} and ${3 * 10} years old`
3943
```
4044

45+
4146
## Functions
4247

43-
If you want to execute the same kind of computation multiple times, you need a function. One way to write a function that returns the string `"Hello World"`, and assign that function to the variable `hello` is:
48+
If you want to execute the same kind of computation multiple times, you need a function. One way to write a function that returns the string `"Hello World"`, and assign that function to the variable `hello` is as follows. (This is a so-called Arrow function, but there is an older [function syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions) as well.)
4449

4550
```js title=Console
4651
const hello = () => "Hello World";
4752
```
4853

49-
Again, assignments always return `undefined`. But now you can call the function:
54+
Since it's an assignment, it prints undefined into the console. But now you can call the function:
5055

5156
```js title=Console
5257
hello()
@@ -67,31 +72,43 @@ helloName("Peter")
6772
```
6873

6974

70-
## Objects and arrays
75+
## Objects
7176

72-
Finally, let's give you a sneak peak on JavaScript objects (which hold key-value pairs):
77+
Finally, let's give you a sneak peak on JavaScript [objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer) (which hold key-value pairs):
7378

7479
```js title=Console
7580
const person = { firstName: "Arthur", lastName: "Dent", age: 42 };
81+
7682
`${person.firstName} ${person.lastName} is ${person.age} years old.`
7783
```
7884

79-
And arrays, which act like lists:
85+
86+
## Arrays
87+
88+
And a sneak peak of [arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections), which act like lists:
8089

8190
```js title=Console
8291
const shoppingList = ["bread", "milk", "butter"];
92+
8393
const rememberFn = (item) => `Remember the ${item}!`;
8494
shoppingList.map(rememberFn)
8595
```
8696

87-
`.map()` calls the method `map` on the `shoppingList`. A method is a function attached to an object. All arrays come with a `map` method. When you call it, you need to give it a special kind of argument: a function.
97+
`.map()` calls the method `map` on the `shoppingList`. A method is a function attached to an object. All arrays come with a `map` method. When you call it, you need to give it a special kind of argument: a function. The last two lines could also have been written as a single line:
98+
99+
```js title=Console
100+
shoppingList.map((item) => `Remember the ${item}!`)
101+
```
88102

89-
Feel free to toy around a bit more in the JavaScript console. You can always reload the page to reset everything, meaning you'll lose all your variables.
103+
Feel free to toy around a bit more in the JavaScript console. You can always reload the page to reset everything, meaning you'll lose all your variables. This will allow you to declare them again with `const`.
90104

91105

92106
## The power of programming
93107

94-
The good news is that with JavaScript – like with any general-purpose programming language – you can create arbitrarily complex programs. That's also the bad news. Either way, this crash course should be enough for you to read and write some basic JavaScript.
108+
The good news is that with JavaScript – like with any general-purpose programming language – you can create arbitrarily complex programs. Since we're all human and usually make mistakes, that's also the bad news.
109+
110+
Either way, this crash course should be enough for you to read and write some basic JavaScript, and follow the rest of the guide.
111+
95112

96113
:::tip
97114
## Want to learn more JavaScript?

0 commit comments

Comments
 (0)