info@stackfactor.ai
StackfactorStackfactor
info@stackfactor.ai
← Back to Skills Library

Vanilla JS

Information Technology > Web platform development

Description

Vanilla JS refers to plain, pure JavaScript without the use of any additional libraries or frameworks. It involves understanding and using core JavaScript features such as variables, data types, control structures, functions, and interacting with the Document Object Model (DOM). As one advances, it includes more complex concepts like object-oriented programming, closures, scopes, asynchronous programming, and ES6 features. Expertise in Vanilla JS also requires a deep understanding of JavaScript's internals, ability to write high-performance code, use advanced design patterns, debugging techniques, web APIs, and writing unit tests. Mastering Vanilla JS provides a solid foundation for learning JavaScript-based libraries and frameworks.

Expected Behaviors

✎
LEVEL 1

Fundamental Awareness

At this level, individuals are expected to understand the basic syntax of JavaScript and its primitive data types. They should be able to declare variables, perform basic arithmetic operations, use simple control structures like 'if', 'for', and 'while', define functions, and have a basic understanding of the Document Object Model (DOM).

🌱
LEVEL 2

Novice

Novices should be able to manipulate DOM elements, handle events, use more complex control structures like 'switch' and 'do-while', work with arrays and objects, and use basic error handling techniques such as 'try-catch'. They should also understand how to create and use objects.

🌍
LEVEL 3

Intermediate

Intermediate users should understand object-oriented programming in JavaScript, use advanced array methods like 'map', 'reduce', and 'filter', understand closures and scopes, work with JSON data, and understand asynchronous programming including callbacks and promises. They should also be able to use regular expressions.

⭐
LEVEL 4

Advanced

Advanced users should understand ES6 features like 'let/const', arrow functions, and destructuring. They should be able to use advanced object-oriented programming techniques like prototypes and inheritance, understand and use modules, use advanced error handling techniques, understand functional programming concepts, and use advanced asynchronous programming techniques like 'async/await'.

🏆
LEVEL 5

Expert

Experts should have a deep understanding of JavaScript's internals like the event loop, hoisting, and execution context. They should be able to write high-performance JavaScript code, understand advanced design patterns, use advanced debugging techniques, understand web APIs like Fetch, Web Storage, and Geolocation, and write unit tests for JavaScript code.

Micro Skills

✎
LEVEL 1

Fundamental Awareness

Knowledge of JavaScript keywords
Understanding of statement structure
Ability to use comments
Understanding of operators and their precedence
Knowledge of data type conversions
Understanding of number data type
Understanding of string data type
Understanding of boolean data type
Understanding of null and undefined data types
Understanding of variable declaration
Knowledge of variable naming conventions
Understanding of variable scope
Ability to perform addition, subtraction, multiplication, and division
Understanding of modulus operator
Ability to increment and decrement variables
Understanding of if statements
Understanding of for loops
Understanding of while loops
Ability to use break and continue statements
Understanding of function declaration
Understanding of function expressions
Knowledge of parameters and arguments
Understanding of return statement
Understanding of what the DOM is
Knowledge of basic DOM methods (getElementById, querySelector)
Understanding of DOM tree structure
🌱
LEVEL 2

Novice

Understanding of the different DOM manipulation methods
Ability to select DOM elements
Ability to modify DOM elements
Ability to create and delete DOM elements
Understanding of DOM traversal
Knowledge of different types of events
Ability to attach event handlers to elements
Understanding of event propagation (bubbling and capturing)
Ability to use the Event object
Understanding of switch syntax and usage
Understanding of do-while syntax and usage
Ability to nest control structures
Understanding of break and continue statements
Understanding of array declaration and initialization
Ability to add, remove, and access elements in an array
Ability to loop through an array
Understanding of object declaration and initialization
Ability to add, remove, and access properties in an object
Understanding of 'this' keyword in the context of an object
Understanding of object methods
Understanding of try-catch syntax and usage
Ability to catch and handle errors
Understanding of the Error object
Ability to throw custom errors
🌍
LEVEL 3

Intermediate

Understanding of function constructors
Ability to create objects using function constructors
Understanding of the 'new' keyword
Understanding of how 'this' works in global scope
Understanding of how 'this' works inside a function
Understanding of how 'this' works inside an object method
Understanding of how 'this' works in event handlers
Understanding of method syntax
Ability to define methods inside an object
Understanding of method invocation
Understanding of data hiding
Understanding of interface separation
Understanding of functions as first-class objects
Ability to pass functions as arguments
Ability to return functions from other functions
Understanding of map method syntax
Ability to use map method to transform arrays
Understanding of reduce method syntax
Ability to use reduce method to transform arrays
Understanding of filter method syntax
Ability to use filter method to filter arrays
Understanding of block scope
Understanding of function scope
Understanding of closure definition
Ability to create closures
Understanding of closure applications
Understanding of lexical scoping
Understanding of environment records
Understanding of JSON data structure
Understanding of JSON value types
Understanding of JSON.parse method
Ability to use JSON.parse to convert JSON to JavaScript objects
Understanding of JSON.stringify method
Ability to use JSON.stringify to convert JavaScript objects to JSON
Understanding of callback function definition
Ability to pass functions as callbacks
Understanding of synchronous and asynchronous callbacks
Understanding of error-first callbacks
Ability to handle errors in callback functions
Understanding of promise states
Understanding of promise constructor
Understanding of then and catch methods
Ability to create new promises
Ability to use then and catch methods to handle promise results and errors
Understanding of how promise chaining works
Ability to chain promises
Understanding of regular expression literals
Understanding of regular expression flags
Understanding of regular expression special characters
Ability to create regular expressions
Ability to use regular expressions to match patterns in strings
Understanding of test method
Understanding of match method
Understanding of replace method
⭐
LEVEL 4

Advanced

Understanding of block scope with let and const
Ability to write arrow functions
Understanding of lexical 'this' in arrow functions
Ability to use destructuring assignment with arrays and objects
Ability to create objects using constructor functions
Ability to implement inheritance using prototypes
Understanding of ES6 classes and ability to use them
Ability to export and import modules using CommonJS
Ability to export and import modules using ES6 syntax
Understanding of default and named exports
Understanding of try-catch-finally blocks
Ability to handle asynchronous errors
Ability to use higher-order functions
Understanding of immutability and ability to write immutable code
Ability to use functional programming methods like map, filter, reduce
Ability to create and use Promises
Understanding of async functions
Ability to use the await keyword
Understanding of error handling with async/await
🏆
LEVEL 5

Expert

Knowledge of the call stack and callback queue
Understanding of the role of Web APIs
Knowledge of variable and function hoisting
Understanding of the global execution context
Understanding of the function execution context
Understanding of how to optimize loops
Understanding of how to optimize DOM manipulation
Knowledge of garbage collection
Understanding of memory leaks
Understanding of how to use the Performance tab in Chrome DevTools
Understanding of how to use the Memory tab in Chrome DevTools

Skill Overview

  • Expert3 years experience
  • Micro-skills134
  • Roles requiring skill0

Sign up to prepare yourself or your team for a role that requires Vanilla JS.

LoginSign Up