-JavaScript_Recipes/JavaScript Outlines/controlFlow.js at master · john-azzaro/-JavaScript_Recipes · GitHub

History

526 lines (442 loc) · 25.3 KB

Raw

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

"use strict";

// TOPIC /////////////////////////////////////////////////////////////////////////////////////////////////////

// Control Flow and Conditional Statements

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

// 1. What is Control Flow?

// 2. What is an if...else conditional statement?

// 3. What is a switch...case conditional statement?

// 4. What is a ternary operator?

// 5. What are loops and what kind of loops can we use?

// 6. What is a for-loop?

// 7. What is a while loop?

// 8. What is a do...while loop?

// 9. What is an infinite loop?

// 10. What is a for...in loop?

// 11. What is a for...of loop?

// 12. What are the uses of the keywords break and continue in loops?

// 13. What is try/catch/finally?

// NOTES ///////////////////////////////////////////////////////////////////////////////////////////////

// 1. Useful information about control flow and conditional statements from study, research, tutorials,

// mentor meetings, peer discussions, and good ole' fashioned curiosity. I've put the document in Question

// and Answer format for improved readability.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////

1. What is control flow?

////////////////////////

-- control flow allows your code to take certain actions based on certain scenarios.

-- control flow allows you to dictate how your code runs under different conditions or until a certain condition is met.

-- control flow can be achieved in 2 ways:

-- conditional (if, else-if, else).

-- try/catch/finally.

2. What is an if...else conditional statement?

//////////////////////////////////////////////

-- A conditional uses a command and executes whatever is in the curly braces if the expression evaluates true.

-- `if` always comes first in an if...else conditional statement.

-- `else if` is used if there is more than one condition in the if...else condtional statement.

-- `else` comes at the end if none of the previous blocks of code are executed.

-- Below is an example of a if..else conditional statement:

if (condition) { // if the FIRST condition evaluates true...

statement; //... return this statement.

} else if (anotherCondition) { // if the SECOND condition evaluates true...

statement; //... return this statement.

} else if (anotherCondition) { // if the THIRD condition evaluates true...

statement; //... return this statement.

} else { // if NONE of the conditions above evaluate true...

statement; //... return this statement.

}

-- In a functional example:

function guessPrimaryColor(str) {

let color = str;

if (color === 'red') {

console.log(`correct! One of the primary colors is red!`);

} else if (color === 'blue') {

console.log(`correct! One of the primary colors is blue!`);

} else if (color === 'green') {

console.log(`correct! One of the primary colors is green`);

} else {

console.log(`sorry, that's not a primary color. Try again!`)

}

guessPrimaryColor("red"); //-> correct! One of the primary colors is red!

guessPrimaryColor("blue"); //-> correct! One of the primary colors is blue!

guessPrimaryColor("green"); //-> correct! One of the primary colors is green

guessPrimaryColor("yellow"); //-> sorry, that's not a primary color. Try again!

-- in another example using more complex conditional logic:

function greeting(num) {

let hour = num; // we turn our input into a variable...

if (hour >= 6 && hour < 12) { // if the hour is less than or equal to 6 AND less than 12...

console.log(`Good morning!`); // return statement.

} else if (hour >= 12 && hour < 18) {

console.log(`Good afternoon!`);

} else if (hour >= 18 && hour < 24) {

console.log(`Good evening!`);

} else {

console.log(`Go to bed`);

}

greeting(6);

greeting(16);

greeting(22);

greeting(2);

3. What is a switch...case statement?

/////////////////////////////////////

-- A SWITCH statement os a conditional statement that tests whether something is true or false.

-- a switch statement contains a collection of case blocks.

-- when a switch statement runs, ONLY ONE will get hit and have thier code executed.

-- a switch statment works like this:

- a switch statement starts with the statement itself (i.e. switch ).

- the statement is followed by parentheses. HOWEVER, instead of a conditional statement (if..then) we add a VARIABLE.

- this variable will be compared to each case statement in the code block.

- inside the body of the switch statement, we have one or more CASE STATEMENTS.

- each case statement will be compared to the variable at the beginning of the case statement.

function role(str) {

let user = str; // the input is assigned to the `user` variable that we will use from now on.

switch (user) { // we start the switch statement with keyword and the variable to compare.

case "guest": // the first case we compare is `admin` to the value of `user`...

console.log(`Guest User`); // ... if `admin` equals the value of `user` execute this code ONLY...

break; // ... and if this case was TRUE, then we BREAK out of the switch statement.

case "moderator":

console.log(`Moderator!`);

break;

default:

console.log(`Unknown User!`);

}

console.log(role("guest"));

console.log(role("moderator"));

console.log(role("Tom"));

4. What is a ternary operator?

//////////////////////////////

-- A TERNARY OPERATOR is short-cut conditional statement.

-- A ternary operator is the only JavaScript operator that takes three operands.

-- In the example below, we want to determine whether a person can drink (or not).

-- Also note that although you dont need the parentheses fro the logical expression, it does help in visual identification.

let canIDrink -- is the keyword and variable name.

(age >= 21) -- This is the logical expression, specifically IF age is greater or equal to 21...

? -- If this condition is true...

'Yes, you can drink' -- Return this.

: -- If the condition is false...

'No, you cannot drink' -- The value returned if the condition is false.

let age = 21;

let canIDrink = (age >= 21) ? 'Yes, you can drink' : 'No, you cannot drink';

console.log(canIDrink); //-> Yes, you can drink

-- Additionally, a ternary operator is right-associative, so conditions can be chained together.

-- Note that the format can be a single line or multiple lines depending on your format preference.

let direction = 'right'

let myDirection = (direction == 'left') ? 'wrong direction' : (direction == 'right') ? 'right!' : 'where are you going?';

console.log(myDirection);

//or//

// let myNumber = 4;

// let result = (myNumber == 1) ? "a"

// : (myNumber == 2) ? "b"

// : (myNumber == 3) ? "c"

// : (myNumber == 4) ? "d"

// : "e";

// console.log(result));

5. What are loops and what kind of loops can we use?

////////////////////////////////////////////////////

- loops allow you to iterate (repeat) a set of instructions a set number of times OR until a specific condition is true.

- loops are a generic way for repeating code with control over how many times the code repeats.

- There are THREE kinds of loops you can create in JavaScript:

-- for loops

-- while loops

-- do...while loops

- each of these loops allow you to specify the code we want to repeat a number fo times and a way to stop

the repitition when a condition is met.

- there are also TWO kinds of loops we can use to iterate over the properties of an object or elements in an array.

-- for...in loops

-- for...of loops

6. What is a for-loop?

/////////////////////

-- A for loop repeats an action a number of times

-- A for loop allows you to repeat a set of instructions a set number of times UNTIL the expression you specify returns false.

-- A standard for loop code would look like this:

initialization condition final expression

\ | /

for ( let i = 1; i <= countTo; i++ ) {...}

block of code that runs through every iteration in the loop

-- from the example above, you have 3 statements:

1. initialization.

2. continued condition being true.

3. final expression

-- INITIALIZATION

-- initialization is where the initial expression where we start the loop.

-- so you declare your LOOP VARIABLE with `let` and name it i (short for index) and set it to what you need.

-- if you want to increment, you start at the lowest number (i.e. 1 or 0).

-- if you want to decrement, you start with the value or the variable count you have in a seperate variable.

-- in the example above, we have initialized the variable to 1.

-- at the end, use a semi-colon to terminate the statement.

-- CONDITIONAL

-- conditional compares i to something else.

-- the loop will run as long as this condition is TRUE.

-- for example:

-- i < 5 //-> 1,2,3,4 - as long as the loop is LESS than 5, the loop will execute.

-- i <= 5 //-> 1,2,3,4,5 - as long as the loop is less than or equal to 5, the loop will execute.

-- countTo = 4

i <= countTo //-> 1,2,3,4,5 - as long as the loop is less than or equal to countTo (4), the loop will execute.

-- Remember, terminate the statement with a semi-colon.

-- FINAL EXPRESSION

- (aka increment or decrement expression) adds (or subtracts) what you specify as the loop goes through.

///// STANDARD FOR LOOP UP (INCREMENTING) //////////////////////////////////////////////

function countUp() {

const countTo = 10;

for (let i = 0; i <= countTo; i++) {

console.log(i);

}

console.log("FOR loop -- incrementing UP")

console.log(countUp());

///// STANDARD FOR LOOP DOWN (DECREMENTING) ///////////////////////////////////////////

function countDown() {

const countFrom = 10;

for (let i = countFrom; i >= 0; i-- ) { // note that the decrement inverts the initialization and conditional.

console.log(i);

}

console.log("FOR loop -- decrementing DOWN")

console.log(countDown());

///// STANDARD INCREMENTING LOOP (LABEL EVEN OR ODD) ////////////////////////////////

function countUpEvensAndOdds() {

const theCount = 10;

for (let i = 1; i <= theCount; i++) {

if (i % 2 === 0) {

console.log(`the number ${i} is even`);

} else {

console.log(`the number ${i} is odd`);

}

console.log("FOR loop -- incrementing up counting evens and odds")

console.log(countUpEvensAndOdds());

///// STANDARD INCREMENTING LOOP (PRINT ONLY ODDS) ////////////////////////////////

function printOddsOnly() {

const pod = 10;

for (let i = 1; i <= pod; i++) {

if (i % 2 !== 0) {

console.log(`the number ${i} is odd`);

}

console.log("FOR loop -- incrementing up counting odds only")

console.log(printOddsOnly());

7. What is a while loop?

////////////////////////

-- while loops are used to run a block of code a set number of times as long as some logical condition is true.

-- the key difference between a for loop and a while loop is that for loops is that the loop variable (i.e. i = 0) is part of the loop itself.

-- in while loops, that variable has to be decalred EXTERNALLY.

function whileLoop() {

let i = 0; //-> the variable in the while loop is declared EXTERNALLY.

while (i <= 5) { //-> the condition goes in the parentheses...

console.log(i); //-> all statements go in the code block...

i++; //-> finally, at the end of the block we need to increment i.

}

console.log("this is a while loop:")

console.log(whileLoop()); //-> 0,1,2,3,4,5

8. What is a do...while loop?

//////////////////////////

-- do...while loops are similar to while loops but are slightly different.

-- a do...while loop variable must be declared externally like a while loop.

function doWhileLoop() {

let i = 0;

do {

console.log(i);

i++;

} while (i <= 5);

}

console.log(`this is a do..while loop:`)

console.log(doWhileLoop());

9. What is an infinite loop?

////////////////////////////

-- an infinite loop execture indefinitly.

-- an infinite loop is executed by simply forgetting to add the i++ incrementation.

function infiniteLoop() {

let i = 0;

while (i <= 5) {

console.log(i); // note the omission of the i++ at the end of the while code block. This will crash your editor.

}

10. What is a for...in loop?

///////////////////////////

-- a for...in iterates over the properties of an object.

-- a for...in loop can also be used to iterate over an array, but it is not an ideal way.

-- we start out with an object (person) with two properties (name and age).

var myObject = { "key1" : "value1",

"key2" : "value2",

"key3" : "value3" }

-- if we want to display all the properties of this object, we use the for..in loop.

-- a for...in loop we dont have the classic three part design (i.e. (initial expression; condition; increment) ).

-- instead we only have TWO parts:

properties (in) object

\ /

for (let key in person)

-- essentially, we are looping through the properties (i.e. key) in the object (person).

-- below, we loop through the properties of 'forInObject'

for (let key in myObject) {

console.log(key);

} //-> key1

// key2

// key3

-- to display the values of an object, we can use either:

-- dot notation (i.e. person.name)

/or/

-- bracket notation (person['name'])

-- remember that if you dont know ahead of time what property we want to access, use bracket notation with is calculated at runtime.

-- also remember to add quotes

for (let key in myObject) {

console.log(myObject[key]);

} //-> value1

// value2

// value3

-- and then if we want to print out the key AND value, all we need to do is specify that in the console.log.

for (let key in myObject) {

console.log(key, myObject[key]);

} //-> key1 value1

// key2 value2

// key3 value3

-- now suppose you wanted to use a for...in loop to iterate over an ARRAY.

-- to do this, instead of using 'key' you would use 'index':

-- HOWEVER, using a for...of loop is more ideal for iterating over arrays.

let colors = ['red', 'green', 'blue'];

for (let index in colors) {

console.log(index, colors[index]);

} //-> 0 red

// 1 green

// 2 blue

11. What is a for...of loop?

////////////////////////////

-- for...of loops are used to iterate over the items in an array

-- for...of loops are introduced in ecma6 and function just like the for...in loop.

-- with the for...of loop, we dont have to deal with the index (from the example above) or access the element at the given index.

-- in the example below, color (our loop variable) will hold one of the items in the array.

for (let color of colors) {

console.log(color);

} //-> red

// green

// blue

12. What are the uses of the keywords break and continue in loops?

//////////////////////////////////////////////////////////////////

-- the keywords break and continue can change how the loop behaves.

-- for example, suppose we want to jump out of a loop when a condition is true (i.e. i === 5).

-- in this case, we would use a `break`

function breakOut() {

let i = 0; // the initial value of i is equal to 0.

while (i <= 10) { // the loop runs as long as i is less than or equal to 10...

if (i === 5) { // HOWEVER, if i = 5...

break; // BREAK out of the loop.

}

console.log(i); // print i and increment as long as i <= 10 AND as long as i is NOT equal to 10.

i++;

}

console.log(`below is an example of break`);

console.log(breakOut()); //-> 0

// 1

// 2

// 3

// 4

- with the keyword `continue`m we can jump back to the beginning of the loop when a certain condition is true.

- below, when we are going through the while loop.

- IF the number is an odd number (i.e. 2,4,6,8) with the code i % 2 === 0, the loop will increment.

- HOWEVER! When we insert `continue` as the last bit of our code, we jump back to the beginning of the while loop.

- by doing this, we DO NOT print the odd numbers... only the even ones.

- so after the 2 is skipped, the next step of the iteration occurs (i.e. 3) and the if statement does not execute because 3 is not odd.

function continueOn() {

let i = 0; // the initial value of i is equal to 0.

while (i <= 10) { // the loop runs as long as i is less than or equal to 10...

if (i % 2 === 0) { // when it shows an odd numnber (i.e. 2,4,6,8)

i++;

continue;

}

console.log(i); // print i and increment as long as i <= 10 AND as long as i is NOT equal to 10.

i++;

}

console.log(`below is an example of continue`);

console.log(continueOn()); //-> 1

// 3

// 5

// 7

// 9

13. What is try/catch/finally?

//////////////////////////////

-- the try/catch/finally statement is JavaScripts exception handling mechanism.

-- try/catch/finally is used to catch errors in our programs.

-- the 'try' clause defines the block of code whose exceptions are to be handled.

-- simply put, 'try' is the block of behavior to be tested.

-- the 'catch' clause is a block of statements invoked when the exception has occured anywhere in the 'try' block.

-- simply put, the 'catch' is the block that runs if the 'try' block fails.

-- 'catch' is also always folloed by an identifier in parentheses (i.e. e).

-- it is like a function parameter when the exception is caught the value associated with it it is assigned to the

parameter.

-- the 'finally' block contains cleanup code that is guarenteed to be executed regardless of what happens in the 'try' block.

-- this is optional... the block will run whether the block runs or not.

function fail() {

try { // try anything in this block...

console.log('this works');

} catch (error) { // if there are any errors, handle them in 'catch'...

console.log('theres a mistake')

}

console.log(fail()); // if you try this, the code works and catch block was never called.

-- But what if we alter the code in the try block so that it DOES NOT work.

function fail2() {

try { // try anything in this block...

consol.log('this works'); // console.log is misspelled...

} catch (error) { // catch runs...

console.log('theres a mistake') // prints 'there is a mistake'...

console.dir(error); // when you call console.dir with the error object, this prints the stack trace.

}

console.log(fail2());

Resources

//////////

-- JavaScript - the Definitve guide.

-JavaScript_Recipes/JavaScript Outlines/controlFlow.js at master · john-azzaro/-JavaScript_Recipes · GitHub

Expand file tree

Breadcrumbs

controlFlow.js

Latest commit

History

Breadcrumbs

controlFlow.js

File metadata and controls