DEV Community

Cover image for Watch and Code: Javascript
Helen Kent
Helen Kent

Posted on

Watch and Code: Javascript

Notes from the Practical JavaScript course.

I've started Gordon Zhu's Practical Javascript course. In the course you work on building a todo list, so here are some of the commands and notes about them so I remember them!

Its best to work in chrome. Open a new tab (about:blank) and right click and choose inspect then click on console.

How to store the to do list:

var todos = ['item 1', 'item 2', 'item 3']
Enter fullscreen mode Exit fullscreen mode
  • todos is the name of my variable.
  • The items are in an array. Which is like a list of items.

How to display the to do list:

console.log('My to do list:', todos)
Enter fullscreen mode Exit fullscreen mode
  • Console.log() prints whatever is in the brackets.
  • You can join items between the brackets.
  • If you put quotation marks it prints whatever is inside them.
  • As todos isn't in quotation marks it prints out the contents of the variable.

Adding new todos:

todos.push('item 4')
Enter fullscreen mode Exit fullscreen mode
  • You can add items to the array by calling the variable and 'pushing' another item to the end of the array.
  • When you press enter, the console returns the number of items in the array.

Changing an item in an array:

todos[0] = 'item 1 updated'
Enter fullscreen mode Exit fullscreen mode
  • To edit the array item you call the variable and in square brackets put the item number you want.
  • Computers start counting at zero so item number one is item 0.
  • Then you just put what you want the new value to be after an equals sign in quotation marks.

Deleting an item in the array:

todos.splice(0, 1)
Enter fullscreen mode Exit fullscreen mode
  • Call the array and then use splice
  • To use this you need brackets.
  • The first number is the position at which you start deleting, the second number is how many items you delete.
  • In this example, you just delete the first item in the array.

Top comments (2)

sophiabrandt profile image
Sophia Brandt

Great example of how to engage with the learning material.
Good luck on your coding journey.

helen8297 profile image
Helen Kent

Thank you!