Getting started with JavaScript can be both fun and overwhelming at the same time. Fun because it is not just one of the most popular programming languages in existence but also because the basics are quite easy to get started with as a beginner.
It can also be overwhelming because there is just a lot to learn. In one of my past articles , I outlined the steps anyone can take to get started with web development.
In this post, I am going to highlight the various concepts and topics you will need to learn to become good at writing JavaScript programs.
Enjoy.
VARIABLES
All programming languages work with data. Variables are containers for these data. A variable can hold a string data, a number or any of the various other data types. These keywords used to define these variables in JavaScript are let
, const
and var
.
Learn:
let
const
var
ASYNCHRONICITY
Normally, computer code runs immediately, one after the other. However, Asychronicity is a code execution situation in which a piece of code or function is paused midway for something else to occur first. At that point, the next instruction starts to run instead. This technique is implemented in JavaScript by using any of the following constructs in your code:
Learn:
- Callbacks
- Async functions
- await directive
- Promises
- Generators
SCOPES
Scopes simply entails the rules and laws with determines the accessibility of variables to a function, or part of a code.
Learn:
- Global scope
- Function scope
- Lexical scope
DOCUMENT OBJECT MODEL
Document Object Model is the browsers representation of a web page. DOM is an interface provided by the browser which allows you access and manipulate your HTML elements from your JavaScript.
Learn:
-
document
object - DOM tree
-
document
(DOM) properties -
document
(DOM) methods - DOM traversal
- Virtual DOM (VDOM)
OOP
Object Oriented Programming (OOP) is a software programming architecture modeled after real life objects with properties and methods (behaviors or actions). Objects
are constructed out of a class
design.
Learn:
- Classes
- Objects
- Inheritance
- Polymorphism
- Prototypes
ARRAYS
Arrays are simple data collections. Items stored in an array are indexed. Hence, an array can remember what position an item is positioned at when iterating through it with a loop.
Learn:
- Array methods
- Array properties
- Array Destructuring
- Array index looping
- Array Iterators (static methods)
DATA OPERATORS
Data operators allow you operation on data. You can do operations like addition, substaction, string concatenation, type checking and so on.
Learn:
- Addition and Substraction
- Multiplication
- Assignment
- Strict equals and Loose equals
- Concatenation
- Increment and Decrement
-
typeof()
, type checking - Less than,
- Greater than
- logical operators (
&&
and||
)
OBJECTS
Objects are data collections which stores data or properties in key/value pairs. Objects in JavaScript can be created either via the new
constructor call or with object literal method.
Learn:
- Properties
- Methods
- getters and setters
- static properties and methods
- Object looping
- Object destructuring
- JSON
ERRORS
Errors are statements which stops or inhibits the program from running properly. There are three main types of errors that can occur while compiling a JavaScript program, they include syntax errors, runtime errors, and logical errors.
Learn:
- try
- catch
- throw
- finally
-
console
object - console properties and methods
- RangeError.
- ReferenceError
- SyntaxError
- TypeError
- URIError
- EvalError
- InternalError
EVENTS
Events occurs when a user does something o There are many kinds of events capable of occurring in the browser. Some of them are click, mouseover, scroll, right-click and more.
Learn:
- User (DOM) events
- Event listener methods
- Event capturing and bubbling
-
event
object and properties
CONDITIONALS
When writing your JavaScript program, you will definitely need to create conditional statements. These are just if and elses. For a simple if…else
statement, when a condition is true, the code in the if block runs. Otherwise, the code in the else
block runs.
Learn:
if
if…else
if…else if…else
- ternary operators
MODULES
A module is a function or group of similar functions. They are grouped together within a file and contain the code to execute a specific task when called into a larger application.
Learn
import
export
-
default
keyword - file organization
LOOPS
Loops are programming constructs which allow you loop or iterate through an iterable data collection such as an array. You can then specify a consistent action which would be performed on each iteration until maybe a condition is met.
Learn:
while
do while
for index
for..in
for…of
-
switch
MAP and SET Collections
Map and Set are new data collections part of the ES6 Spec. Map is similar to JavaScript objects in that it accepts key/value properties. However, Map allows for keys of different data types and not just strings. Set only accepts one instance of a value, and ignores duplicates.
Learn:
add()
delete()
clear()
get()
STRINGS
Strings are inbuilt data types in JavaScript whose values starts with the comma notation ‘’
or double commas “ “
.
Learn:
- String properties
- String methods
- Template literals
FUNCTIONS
A Function in JavaScript is an object containing blocks of code and which can be called at any part of a program to perform a particular task.
For example, a SayHi()
functions is expected to display ‘Hi” when invoked. A getUsername()
function is expected to retrieve a username from the DOM or a database. The in-built setTimeout()
function actually sets a timeout before doing something else.
Learn:
- Normal functions
- Async functions
- Arrow functions
- Callback functions
- Generator functions
At a basic level, understanding these JavaScript concepts will help significantly improve your coding skills.
Recently, I created an eBook in why I explained most of these JavaScript concepts with short notes and visual illustrations. Check it out here
Here are some other JavaScript articles you might like:
- Understanding the JavaScript 'this' keyword with four binding rules
- 20 Free eBooks to learn JavaScript in-depth
- How to use ES6 Array iterator methods
- Introduction To Asynchronous JavaScript
Thank you for reading. Follow this blog to stay updated with my latest posts.
Top comments (3)
@lukeshiru ,
Well done. Saved me the time of writing the same comment/review.
@ubahthebuilder (Kingsley), this is a nice gesture to help new people. The feedback is meant to help you improve and not take anything away from your efforts.
Thanks, Rick!
Highly appreciate it.
Thanks for the article