javascript problem solving github

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

problem-solving

Here are 494 public repositories matching this topic..., wingkwong / leetcode-the-hard-way.

LeetCode The Hard Way - From Absolute Beginner to Quitter. Join Discord: https://discord.com/invite/Nqm4jJcyBf

• Updated Mar 30, 2024

ignacio-chiazzo / Algorithms-Leetcode-Javascript

Algorithms resolution in Javascript. Leetcode - Geeksforgeeks - Careercup

• Updated Mar 29, 2024

jeantimex / javascript-problems-and-solutions

🔱 A collection of JavaScript problems and solutions for studying algorithms.

• Updated May 9, 2023

mikinty / Trading-Interview-Questions

Guide on how to prepare for quant trading roles out of college

• Updated Mar 28, 2024

prabaprakash / Hackerrank-JavaScript-Solutions

Solved entire Easy, few Medium Problems. A total of 171/563 challenges solved by JavaScript

• Updated Aug 4, 2020

joonas-yoon / boj-extended

백준 온라인 저지(BOJ)를 확장된 기능과 함께 사용해보세요. 기능 요청과 버그 제보는 언제나 환영합니다.

• Updated Aug 12, 2023

albinotonnina / javascript-data-structures-and-algorithms

Exercises, algorithms

• Updated Jan 6, 2023

dipu-bd / UVA-Arena

UVA Arena is a utility application to make problem solving easier for the programmers.

• Updated Sep 15, 2021

rosemwangie / ace-technical-interview

This repo helps you to understand the fundamentals of Data Structures and Algorithms. Implementations are done in JavaScript and Python. Also selected Leetcode coding question solutions are available.

• Updated Mar 12, 2024

devvsakib / javascript-problem-solving

JavaScript Problem Solving is an open-source project. This project focused to JavaScript beginner level problem, task, solution.

• Updated Feb 11, 2024

Annahcj / javascript-algorithms-and-data-structures

Improve the performance of front-end and back-end applications through optimised JS code. Each solution is for the corresponding LeetCode question and contains a detailed explanation, time and space complexity, and test cases.

• Updated Apr 1, 2024

abhiiishek07 / 180DSA

180dsa is a web app tracker based on sde sheet by Striver.

• Updated May 10, 2023

adzo261 / codeforces-timer

A Google Chrome extension which adds a timer to practice timed problem solving on codeforces

• Updated Apr 24, 2021

theIYD / functions.js

📦 A hub of numerous functions with various functionalities

• Updated Oct 1, 2018

hridoy43 / 50-days-of-js

solution list of codedamn 50-days-of-js challenge.

• Updated Dec 30, 2021

embernet / sidekick

Sidekick is an AI powered tool that uses the OpenAI API and GPT-4 model for thinking, exploring ideas, problem-solving, knowledge-building, and getting things done.

• Updated Mar 22, 2024

yeonjuan / hackerrank-js

Hackerrank problem solving with javascript

• Updated Nov 18, 2019

Youjingyu / Code-Collection

个人博客、解决方案、遇到的问题记录、代码片段、笔记

• Updated Dec 3, 2022

swarup260 / Learning_Algorithms

Data Structures And Algorithms

• Updated Feb 9, 2022

Xvezda / node-kuroko

✔️ Simple local offline judgement tool for competitive programming

• Updated Nov 30, 2021

Improve this page

Add a description, image, and links to the problem-solving topic page so that developers can more easily learn about it.

Curate this topic

Add this topic to your repo

To associate your repository with the problem-solving topic, visit your repo's landing page and select "manage topics."

Solve programming problems in Javascript or TypeScript! This site will only store your progress within your current web browser. To keep your solutions permanently, be sure to save your solution as a file.

Free Javascript challenges

Learn Javascript online by solving coding exercises.

Javascript for all levels

Solve Javascript tasks from beginner to advanced levels.

Accross various subjects

Select your topic of interest and start practicing.

Start your learning path here

Why jschallenger, a hands-on javascript experience.

JSchallenger provides a variety of JavaScript exercises, including coding tasks, coding challenges, lessons, and quizzes.

Structured learning path

JSchallenger provides a structured learning path that gradually increases in complexity. Build your skills and knowledge at your own pace.

Build a learning streak

JSchallenger saves your learning progress. This feature helps to stay motivated and makes it easy for you to pick up where you left off.

Type and execute code yourself

Type real JavaScript and see the output of your code. JSchallenger provides syntax highlighting for easy understanding.

Join 1.000s of users around the world

Most popular challenges, most failed challenges, what users say about jschallenger.

Mohamed Ibrahim

Tobin Shields

javascript-problem-solving

There are many ways to solve a problem. This repository is a collection of different ways to solve a problem. The solutions are written in JavaScript. The solutions are not necessarily the best solutions, but they are solutions.

How to use this repository

Each problem is in its own folder. Each folder contains a README.md file that describes the problem. The README.md file also contains a link to the solution. The solution is in the solution.js file.

Level Indicators

The level indicators are used to indicate the difficulty of the problem. The indicators are:

• L-B - Level Beginner
• L-I - Level Intermediate
• L-A - Level Advanced

How to contribute

If you have a solution to a problem, please submit a pull request. If you have a problem that you would like to see solved, please submit an issue. We will be glad if you add your problem and solution to this repository. Get started by forking this repository.

• Fork this repository
• Clone your forked repository
• Create a new branch
• Add your problem and solution
• Commit and push your changes
• Create a pull request

How to add a problem

• Create a new folder with the problem name. ex: 0001 FizzBuzz ( L-B )
• Create a README.md file in the folder.
• Add the problem description in the README.md file.
• Add the problem added by section in the README.md file.
• Add the Reference link in the README.md file.
• Create a solution file named YourProblemName.js in the folder. ex: FizzBuzz.js

Follow this file for reference.

How to run the solutions

Each solution is written in JavaScript. You can run the solutions in your browser’s console or in Node.js or any IDE like VSCODE .

Problems Collection

You will find all the common/beginner level problems in this repository.

DEV Community

Posted on Jul 27, 2020 • Updated on Mar 5, 2021

My favourite Javascript learning resources on Github 🌟

I started to learn Javascript about a year ago, there are so many online tutorials, blogs, courses and even the GitHub, it's not only the place I push my codes, but also a place to learn! And I realised that the most important thing to learn any languages is to understand the core concepts of it and get your hands dirty.

These are the curated resources on GitHub that I have used myself or at least gone through, so I can definitely recommend them. Let's dive into the core pillars of the JavaScript language.

JavaScript Algorithms and Data Structures

• 📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings

JavaScript Questions

• A long list of (advanced) JavaScript questions, and their explanations ✨

clean-code-javascript

• 🛁 Clean Code concepts adapted for JavaScript

What the f*ck JavaScript?

• A list of funny and tricky JavaScript examples

33-js-concepts

• 📜 33 concepts every JavaScript developer should know.

Awesome JavaScript Learning

• A tiny list limited to the best JavaScript Learning Resources

Learn-JavaScript

• Best Collection of JavaScript Tutorials including where to find online help

Become-A-Full-Stack-Web-Developer

• Javascript part of Free resources for learning Full Stack Web Development

30-seconds-of-code

• Short JavaScript code snippets for all your development needs

modern-js-cheatsheet

• Cheatsheet for the JavaScript knowledge you will frequently encounter in modern projects.

Functional-Light-JS

• Pragmatic, balanced FP in JavaScript.

javascript-dev-bookmarks

• A collection of articles that will help you get better at JavaScript.

30-Days-Of-JavaScript

• 30 days of JavaScript programming challenge.

Top comments (15)

Templates let you quickly answer FAQs or store snippets for re-use.

• Email [email protected]
• Location Cracow, Poland
• Education AGH University of Science and Technology in Cracow, Poland
• Work Senior Backend Software Engineer
• Joined Apr 29, 2019

I can also recommend this: github.com/getify/You-Dont-Know-JS

• Joined Oct 9, 2019

Great recommendation!

• Location Brazil
• Education Computer Science Graduate
• Joined Jan 6, 2018

Thank you so much for the links!! I'm studying clean code and was searching for a guide just like this!! S2

Glad it helps! 😄

• Location Pakistan
• Education Computer Science
• Work Backend Developer
• Joined Aug 2, 2020

signed up now and realized i just landed on gem 🙌

Thanks and welcome to dev 😄

• Email [email protected]
• Location South West, UK
• Joined Oct 21, 2020

Great resource, thanks! 👏🏼

• Joined Apr 18, 2020

I really appreciate your help. Thank you.

You're welcome! Happy learning :D

• Location Lagos, Nigeria
• Education self-education
• Work Fullstack developer
• Joined Jun 15, 2019

• Location India
• Work Junior Frontend Eng
• Joined Mar 25, 2020

thanks for sharing . i was kinda looking for it

You're welcome!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Join Our First Community Challenge: The Frontend Challenge

dev.to staff - Mar 20

2024 Cheat Sheet Collection

Travis - Mar 17

10 Websites Every Web Developer Should Bookmark

Mohd Amir - Mar 30

Add Google Analytics to NextJS/React Website

Sh Raj - Mar 23

We're a place where coders share, stay up-to-date and grow their careers.

Level up your JavaScript skills with 10 coding challenges

25+ JavaScript Coding Interview Questions (SOLVED with CODE)

Having a JavaScript Coding Interview Session on this week? Fear not, we got your covered! Check that ultimate list of 25 advanced and tricky JavaScript Coding Interview Questions and Challenges to crack on your next senior web developer interview and got your next six-figure job offer in no time!

Q1 :   Explain what a callback function is and provide a simple example

A callback function is a function that is passed to another function as an argument and is executed after some operation has been completed. Below is an example of a simple callback function that logs to the console after some operations have been completed.

Q2 :   Given a string, reverse each word in the sentence

For example Welcome to this Javascript Guide! should be become emocleW ot siht tpircsavaJ !ediuG

Q3 :   How to check if an object is an array or not? Provide some code.

The best way to find whether an object is instance of a particular class or not using toString method from Object.prototype

One of the best use cases of type checking of an object is when we do method overloading in JavaScript. For understanding this let say we have a method called greet which take one single string and also a list of string, so making our greet method workable in both situation we need to know what kind of parameter is being passed, is it single value or list of value?

However, in above implementation it might not necessary to check type for array, we can check for single value string and put array logic code in else block, let see below code for the same.

Now it's fine we can go with above two implementations, but when we have a situation like a parameter can be single value , array , and object type then we will be in trouble.

Coming back to checking type of object, As we mentioned that we can use Object.prototype.toString

If you are using jQuery then you can also used jQuery isArray method:

FYI jQuery uses Object.prototype.toString.call internally to check whether an object is an array or not.

In modern browser, you can also use:

Array.isArray is supported by Chrome 5, Firefox 4.0, IE 9, Opera 10.5 and Safari 5

Q4 :   How to empty an array in JavaScript?

How could we empty the array above?

Above code will set the variable arrayList to a new empty array. This is recommended if you don't have references to the original array arrayList anywhere else because It will actually create a new empty array. You should be careful with this way of empty the array, because if you have referenced this array from another variable, then the original reference array will remain unchanged, Only use this way if you have only referenced the array by its original variable arrayList .

For Instance:

Above code will clear the existing array by setting its length to 0. This way of empty the array also update all the reference variable which pointing to the original array. This way of empty the array is useful when you want to update all the another reference variable which pointing to arrayList .

Above implementation will also work perfectly. This way of empty the array will also update all the references of the original array.

Above implementation can also empty the array. But not recommended to use often.

Q5 :   How would you check if a number is an integer?

A very simply way to check if a number is a decimal or integer is to see if there is a remainder left when you divide by 1.

Q6 :   Implement enqueue and dequeue using only two stacks

Enqueue means to add an element, dequeue to remove an element.

Q7 :   Make this work

Q8 :   write a "mul" function which will properly when invoked as below syntax.

Here mul function accept the first argument and return anonymous function which take the second parameter and return anonymous function which take the third parameter and return multiplication of arguments which is being passed in successive

In JavaScript function defined inside has access to outer function variable and function is the first class object so it can be returned by function as well and passed as argument in another function.

• A function is an instance of the Object type
• A function can have properties and has a link back to its constructor method
• Function can be stored as variable
• Function can be pass as a parameter to another function
• Function can be returned from function

Q9 :   Write a function that would allow you to do this?

You can create a closure to keep the value passed to the function createBase even after the inner function is returned. The inner function that is being returned is created within an outer function, making it a closure, and it has access to the variables within the outer function, in this case the variable baseNumber .

Q10 :   FizzBuzz Challenge

Create a for loop that iterates up to 100 while outputting "fizz" at multiples of 3 , "buzz" at multiples of 5 and "fizzbuzz" at multiples of 3 and 5 .

Check out this version of FizzBuzz:

Q11 :   Given two strings, return true if they are anagrams of one another

For example: Mary is an anagram of Army

Q12 :   How would you use a closure to create a private counter?

You can create a function within an outer function (a closure) that allows you to update a private variable but the variable wouldn't be accessible from outside the function without the use of a helper function.

Q13 :   Provide some examples of non-bulean value coercion to a boolean one

The question is when a non-boolean value is coerced to a boolean, does it become true or false , respectively?

The specific list of "falsy" values in JavaScript is as follows:

• "" (empty string)
• 0 , -0 , NaN (invalid number)
• null , undefined

Any value that's not on this "falsy" list is "truthy." Here are some examples of those:

• [ ] , [ 1, "2", 3 ] (arrays)
• { } , { a: 42 } (objects)
• function foo() { .. } (functions)

Q14 :   What will be the output of the following code?

Above code would give output 1undefined . If condition statement evaluate using eval so eval(function f() {}) which return function f() {} which is true so inside if statement code execute. typeof f return undefined because if statement code execute at run time, so statement inside if condition evaluated at run time.

Above code will also output 1undefined .

Q15 :   What will the following code output?

The code above will output 5 even though it seems as if the variable was declared within a function and can't be accessed outside of it. This is because

is interpreted the following way:

But b is not declared anywhere in the function with var so it is set equal to 5 in the global scope .

Q16 :   Write a function that would allow you to do this

You can create a closure to keep the value of a even after the inner function is returned. The inner function that is being returned is created within an outer function, making it a closure, and it has access to the variables within the outer function, in this case the variable a .

Q17 :   How does the this keyword work? Provide some code examples

In JavaScript this always refers to the “owner” of the function we're executing, or rather, to the object that a function is a method of.

Q18 :   How would you create a private variable in JavaScript?

To create a private variable in JavaScript that cannot be changed you need to create it as a local variable within a function. Even if the function is executed the variable cannot be accessed outside of the function. For example:

To access the variable, a helper function would need to be created that returns the private variable.

Q19 :   What is Closure in JavaScript? Provide an example

A closure is a function defined inside another function (called parent function) and has access to the variable which is declared and defined in parent function scope.

The closure has access to variable in three scopes:

• Variable declared in his own scope
• Variable declared in parent function scope
• Variable declared in global namespace

innerFunction is closure which is defined inside outerFunction and has access to all variable which is declared and defined in outerFunction scope. In addition to this function defined inside function as closure has access to variable which is declared in global namespace .

Output of above code would be:

Q20 :   What will be the output of the following code?

Above code will output 0 as output. delete operator is used to delete a property from an object. Here x is not an object it's local variable . delete operator doesn't affect local variable.

Q21 :   What will be the output of the following code?

Above code will output xyz as output. Here emp1 object got company as prototype property. delete operator doesn't delete prototype property.

emp1 object doesn't have company as its own property. You can test it like:

However, we can delete company property directly from Employee object using delete Employee.company or we can also delete from emp1 object using __proto__ property delete emp1.__proto__.company .

Q22 :   What will the following code output?

This will surprisingly output false because of floating point errors in internally representing certain numbers. 0.1 + 0.2 does not nicely come out to 0.3 but instead the result is actually 0.30000000000000004 because the computer cannot internally represent the correct number. One solution to get around this problem is to round the results when doing arithmetic with decimal numbers.

Q23 :   When would you use the bind function?

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

A good use of the bind function is when you have a particular function that you want to call with a specific this value. You can then use bind to pass a specific object to a function that uses a this reference.

Q24 :   Write a recursive function that performs a binary search

Q25 :   describe the revealing module pattern design pattern.

A variation of the module pattern is called the Revealing Module Pattern . The purpose is to maintain encapsulation and reveal certain variables and methods returned in an object literal. The direct implementation looks like this:

An obvious disadvantage of it is unable to reference the private methods

Rust has been Stack Overflow’s most loved language for four years in a row and emerged as a compelling language choice for both backend and system developers, offering a unique combination of memory safety, performance, concurrency without Data races...

Clean Architecture provides a clear and modular structure for building software systems, separating business rules from implementation details. It promotes maintainability by allowing for easier updates and changes to specific components without affe...

Azure Service Bus is a crucial component for Azure cloud developers as it provides reliable and scalable messaging capabilities. It enables decoupled communication between different components of a distributed system, promoting flexibility and resili...

FullStack.Cafe is a biggest hand-picked collection of top Full-Stack, Coding, Data Structures & System Design Interview Questions to land 6-figure job offer in no time.

Coded with 🧡 using React in Australia 🇦🇺

by @aershov24 , Full Stack Cafe Pty Ltd 🤙, 2018-2023

Privacy • Terms of Service • Guest Posts • Contacts • MLStack.Cafe

• DSA with JS - Self Paced
• JS Tutorial
• JS Exercise
• JS Interview Questions
• JS Operator
• JS Projects
• JS Examples
• JS Free JS Course
• JS A to Z Guide
• JS Formatter
• JavaScript Tutorial

JavaScript Basics

• Introduction to JavaScript
• JavaScript Versions
• How to Add JavaScript in HTML Document ?
• JavaScript Statements
• JavaScript Syntax
• JavaScript Output
• JavaScript Comments

JS Variables & Datatypes

• Variables and Datatypes in JavaScript
• Global and Local variables in JavaScript
• JavaScript Let
• JavaScript Const
• JavaScript var

JS Operators

• JavaScript Operators
• Operator precedence in JavaScript
• JavaScript Ternary Operator
• JavaScript typeof Operator
• JavaScript yield Operator
• JavaScript delete Operator
• JavaScript Comma Operator
• JavaScript Pipeline Operator
• JavaScript in Operator
• JavaScript Grouping Operator
• Javascript Short Circuiting Operators
• JavaScript Loops
• 7 Loops of JavaScript
• JavaScript For Loop
• JavaScript While Loop
• JavaScript for-in Loop
• JavaScript for...of Loop
• JavaScript do...while Loop

JS Perfomance & Debugging

• JavaScript | Performance
• Debugging in JavaScript
• JavaScript Errors Throw and Try to Catch
• Objects in Javascript
• Introduction to Object Oriented Programming in JavaScript
• JavaScript Objects
• Creating objects in JavaScript (4 Different Ways)
• JavaScript JSON Objects
• JavaScript Object Reference

JS Function

• Functions in JavaScript
• How to write a function in JavaScript ?
• JavaScript Function Call
• Different ways of writing functions in JavaScript
• Difference between Methods and Functions in JavaScript
• Explain the Different Function States in JavaScript
• JavaScript Function Complete Reference
• JavaScript Arrays
• JavaScript Array Methods
• Best-Known JavaScript Array Methods
• What are the Important Array Methods of JavaScript ?
• JavaScript Array Reference
• JavaScript Strings
• JavaScript String Methods
• JavaScript String Reference
• JavaScript Numbers
• How numbers are stored in JavaScript ?
• How to create a Number object using JavaScript ?
• JavaScript Number Reference
• JavaScript Math Object
• What is the use of Math object in JavaScript ?
• JavaScript Math Reference
• JavaScript Map
• What is JavaScript Map and how to use it ?
• JavaScript Map Reference
• Sets in JavaScript
• How are elements ordered in a Set in JavaScript ?
• How to iterate over Set elements in JavaScript ?
• How to sort a set in JavaScript ?
• JavaScript Set Reference
• JavaScript Date
• JavaScript Promise
• JavaScript BigInt
• JavaScript Boolean
• JavaScript Proxy/Handler
• JavaScript WeakMap
• JavaScript WeakSet
• JavaScript Function Generator
• JavaScript JSON
• Arrow functions in JavaScript
• JavaScript this Keyword
• Strict mode in JavaScript
• Introduction to ES6
• JavaScript Hoisting
• Async and Await in JavaScript

JavaScript Exercises

Javascript exercises, practice questions and solutions.

If you are a JavaScript learner, then Practice JavaScript Online (JavaScript Exercises) by solving JavaScript quizzes, track progress, and enhance coding skills with our engaging portal. These JavaScript practice questions are ideal for beginners and experienced developers. So, to test your skills, go through these JavaScript exercises with solutions.

A step-by-step JavaScript practice guide for beginner to advanced level.

Benefits of Practice JavaScript

• Interactive Quizzes: Engage in hands-on JavaScript quizzes.
• Progress Tracking: Monitor your learning journey.
• Skill Enhancement: Sharpen coding skills effectively.
• Flexible Learning: Practice at your own pace.
• Immediate Feedback: Receive instant results and feedback.
• Convenient Accessibility: Accessible online, anytime.
• Real-world Application: Apply JavaScript concepts practically.
• Comprehensive Learning: Cover a range of JavaScript topics.

How to Start Practice ?

Embark on your JavaScript learning journey with our online practice portal. Start by selecting quizzes tailored to your skill level. Engage in hands-on coding exercises, receive real-time feedback, and monitor your progress. With our user-friendly platform, mastering JavaScript becomes an enjoyable and personalized experience. Elevate your coding expertise today.

JavaScript Best Practice Guide

Dive into JavaScript excellence with our Best Practice Guide. Explore coding standards, optimization techniques, and industry-recommended approaches. Elevate your skills through insightful tips, real-world examples, and interactive challenges. Unlock the secrets of efficient and maintainable JavaScript coding, ensuring your projects stand out with clarity and performance.

Why Practice JavaScript Online ?

Elevate your JavaScript online test experience with categorized fill-in-the-blank questions. This structured format guides your learning, providing targeted challenges for hands-on improvement. Engage in focused practice as it reinforce coding concepts, receive instant feedback, and enhance your skills incrementally. Moreover, by combining theoretical understanding with practical application, you’ll enjoy a comprehensive and effective approach to mastering JavaScript and as a result optimizing your performance in real-world scenarios.

JavaScript online practice Rules

• Be Honest: Complete challenges independently, refrain from plagiarism or seeking unauthorized help.
• Manage Time: Adhere to assessment time limits, simulating real-world scenarios.
• Code Quality : Prioritize clean, efficient, and well-documented code.
• Follow Guidelines : Adhere to platform-specific instructions, including input/output formats and code submission procedures.
• No Cheating: Avoid external resources during assessments, unless explicitly allowed.
• Utilize Feedback: Learn from automated or mentor/community feedback.
• Participate Actively: Engage in forums, discussions, and share insights with fellow learners.
• Continuous Improvement: Use assessments to identify and improve areas of weakness for ongoing growth.

Features of Practice Portal

• Instant Mistake Correction: Receive immediate feedback on errors to facilitate quick learning.
• Unlimited Tries: Allow learners to attempt questions multiple times for mastery.
• Time Display for Each Category: Show elapsed time for each set of 5-6 fill-in-the-blank questions to manage time effectively.
• Table View of Scenarios: Provide a comprehensive table view displaying all categories, their status (completed or pending), and corresponding scores.
• Performance Analytics: Track progress with detailed analytics, highlighting strengths and areas for improvement.
• Interactive Code Editor: Offer a responsive code editor for an immersive hands-on experience.
• Hints and Solutions: Include hints for guidance and solutions to foster self-learning.
• Community Integration: Facilitate collaboration through forums and discussions for peer learning.
• Adaptive Difficulty: Adjust difficulty levels based on user performance for personalized challenges.
• Gamification Elements: Incorporate scoring, achievements, or badges to make learning engaging.

Please Login to comment...

• Web Technologies
• 10 Best Tools to Convert DOC to DOCX
• How To Summarize PDF Documents Using Google Bard for Free
• Best free Android apps for Meditation and Mindfulness
• TikTok Is Paying Creators To Up Its Search Game
• 30 OOPs Interview Questions and Answers (2024)

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• English (US)

Solve common problems in your JavaScript code

The following links point to solutions to common problems you may encounter when writing JavaScript.

Common beginner's mistakes

Correct spelling and casing.

If your code doesn't work and/or the browser complains that something is undefined, check that you've spelt all your variable names, function names, etc. correctly.

Some common built-in browser functions that cause problems are:

Semicolon position

You need to make sure you don't place any semicolons incorrectly. For example:

There are a number of things that can go wrong with functions.

One of the most common errors is to declare the function, but not call it anywhere. For example:

This code won't do anything unless you call it with the following statement:

Function scope

Remember that functions have their own scope — you can't access a variable value set inside a function from outside the function, unless you declared the variable globally (i.e. not inside any functions), or return the value from the function.

Running code after a return statement

Remember also that when you return from a function, the JavaScript interpreter exits the function — no code after the return statement will run.

In fact, some browsers (like Firefox) will give you an error message in the developer console if you have code after a return statement. Firefox gives you "unreachable code after return statement".

Object notation versus normal assignment

When you assign something normally in JavaScript, you use a single equals sign, e.g.:

With Objects , however, you need to take care to use the correct syntax. The object must be surrounded by curly braces, member names must be separated from their values using colons, and members must be separated by commas. For example:

Basic definitions

• What is JavaScript?
• What is a variable?
• What are strings?
• What is an array?
• What is a loop?
• What is a function?
• What is an event?
• What is an object?
• What is JSON?
• What is a web API?
• What is the DOM?

Basic use cases

• How do you add JavaScript to your page?
• How do you add comments to JavaScript code?
• How do you declare a variable?
• How do you initialize a variable with a value?
• How do you update a variable's value? (also see Assignment operators )
• What data types can values have in JavaScript?
• What does 'loosely typed' mean?
• What types of number do you have to deal with in web development?
• How do you do basic math in JavaScript?
• What is operator precedence, and how is it handled in JavaScript?
• How do you increment and decrement values in JavaScript?
• How do you compare values in JavaScript? (e.g. to see which one is bigger, or to see if one value is equal to another).
• How do you create a string in JavaScript?
• Do you have to use single quotes or double quotes?
• How do you escape characters in strings?
• How do you join strings together?
• Can you join strings and numbers together?
• How do you find the length of a string?
• How do you find what character is at a certain position in a string?
• How do you find and extract a specific substring from a string?
• How do you change the case of a string?
• How do you replace one specific substring with another?
• How do you create an array?
• How do you access and modify the items in an array? (this includes multidimensional arrays)
• How do you find the length of an array?
• How do you add items to an array?
• How do you remove items from an array?
• How do you split a string into array items, or join array items into a string?

Debugging JavaScript

• What are the basic types of error?
• What are browser developer tools, and how do you access them?
• How do you log a value to the JavaScript console?
• How do you use breakpoints and other JavaScript debugging features?

For more information on JavaScript debugging, see Handling common JavaScript problems . Also, see Other common errors for a description of common errors.

Making decisions in code

• How do you execute different blocks of code, depending on a variable's value or other condition?
• How do you use if ...else statements?
• How do you nest one decision block inside another?
• How do you use AND, OR, and NOT operators in JavaScript?
• How do you conveniently handle a large number of choices for one condition?
• How do you use a ternary operator to make a quick choice between two options based on a true or false test?

Looping/iteration

• How do you run the same bit of code over and over again?
• How do you exit a loop before the end if a certain condition is met?
• How do you skip to the next iteration of a loop if a certain condition is met?
• How do you use while and do...while loops?

Intermediate use cases

• How do you find functions in the browser?
• What is the difference between a function and a method?
• How do you create your own functions?
• How do you run (call, or invoke) a function?
• What is an anonymous function?
• How do you specify parameters (or arguments) when invoking a function?
• What is function scope?
• What are return values, and how do you use them?
• How do you create an object?
• What is dot notation?
• What is bracket notation?
• How do you get and set the methods and properties of an object?
• What is this , in the context of an object?
• What is object-oriented programming?
• What are constructors and instances, and how do you create them?
• What different ways are there to create objects in JavaScript?
• How do you structure JSON data, and read it from JavaScript?
• How can you load a JSON file into a page?
• How do you convert a JSON object to a text string, and back again?
• What are event handlers and how do you use them?
• What are inline event handlers?
• What does the addEventListener() function do, and how do you use it?
• Which mechanism should I use to add event code to my web pages?
• What are event objects, and how do you use them?
• How do you prevent default event behavior?
• How do events fire on nested elements? (event propagation, also related — event bubbling and capturing)
• What is event delegation, and how does it work?

Object-oriented JavaScript

• What are object prototypes?
• What is the constructor property, and how can you use it?
• How do you add methods to the constructor?
• How do you create a new constructor that inherits its members from a parent constructor?
• When should you use inheritance in JavaScript?
• How do you manipulate the DOM (e.g. adding or removing elements) using JavaScript?

JavaScript Coding Interview Practice – Sample Interview Questions and Solutions

David Goggins is an ultramarathon runner, a public speaker, a retired navy SEAL, and the author of the book ' Can't Hurt Me: Master Your Mind and Defy the Odds '. He's one of my role models because of his physical strength and mental resilience.

You might say: "Wait a second! We get it. This person is obviously the epitome of success. But he has non-technical skills. So why is he relevant to JavaScript coding interviews?"

Well, if you're ready, let's explore this together.

Rocky Balboa As a Mentor

In response to a question, David says, 'The Rocky Movie changed my life." In that pep talk , he refers to this scene (min 1.30-1.42) where the fictional character, Rocky - despite being beaten up badly by his opponent in the final boxing round - refuses to give up no matter what.

David describes that particular moment as the time when Rocky - initially depicted as an underdog by the screenwriter - overcomes all the odds and strikes awe in his rival.

Let's admit it. Being a good programmer is not that easy. And especially if you are at the beginning of your career, technical job interviews can be seriously daunting. In short, it might be nice to reach David's (and Rocky's) mindset.

With that kind of drive and confidence, you're much less likely to consider giving up regardless of the types of challenges you face in your wonderful yet difficult journey of getting a developer job.

Why Coding Interviews Are Difficult

During coding interviews, you are expected to fix coding problems with some theoretical knowledge. But the caveat is you must do that in real time, which sometimes scares new developers off.

There are several types of coding interviews. But the most challenging one is probably a whiteboard interview. In these types of interviews, you have to code in front of a future employer / a senior software developer.

These interviews can be extra stressful because you are typically not allowed to have a computer to google any unknown concepts or to get some code snippets from the internet. You are only given a marker to solve the question on a whiteboard as the name suggests.

Do Interviews Reflect What You'll Do in Your Job?

Not necessarily. So why are they holding these scary coding interviews? Well, the reason is to test your problem solving skills in general. At times, finding the correct answer may not even be that important.

What matters is how you reach that conclusion / solution and which algorithms you prefer to use along the way. In other words, your ability to function well under stress is being tested by tech companies.

Let's face it. You'll come across lots of stressful situations in your future job, and how you deal with certain issues is especially crucial. Therefore, your future employer naturally wants to witness firsthand whether you are the right fit for the job.

What is the Purpose of This Tutorial?

In this post, I'll walk you through some popular JavaScript interview concepts through examples. I'll also do my best to show you what recruiters / interviewers might actually be looking for in a candidate while they code in front of them.

To simply put, we'll examine some models and try to solve the related puzzles together.

By the end of this tutorial, you'll hopefully have an idea about a number of important array methods. But most importantly, you'll unlock how to approach some coding challenges in the best way possible.

What Exactly is the Memory Palace Method?

Before we start, just be aware that in the sample data down below, I've used some late celebrities' names intentionally so that all those details can be catchy in the long run.

An ancient technique called the Memory Palace clearly says that the weirder the details, the easier it is to remember them – and a made-up story / creating context is even more effective.

If you try to visualise the related situation vividly and associate the given programming concepts with some bizarre details in your mind, you might feel less stressed and confused when you see a similar problem next time. This is because it might be easier for you to create specific links and as such remember things easily. This is how our brains work.

Well, even the fictional figure ' Sherlock Holmes ', the smartest guy on the planet, benefits from this method when solving complicated crimes – so why shouldn't we?

How to Approach Coding Problems

In our imaginary interview, you'll see that four extraordinary musicians from the past are listed as passengers on a flight. We have their food choices and the number of connecting flights they need to take after their incredible performances on stage in different parts of the world.

Let's say just for the sake of argument our phenomenal figures (Freddie Mercury, Amy Winehouse, Kurt Cobain, and Michael Jackson) are about to fly from different destinations to Los Angeles just to be able to dine out together at a swanky restaurant, as they enjoy each other's company so much.

After all, this is our own private memory palace, so we can absolutely do whatever we want to do in our minds. Remember unusual details will stick better. That's why I'm trying to add more to spice things up.

This method explicitly suggests describing every single detail with some vivid adjectives so that you can associate them with the things you plan to learn in the long run.

Scientists say short term memory and long term memory function very differently. To put it simply, we need a way to put all those core concepts (not necessarily the syntax) about programming in our long term memory. That's why it can be nice to benefit from the memory palace method in our journey.

Plus, I feel like you get to picture this unusual scenario with a smile on your face. Well, wouldn't it be great if these awesome souls could have seen that they are now helping us / the programming community as the guests of a freeCodeCamp article?

Sample Interview Questions

Let's get back to the real life now though. Remember you're still in the interview and as you see below, three questions in a row are waiting for you.

To solve the puzzles, you're expected to use the data inside the following array of objects in practical ways.

You'll certainly need to come up with the right algorithms and try to find the most effective solution that can satisfy the interviewer.

The above questions are in fact not that hard. But, how we'll handle them is a great opportunity to compare alternative solutions for a single problem. At the end of the day, quality is what counts for recruiters / interviewers.

Interview Question 1: How to Get Passengers' Names

Let's get the passengers' names as requested. The first solution is through a 'for loop' method. So we first need to use an empty array to push the passengers' names right inside it at the end of the loop.

Below, [i] represents the current passenger and we simply loop through the 'passengers' array to access the names of the passengers. Then, we need to lock them up in our empty array / passengerNames.

Alright, we solved the puzzle, but is it enough? Or might the interviewers expect you to come up with a better solution?

Alternative Solution #1:

We can reach the desired result by using the ' forEach ' function as well. This solution is even a bit better than the previous one because there is no index expression in this one.

To benefit from 'forEach', we need a callback function . With this arrangement, we are able to reach every passenger in the list. However, just like in the previous solution, we first need an empty array to push the items / passengers' names.

Even though the result is the same, this piece of code is shorter. Writing neater codes is what is – in fact – expected from you.

In other words, not only the solution matters, but also how you reach it is being evaluated by the recruiters. For this reason, it is a good idea to plan your action rather than writing the first idea in your mind on the whiteboard.

Alternative Solution 2:

Here comes the best solution. We can also utilise the ' map ' function to tackle the same problem. Let's see how.

The map function also loops through the array and returns a new array for every item in the list. With this set-up, we simply return a single element, not an object.

The result will again be the same in the console, but your code will even be better than the first and second one because this time, we don't need to create an empty array before the actual task.

Here is the food for thought on this topic. Those who say 'less is more' have a point when it comes to writing codes.

Interview Question 2: How to Get Vegetarian/Vegan Singers

Let's now take a look at the next challenge. The new task asks us to obtain only the vegetarian / vegan singers from the passengers' list by also keeping the first argument in the main question section.

How to Solve With a 'For Loop'

Again, we can use the same old 'for loop' for this one as well. All we need to do is to check whether there are any vegetarian / vegan singers in our passenger list through an 'if' statement inside our existing function.

We do that with the isVegetarianOrVegan property in our object. Basically, what we say is this: if the relevant statement is true (if there are any vegan / vegetarian passengers in the list), just push those items into our new array. The result will give us three singers' names as those are listed as  'vegetarian or vegan' in the data part.

How to Solve with 'forEach'

As a matter of fact, the 'forEach' function handles the problem similarly. But once again, it has too many lines of codes as you see below, so it isn't the ideal version.

How to Solve with 'Filter' & 'Map'

To come up with the best option, this time, we will use two different methods. The ' filter ' and the 'map' functions will – in a way – collaborate to create better logic when solving the given problem. Let's examine the following code snippet closely now.

With the filter method, we only get the vegetarian / vegan passengers from our array in the first place. If it finds some non-vegetarian / vegan passengers (like our beloved 'Freddie'), it will get rid of them automatically.

Briefly, the first part of the equation, the 'filter' method will simply work through 'yes' or 'no' model.

Then, the 'map' function will come in, eventually giving us a brand new array showing the vegetarian / vegan passengers only.

This final solution will prove your future employer that you genuinely know what you're doing and you are really taking the right steps to be a hotshot developer.

Interview Question #3: How to Sort Passengers by Connecting Flights

The last section asks us to sort the list of our super cool passengers by the number of the connecting flights they'll take to eventually reach LA. Let's see who has more and as such, will be pretty exhausted.

Spoiler alert! Amy with four connecting flights in total might be a bit sleepy in the get-together at that fancy restaurant. But there is no doubt that she will somehow rock where ever she goes.

Anyway, what we need for this task is to know how the ' sort ' function operates.

Primarily, it compares items one by one and returns something as a result. In our case, it will be the number of connected flights. But how does it make that comparison? What is the logic behind that?

The above lines of code are pretty clear in general. Thanks to the 'sort' function, we list those months in alphabetical order.

Well, here comes the big question. How does the code / system know that 'a' is the first letter of the alphabet and as such, the list starts with the 'd' letter (December)?

The reason is that the 'sort function' lists things in ascending order by default. But can't we change this setting? Perhaps, we need to list items in descending order. Of course, we can.

Let's see how. To achieve what we want, we may utilise 'a' and 'b' letters as parameters leading to different directions.

Simultaneously, we can benefit from the assistance of three numbers: -1,+1, 0 as seen above. When sorting items in descending or ascending order or finding the equal values, they can be quite handy.

Tricky Bit of the 'Sort' Function

In the following example, the list is sorted in ascending order. Why is it like that? Here is the reason. When we return those 'a' and 'b' parameters, we use this order:  'a - b' . That gives us ascending values by default.

However, if we swap them and say 'b - a', the list will be seen in descending order this time. That's the tricky bit when it comes to the 'sort' function.

In the above example, the first version (regular function) and the second one (arrow function) are in essence the same, but just be aware that arrow functions came with ES6 .

Although arrow functions help developers to write less code, you cannot use them everywhere. (Read this to find out when to use them.)

Testing Our New Knowledge

Shall we now analyse the situation of our passengers through our new perspective? We know that the last task asks us to sort the number of flights in descending order. But the following set-up does the opposite.

It can only give us the list in ascending order. Why? It's simply because of the pre-defined order (passenger1.connectedFlights - passenger2.connectedFlights) as in the case of a - b example.

Once we swap the order (passenger2.connectedFlights - passenger1.connectedFlights) as you see in the following code snippet, our problem will be solved and the list will come in descending order.

Can We Also Use 'for loop' or 'forEach'?

Well, yes and no. Both would be low-level solutions for this question.

We should keep in mind that the sort function mutates an array. This is a kind of side effect which changes the original array and that might be a problem if we use 'for loop' or 'forEach' as a solution.

There are of course ways to avoid mutation in the sort function, but in our example, it will lead to more lines of codes, which is not practical at all.

Wrapping Up

We've started the article with David Goggins, the symbol of resilience and grit, so let's end it with his inspiring presence and ideas.

If you happen to read this modern day hero's book or listen to one of those famous podcast episodes (For example, this one ) where he was a guest speaker, you'll immediately understand that he wasn't born that way. Rather, his secret lies in the fact that he never gives up, against all odds.

Coding interviews are tough, but if you keep going after your goals by visualising the scene of success in your mind over and over again, it will -  sooner or later - be yours.

Many thanks for reading this post. If you've liked this article, one of the best ways to support me is to share it. Should you have any questions or comments, you can always contact me via LinkedIn . I'll be more than happy to help you out with your queries.

Happy coding!

“Knowledge is power.” – Francis Bacon

Software Developer || UI Designer || Technical Writer

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

• Data Engineering
• Machine Learning
• RESTful API
• React Native
• Elasticsearch
• Ruby on Rails

Interesting JavaScript Problems and Solutions

In this post, we're going to solve some JavaScript problems you may be asked to solve in a technical interview or meet in real live projects.

(1)Two Sum Problem

Given an array of integers, return indices of the two numbers such that they add up to a specific target. You may assume that each input would have exactly one solution, and you may not use the same element twice. Example: Given array = [2, 7, 11, 15], target = 9, Because nums[0] + nums[1] = 2 + 7 = 9, return [0, 1].

Let's assume the input is:

• array=[1,3,10,11,14]

This will return an array of [1,2]. It works but if you check it out you'll notice it's running a loop inside of a loop to figure out which two numbers add up to the goal. That gives us a time complexity of O(n^2) which is pretty slow

A more optimized solution

(2) search insert position of k in a sorted array.

Given a sorted array arr consisting of N distinct integers and an integer K,the task is to find the index of K, if it's present in the array arr. Otherwise otherwise,find the index where K must be inserted to keep the array sorted You may assume no duplicates in the array.

explanation

Time complexity:o(n), auxiliary space:o(1), 3)check whether a triangle is valid or not if the sides are given., explanation.

A triangle is valid if the sum of its sides is greater than the third side. If three sides are a,b, and c, then three conditions should be met.

Enjoy this post? Give Allen Jones a like if it's helpful.

Leave a like and comment for Allen

Exercise 1A: JavaScript Problem Solving

Write JavaScript code to solve the following problems (you may recognise these …). Where a code asks for numerical input from a user you can just ‘hard-code’ this input into your answer:

Write some code to print out all the numbers from 1 to 10

Write some code that prints out only the even numbers between 1 and 10

Write some code that prints out only the even numbers between 1 and 1000

The opposite of a number is the number itself with its sign reversed. For example, the opposite of 1 is -1. The opposite of -6 is 6. Write some code that takes a numerical value and prints out the opposite of that number.

Write some code that prints out the numbers between 1 and 1000, but if the number is divisible by 3 it prints ‘fizz’, if the number is divisible by 5 it prints ‘buzz’ and if the number is divisible by 3 and 5 it prints ‘fizzbuzz’

A square number is the product of a number multiplied by itself. Write some code that takes a numerical value and prints out all the square numbers below that value.

The Fibonacci sequence starts with the values 1, 2. The next number in the sequence is generated by summing the previous 2 values, so the first 5 numbers in the sequence are: 1, 2, 3, 5, 8, … a. Write some code to generate the first 100 values in the Fibonacci sequence b. Write some code to add up only the even values in the first 1000 values of the Fibonacci sequence

The sum of digits of a number is found by adding all the digits of a number together. For example, the sum of digits of 234 is 2 + 3 + 4 = 9. Write some code to take a numerical value and print out the sum of digits of that number.

Next: Exercise 1B: JavaScript Problem Solving

Previous: Using functions

10 JavaScript Snippets for Solving Common Problems

Published on May 24, 2022

Utility libraries are great but sometimes they can be overkill. This is especially true when you're only looking for a simple solution to a common problem.

In this article, I've put together a list of common problems that JavaScript developers often face and the snippets you can use to solve them.

1. Create an array of key-value pairs from an object

This example uses the keys method from Object and the map method from Array to map over an Object’s keys and create an array of key-value pairs.

2. Remove falsey values from an array

The Array filter method is used here to cast all values of an array as a boolean and create a new array of only truthy values.

3. Get the difference in days between two dates

The start date is subtracted from the end date to get the difference in seconds. The difference is then divided by the number of seconds in a day to get the difference in days.

4. Find the difference between two arrays

This solution creates a set from one array which is then compared against the other array using the Array filter method. The use of Set here is an optimisation that is more efficient when dealing with larger arrays.

5. Convert an array to CSV

The Array map method is used to iterate over each level of the array and join each value with a defined delimiter.

6. Count the occurrences of an item in an array

The Array reduce method is used to loop over the array and increment an accumulator value each time the target value matches the current value.

7. Capitalize the first letter of a string

The string is cast to an array and deconstructed. The first element in the array is the first letter and the toUpperCase method is used to convert it to uppercase while the rest of the array is joined as a string.

8. Get the largest numbers in an array

The Array sort method is used to order the arraying into descending order. The slice method is then used to extract the first elements, which will be the highest numbers.

9. Average an array of numbers

The Array reduce method is used to loop over the items in an array and add each value to an accumulator. The accumulated value is then divided by the number of items in the array, producing an average.

10. Check if a string is valid JSON

The JSON parse method is used to parse the string to JSON and if it is invalid, an error will be thrown. The try-catch statement is used to catch this error and return false and otherwise true.

Final thoughts

Join the runjs mailing list.

You'll receive an occasional newsletter with development updates and articles from the blog. Unsubscribe at any time.

Recent posts

• How Do I Download JavaScript? Demystifying the Basics
• 17 Equations that Changed the World - Rewritten in JavaScript
• 6 Best Code Editors for JavaScript (2023): A Comprehensive Guide
• How to use the ChatGPT JavaScript API - 3 Easy Steps (2023)
• 10 Chrome DevTools Tips and Tricks