Original subtitles

1 1

Welcome back. 2

2

Let's now start to really learn the JavaScript language 3

3

starting with values and variables. 4

4

And let's start 5

5

by getting rid of some of the code that we have here. 6

6

So this one here, isn't doing anything. 7

7

And let's also delete this one 8

8

so that we don't get that annoying popup all the time. 9

9

So in this section, I will be using persons as examples 10

10

for example, a person's name, a person's age or a job. 11

11

All right? 12

12

But anyway, let's talk about values now. 13

13

So a value is basically a piece of data. 14

14

So it's the most fundamental unit 15

15

of information that we have in programming. 16

16

For example, this text, Jonas, is a value. 17

17

All right? 18

18

So this here is a value. 19

19

And again, if we want to actually see this in the console 20

20

let's say console.log and then open up the parenthesis 21

21

and then close them here and then the semicolons. 22

22

So if I save and reload, then of course we get Jonas. 23

23

Okay? 24

24

And so Jonas here is the value 25

25

or we can, of course, have different values 26

26

for example, here 23 as the value, 27

27

right? 28

28

And so now we see 23 in the console. 29

29

And the same is true, here. 30

30

So in this line of code where the values are actually 40 31

31

and eight and 23 and 10. 32

32

So all these four are different values. 33

33

And then these mathematical operators here 34

34

joined them together to form just one value. 35

35

And that value is then 61. 36

36

Okay? 37

37

And so a value is basically the smallest unit 38

38

of information that we have in JavaScript. 39

39

Now, one extremely useful thing that we can do with values 40

40

is to store them into variables. 41

41

And so this way we can reuse them over and over again, 42

42

for example we can say, let, 43

43

and then the name of the variable 44

44

and then assign a value like Jonas to this variable. 45

45

Okay? 46

46

And so what we did here is called declaring a variable. 47

47

Okay? 48

48

And so this will actually create a real variable 49

49

in your computer's memory 50

50

and we'll store this value inside of that variable. 51

51

And actually that is exactly what we did up here, 52

52

right in the beginning. 53

53

So here we declared a variable called JS 54

54

and assigned the value of amazing to that variable. 55

55

Right? 56

56

And so now it hopefully makes sense to you 57

57

what we did back then. 58

58

So I like to imagine a variable, like being a box. 59

59

So in the real world, a box can hold some object 60

60

for example, a book, 61

61

and we can then write a label on the box 62

62

to describe what's in it. 63

63

And then we can find the object later when we need it 64

64

by using that label. 65

65

And variables actually work in the exact same way. 66

66

So here, basically we have a box called firstName 67

67

and into that box, we put the value of Jonas. 68

68

And now if we want to use this value 69

69

all we have to do is to basically use this label 70

70

or in other words, this variable name. 71

71

So first name in this case. 72

72

And so let's use it actually. 73

73

And for that, once again, I will use console.log 74

74

and you will see me using console.log 75

75

throughout this entire course, actually. 76

76

So whenever we need to output something from our code 77

77

to the browser, we always use console.log like this. 78

78

And so here now, instead of passing a literal value 79

79

like we did here and here and here, 80

80

now we can pass in, 81

81

So we can write here, the variable name, 82

82

so first name. 83

83

Okay? 84

84

And if I save and reload, it let's see what happens. 85

85

Indeed, we get Jonas. 86

86

So from line number eight. 87

87

And so that's right here. 88

88

And that means that indeed 89

89

or variable declaration up here worked. 90

90

And if we now change this 91

91

to Bob, let's say, then here we should get Bob. 92

92

Right? 93

93

And indeed, now it's Bob. 94

94

Let's put it back. 95

95

And of course we can now use this variable name many times. 96

96

So let's just copy and paste this here a couple of times 97

97

and give it a save. 98

98

And so now we have it three times 99

99

and that means that whenever JavaScript sees 100

100

this variable name here it will basically replace it 101

101

with the original value that we assigned to the variable. 102

102

So again, that's Jonas and this is extremely useful 103

103

because now if I want to change the first name 104

104

to something else, I only have to do it in one place. 105

105

So just here. 106

106

So let's change it here to Matilda 107

107

and if I save it now and reload, 108

108

of course it will change in all the three places. 109

109

So this is one of the big advantages of variables. 110

110

Without variables, I would now have to manually change 111

111

the value everywhere to Matilda. 112

112

But like this everywhere where I reference this variable 113

113

it will automatically changed to Matilda. 114

114

So that's one of the most important things 115

115

to keep in mind about variables. 116

116

Great. 117

117

And now that we know what a variable is 118

118

let's just very quickly talk about conventions 119

119

and rules for naming variables 120

120

because we shouldn't just give random names to variables. 121

121

So first, the way that I named this 122

122

variable here is called camelCase, 123

123

camelCase means that whenever I have multiple words 124

124

in a variable name, I write the first word with a lowercase 125

125

and then all the next words with upper case, like this. 126

126

So if it was just first, we would write it like this. 127

127

But if we had more than one word, like first name person 128

128

then you'll see that all the subsequent words 129

129

are written with this uppercase letter. 130

130

And this is kind of a standard in the JavaScript world. 131

131

But of course, there are other ways of naming variables. 132

132

For example, we could write 133

133

first_name 134

134

with an underscore like this, 135

135

and this is very popular in other languages 136

136

like Ruby or like this. 137

137

Okay? 138

138

And you can use whatever you like most 139

139

just keep in mind that it's kind of a standard 140

140

in JavaScript to write variable names like this. 141

141

So usually whenever you see other people's code 142

142

the variables will usually be written 143

143

using a the camelCase notation. 144

144

So that's kind of a convention of 145

145

how to name variables in JavaScript 146

146

but there are also some actual hard rules in JavaScript 147

147

about how we can name variables. 148

148

For example we cannot write something like this 149

149

like three years and set it to the value of three. 150

150

So this is an illegal variable name 151

151

and VS code actually warns us right away here. 152

152

And again that's because this variable name 153

153

starts with a number. 154

154

And if we try it to load this 155

155

in JavaScript, we would get this error. 156

156

So that's an invalid or unexpected token here. 157

157

And it's important to actually start reading 158

158

these error messages right from the beginning of the course. 159

159

So we see that this is a so-called syntax error 160

160

which means that we did a mistake in writing or a code. 161

161

So that's a mistake in the code's syntax 162

162

and we can also see the line where the error occurred. 163

163

So line 13 so that we can then go ahead and fix it 164

164

and notice how this error was shown in the console. 165

165

Even though we didn't use console.log in this case. 166

166

Okay? 167

167

So we don't need to use console.log 168

168

for the console to show errors. 169

169

All the errors that we make 170

170

will always end up in the console. 171

171

And also here with this, well, error icon. 172

172

Now anyway, back to our naming conventions here. 173

173

So we already learned 174

174

that variable names cannot start with a number. 175

175

And in fact, variable names can only contain numbers 176

176

letters, underscores, or the dollar assign. 177

177

So for example, if we try to write 178

178

Jonas and Matilda 179

179

equals JM 180

180

we would, once again, 181

181

get a syntax error. 182

182

Right? 183

183

And this time it's telling us unexpected token, &. 184

184

And, and again that's because this symbol here 185

185

is illegal in variable names. 186

186

They can only contain numbers, 187

187

letters, underscores, or the dollar sign. 188

188

So this here, for example, would be allowed. 189

189

So if we reload now, we get no more errors here. 190

190

Another error might occur when we try to name a variable 191

191

using a reserved JavaScript keyboard. 192

192

For example, if we did this, so new, 193

193

for example set it to 27, 194

194

then this would also not be allowed. 195

195

So you see unexpected token new. 196

196

And that's because new is a reserved keyword in JavaScript 197

197

as we will see a little bit later. 198

198

And the same goes for something like function. 199

199

So again unexpected token here, 200

200

if we wanted to fix that we could, 201

201

for example, start this variable name with an underscore 202

202

or with the dollar sign. 203

203

So that's the only two symbols that are allowed 204

204

besides letters and numbers. 205

205

Another variable name that's kind of reserved 206

206

but still actually allowed to use is the word name. 207

207

So we could do this. 208

208

And it would actually work. 209

209

But in some cases, this creates some problems. 210

210

Because again, this is kind of a reserved keyword 211

211

but it's still legal to use. 212

212

But since it is a keyword, 213

213

never call your variables just name. 214

214

Okay? 215

215

That's why I always call them first name, like this. 216

216

Let's actually get rid 217

217

of this one because we already have first name up there. 218

218

Now another convention is 219

219

that we should not start a variable name 220

220

with an uppercase letter, so we should not 221

221

do 222

222

this. 223

223

So that person, Jonas. 224

224

Now again, it's a convention, so that's not illegal. 225

225

It's just that we use this kind of variable names 226

226

with an uppercase letter for a specific use case 227

227

in JavaScript, which is object-oriented programming 228

228

as we will see later in the course. 229

229

So for now never do this, but instead you should write it 230

230

like this, with a lower case letter starting. 231

231

On the same note variables that are all in uppercase 232

232

are reserved for constants that we know will never change. 233

233

For example, the number PI 234

234

which is like 3.1415, and so on and so forth. 235

235

So we know that this number is never gonna change. 236

236

And so that's a constant. 237

237

And for that, we have a convention of writing it 238

238

in all upper case. 239

239

and VS code actually marks this variable name 240

240

with a different color 241

241

because it knows about this convention that we use. 242

242

Of course you could also write it like this, 243

243

but then this would be kind of weird actually. 244

244

So if it's a real constant, write it in uppercase 245

245

like this, so that's a pretty normal convention there 246

246

in programming as a whole. 247

247

Finally, to finish this lecture 248

248

let's talk about one final convention, 249

249

which is to make sure 250

250

that our variable names are descriptive 251

251

and that's very important to write cleaner code. 252

252

So when you name your variables 253

253

it should be really easy to understand 254

254

exactly what value the variable is holding 255

255

just by reading the name of the variable. 256

256

And that's kind of what we did up here 257

257

by calling this one first name. 258

258

But let me show you another example. 259

259

For example, let's say my first job, 260

260

programmer 261

261

and then my current job, 262

262

teacher. 263

263

So this is much, much better than writing this. 264

264

So job one programmer 265

265

and job two a teacher. 266

266

So which set of variables 267

267

do you think is more descriptive? 268

268

Is it these ones or these ones? 269

269

And it hope that you agree with me 270

270

that it's much easier to understand 271

271

what programmer and teacher are in this case here 272

272

by simply looking at the variable name. 273

273

So we know that my first job was a programmer 274

274

and that my current job is teacher. 275

275

While down here, well, we would simply know 276

276

that these are two different jobs. 277

277

We don't know anything about them. 278

278

And so this approach up here is a lot better. 279

279

So keep that in mind, 280

280

whenever you write your own variable names 281

281

and actually keep all of this in mind, 282

282

that we just talked about, 283

283

for naming your variables. 284

284

Okay? 285

285

So just to quickly recap what a variable actually is, 286

286

it is basically a box into which we can store a value. 287

287

So we give that box a name 288

288

which in this case here is first name 289

289

or in this case here, it's my first job, for example. 290

290

And then into that box, with that label, 291

291

we can store a value 292

292

which in this case is this programmer string here. 293

293

Then later into code, 294

294

we can reference that variable over and over again, 295

295

for example, like this, 296

296

my first job. 297

297

And if I save this, then of course here we see programmer. 298

298

Once again you probably saw 299

299

my code changing here automatically 300

300

from the single quotes, two double quotes 301

301

but that is just my automatic formatting doing its work. 302

302

And now if we want it to change this here, let's say coder. 303

303

Then it would change across the entire program. 304

304

And now we get coder here. 305

305

And that's what variables are all about. 306

306

They're one of the most important things of programming. 307

307

And so make sure to really understand them 308

308

before you move on.