logo

JavaScript FAQ

Last Updated: 2023-12-10

The Ecosystem

What's the difference between JavaScript and ECMAScript?

What are popular frameworks?

  • Web Frameworks:
    • widely used: React, Angular, Vue
    • newer frameworks: Solid, Svelte
    • higher level (built on top of the above): Next, SvelteKit, etc.
  • Server side: Node, Express,

Check the latest: https://stateofjs.com/

What are transformers / bundlers?

Transformers and bundlers are used to use modern JavaScript language features that aren't yet universally supported across JavaScript runtimes.

  • Transformers: parse and translate JavaScript. (e.g. Bable)
  • Bundlers: turn multiple JavaScript source files into a bundle. (e.g. Webpack)

Latest developments:

  • esbuild: written in Go.
  • swc: writtern in Rust. Next.js migrated from babel to swc.
  • tsc: TypeScript.

esbuild and swc are much faster than babel and tsc.

What's the difference between deno and node?

  • Both are Javascript runtimes. Both use V8 under the hood.
  • Deno was created to be an improved version of Node.js
  • Deno is written in Rust.
  • Deno supports TypeScript out of the box.
  • Deno ships only a single executable file. No additional package manager needed.

The Language

How to include external JavaScript

Add this to HTML:

<script type="text/javascript," src="/code.js">

What are async and defer when loading JavaScript?

  • no async or defer (default): The script is downloaded and executed immediately, blocking parsing until the script is completed. If the server is slow or the script is particularly heavy, then the web page is delayed.
  • async: The script is downloaded in parallel to parsing the page, and executed as soon as it is available (before parsing completes)
  • defer but not async: The script is downloaded in parallel to parsing the page, and executed after the page has finished parsing.
  • both defer and async: from the spec: "The defer attribute may be specified even if the async attribute is specified, to cause legacy Web browsers that only support defer (and not async) to fall back to the defer behavior instead of the synchronous blocking behavior that is the default."

Example:

<script defer type="text/javascript," src="/code.js"></script>
<script async type="text/javascript," src="/code.js"></script>

When to use which:

  • defer is used for scripts that need the whole DOM and/or their relative execution order is important.
  • async is used for independent scripts, like counters or ads. And their relative execution order does not matter.

What's the difference between in and hasOwnProperty()?

  • in: check prototype chain, all inherited properties will be included.
  • hasOwnProperty(): only check its own properties.

What's the difference between .call() and .apply()?

  • .call(): the number of the arguments is known, they have to be mentioned as arguments in the call statement.
  • .apply(): the number of the arguments is not known. It takes an array instead.

What's the difference between == and ===?

== checks only for equality in value, whereas === (strict equality operator) is a stricter equality test and returns false if either the value or the type of the two variables are different.

What are primitive

There are 7 primitive data types: string, number, bigint, boolean, undefined, symbol (referred to as "atom" in other languages), and null.

All primitives are immutable.

What are "falsey" values?

false, undefined, null, 0, "" (empty string), NaN.

However null != false.

How to determine if variable is undefined or null?

  • Undefined value: A value that is not defined and has no keyword is known as undefined value. For example in the declaration, int number; the number has undefined value.
  • Null value: A value that is explicitly specified by the key word null is known as null value. For example in the declaration, str = null; the str has a null value. The keyword null is used here.

Diff:

  • Null value has a keyword called null; "undefined" is not a keyword.
  • typeof undefined variable or property returns 'undefined' whereas typeof a null value returns 'object'.
// undefined
> typeof a === 'undefined'
true

// null
> b = null
null
> typeof b
'object'

> null == undefined
true
> null === undefined
false

If you try to test the null values using the typeof operator it will not work as expected, because JavaScript return "object" for typeof null instead of "null".

The undefined is not a reserved keyword in JavaScript, and thus it is possible to declare a variable with the name undefined. So the correct way to test undefined variable or property is using the typeof operator, like this: if(typeof myVar === 'undefined').

What is Scope in JavaScript

Scope is the context in which a variable / function can be accessed.

Since ES6, const and let keywords allow developers to declare variables in the block scope, which means those variables exist only within the corresponding block

How can generic objects be created?

Generic objects can be created as:

var I = new object();

What is the function of the delete operator?

The delete keyword is used to delete the property as well as its value.

Example

> a = {b: 1, c:2}
{b: 1, c: 2}

> delete a.b
true

> a
{c: 2}

What's the result of 1 + 2 + '4'

Result: '34'

  • first it calculates 1 + 2 = 3
  • since '4' is a string, the number 3 will be converted to a string and perform a concatenation.

What is the difference between an alert box and a confirmation box?

  • An alert box displays only one button, which is the OK button.
  • a Confirmation box displays two buttons, namely OK and cancel.

What does javascript:void(0); Mean?

void(0) is used to prevent the page from refreshing, and parameter “zero” is passed while calling.

void(0) is used to call another method without refreshing the page.

How to add or remove elements to an array?

  • add:
    • push(): adds to the end of the array.
    • unshift(): add to the beginning of the array.
  • remove:
    • pop(): removes the last element.
    • shift(): removes the first element.

What is event bubbling?

When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up the DOM tree on other ancestors.

What are the different types of errors in JavaScript?

  • Syntax errors / parsing errors: e.g. missing a closing parenthesis
  • Runtime errors / exceptions: e.g. the syntax is correct but it trys to call a method that does not exist at runtime.
  • Logical errors: no syntax and runtime error, but occur due to the bad logic.

What is the "strict mode"?

The strict mode is no longer required since the release of ES2015, which fixes most of JavaScript's confusing behavior with a more robust syntax.

Web API

What is Web API

The browser built-in APIs. (NOT the third-party APIs like YouTube API or Facebook API).

Examples: functions provided by document, window, navigator objects.

What's the difference between BOM and DOM?

  • BOM: Browser Object Model. JavaScript can use window object to interact with the browser. window has many children, e.g.:
    • document (the DOM!)
    • navigator
    • history
    • screen
    • location: url, host, path, protocol
  • DOM: Document Object Model. The document object inside the window object. (i.e. it is part of BOM.)

What's the screen object?

screen is used to read the information from the client's screen.

  • availHeight: the height of the client's screen
  • availWidth: the width of the client's screen
  • colorDepth: the bit depth of images.
  • height: the total height of the client's screen, including the taskbar
  • width: the total width of the client's screen, including the taskbar

What's the difference between screen.height and window.innerHeight

  • screen.width / screen.height: the actual size of your monitor, e.g. 1920 x 1080.
  • screen.availWidth / screen.availHeight: the full monitor size minus topbar or sidebars of your OS. If topbar and sidebars are hidden, this should be the same as the screen.width / screen.height.
  • window.outerWidth / window.outerHeight: the size of the browser, includes the page and all the visible browser's bars (location, status, bookmarks, window title, borders, …). When the window is maximized, screen.availHeight === window.outerHeight
  • window.innerWidth / window.innerHeight: the size of the viewport that shows the website, just the content, no browser's bars.
  • document.body.clientWidth / document.body.clientHeight: the size of the document.

How to submit a form using JavaScript?

document.form[0].submit();

How to change the style of an element?

document.getElementById('foo').style.fontSize = '20';

How to change the class of an element?

document.getElementById('foo').className = 'bar';

How to print text on the screen?

document.write('Hello');

How to find client's OS / browser info?

navigator.appVersion;

How to get the status of a CheckBox

document.getElementById('checkbox1').checked;

How to remove the focus from the specified object?

document.getElementById('foo').blur();

How to change the content of an element?

document.getElementById('foo').innerHTML = 'content...';

What are the disadvantages of using innerHTML?

  • The entire innerHTML content is re-parsed and builds into elements. You cannot append to it, the whole content will be replaced, so it is slower.
  • no validation in innerHTML, so it is easier to insert rogue code in the document and make the web page unstable.

How to add event listeners?

document.getElementById(id).addEventListener('click', functionName);

// or
document.getElementById(id).onclick = function () {};

What's the difference between window.onload and onDocumentReady?

  • onload: not run until all the information on the page is loaded. This leads to a substantial delay before any code is executed.
  • onDocumentReady: loads the code just after the DOM is loaded. This allows early manipulation of the code.

What are Cookies in JavaScript?

A cookie is a piece of data stored on your computer to be accessed by your browser. Cookies are saved as key/value pairs.

Add key / value pair to the cookie (this will not remove the existing pairs):

document.cookie = 'cookiename=cookievalue';

Get cookie:

document.cookie;

Delete cookie: set the value to empty and set the value of expires to a passed date.

document.cookie = 'cookiename=;expires=Wed, 21 Oct 2015 07:28:00 GMT';

How to escape / unescape strings?

Use escape and unescape under window:

> escape("hello world")
'hello%20world'

> unescape('hello%20world')
'hello world'

How to Encode / Decode URI ?

Use encodeURI and decodeURI under window:

> encodeURI('https://www.example.com/name="无名"')
'https://www.example.com/name=%22%E6%97%A0%E5%90%8D%22'
> decodeURI('https://www.example.com/name=%22%E6%97%A0%E5%90%8D%22')
'https://www.example.com/name="无名"'
logo
PRIVACY POLICYABOUT中文