JavaScript

JavaScript logo. Source: Wikipedia 2019a.
JavaScript logo. Source: Wikipedia 2019a.

JavaScript (JS) is a programming language and a core technology of the World Wide Web (WWW). It complements HTML and CSS. HTML provides structured static content on the web. CSS does the styling on the content including animations. JavaScript enables rich interactions and dynamic content.

JS started for the web and executed within web browsers. With the coming of Node.js in 2009, it became possible to use JS for server-side execution. It's now possible to build entire web apps with JS for both frontend and backend code. Today, the JS ecosystem is rich and mature with many libraries, frameworks, package managers, bundlers, transpilers, runtimes, engines and IDEs.

Technically, JavaScript is a loosely typed, multi-paradigm, interpreted high-level language that conforms to the ECMAScript specifications.

Discussion

  • What's unique about JavaScript that one would want to learn it?
    JavaScript is being used in various application areas. Source: Voss 2018.
    JavaScript is being used in various application areas. Source: Voss 2018.

    JavaScript is the language of web. It's one of the three core technologies of the World Wide Web along with HTML and CSS. JS enables dynamic effects and interactions on webpages. Hence it's become an essential part of web applications. Static web pages are almost obsolete nowadays.

    With the advent of NodeJS, JS was quickly adopted for server-side scripting. JS can be used for both frontend (client-side) and backend (server-side) programming of web apps. A developer therefore needs to learn only one language. This is particularly important when there's a demand for fullstack (frontend + backend) developers.

    JavaScript is no longer limited to just client-side code. It's being used for both client-side and server-side code, in mobile devices, for IoT applications, desktop applications and more.

    The importance of JavaScript is also highlighted by this quote from Eric Elliott,

    Software is eating the world, the web is eating software, and JavaScript rules the web.
  • How does JavaScript work on the web?
    JavaScript introduction and use cases. Source: WinningWP 2018.

    JavaScript code can be embedded into HTML files or stored in separate *.js files that can be referenced from HTML files. When browsers encounter the JS code, they will parse it and execute it on the fly. JavaScript is an interpreted language, meaning that it's not compiled in advance to machine code.

    By mid-2000s, AJAX became a common approach to use JS more effectively for richer user experience. With AJAX, user interactivity is continued while new content is fetched asynchronously in the background.

    Traditionally, content on the web was served as individual HTML pages and each page had some interactivity enabled via JS and AJAX. In the late 2010s, there was a shift towards building the entire app in JavaScript and updating the contents via AJAX. Such an app is called a Single Page Application (SPA).

    Since we can now run JS on both client and server, this gives us the flexibility to render part of the web page on server and let the client complete the rest. This approach leads to what we call Isomorphic or Universal Application.

  • Is JavaScript related to Java, VBScript, JScript and ECMAScript?

    Java and JavaScript are two different programming languages. The name JavaScript itself was coined in 1995 because of a partnership between Netscape Communications (that invented JavaScript) and Sun Microsystems (that invented Java). Java syntax was introduced into JavaScript. While Java was reserved for enterprise apps, JavaScript was positioned as a web companion to Java. About the same time, Java was also made available within web browsers as applets. Today, Java and JavaScript are both popular languages.

    When Microsoft got into web technology in the 1990s, its Internet Explorer (IE) browser needed an equivalent to what Netscape and Sun had with JavaScript and Java. JScript and VBScript are therefore Microsoft scripting languages. JScript is said to be very similar to JavaScript and enabled dynamic content on IE.

    This fragmentation meant that a web page written for Netscape would not work well on IE, and vice versa. There was no standard and JavaScript was evolving far too quickly. In this context, ECMAScript was born in 1997 as a standard for JavaScript.

  • Why is JavaScript called a multi-paradigm language?

    JavaScript is an object-oriented language. It has objects, with properties and methods. Functions are first-class objects that can be passed into other functions, returned from functions, bound to variables or even thrown as exceptions. However, object inheritance is not done in the classical manner of C++ or Java. It uses prototypal inheritance, inspired by Self language. This makes the language flexible. A prototype can be cloned and modified to make a new prototype without affecting all child instances. It's also possible to do classical inheritance in JavaScript.

    Though being object-oriented, there are no classes in JavaScript but constructors are available. Object systems can be built using either inheritance or aggregation. Variables and methods can be private, public or privileged to the object.

    Eric Elliott explains why he regards prototypal inheritance and functional programming as two pillars of JavaScript. Closures provide encapsulation and the means to avoid side effects. Thus, understanding closures is important for functional programming in JavaScript. JavaScript can also be used in an imperative style using if-else conditions, for loops, and module-level variables.

    Thus, JavaScript is multi-paradigm because it's object-oriented, functional and imperative.

  • What are some important features of JavaScript that I should learn?
    Useful modern JS syntax explained. Source: Fireship 2018.

    Beginners should first learn the basics of JS, in addition of HTML and CSS. The Modern JavaScript Tutorial is great place to start learning.

    Some useful things to learn include effective console logging, destructuring, template literals, and spread syntax. Explicit loops can be avoided by taking the functional programming approach with reduce, map and filter methods. For asynchronous programming, you should learn about Promises and adopt the modern async/await syntax.

    Get a good understanding of closures and partial application. Use the arrow syntax of ES6 for more compact and readable code. Other useful ES6 features to learn are const, multiline strings, default parameters, and module import/export.

  • What's the difference between a JS engine and a JS runtime?
    JS runtime containing the engine. Source: Uttariello 2018.
    JS runtime containing the engine. Source: Uttariello 2018.

    A JavaScript Engine parses JS code and converts it to a form that the machine can execute. It contains the memory heap and the call stack. Examples include Google's V8 Engine (Chrome), SpiderMonkey (Firefox), JScript (IE), and Chakra (Microsoft Edge).

    A JavaScript Runtime is an environment in which JS runs. Web browsers are environments. Node.js provides a runtime for server-side execution. In a typical web app, the program may access the DOM, make AJAX calls, and call Web APIs. These are not part of the language. They are provided by the browser as part of the JS runtime.

    Another important distinction is that the engine does synchronous processing. It can process only one function at a time via the call stack. On the other hand, the runtime can maintain a number of items in the callback queue. A new item can be added anytime to the queue and processed later when the call stack is free. Thus, the runtime enables asynchronous processing.

  • As a beginner, what should I know about the JavaScript ecosystem?

    Consider the following:

    • Frameworks: These simplify development by providing a structure, including design patterns such as MVC. Examples include React, Angular, Vue, Backbone and Ember.
    • Libraries: Many developers release their code as JS packages/modules/libraries so that others can reuse them. In December 2018, about 836,000 libraries were available on NPM.
    • Package Managers: Developers use them to install and manage packages they require for their projects. Examples include NPM and Yarn. Packages are downloaded from known repositories on the web.
    • Linters: These catch errors or bad practices early. Examples include Prettier and ESLint.
    • Module Bundlers: A project may have many dependent JS packages. Bundlers combine them into far fewer files so that these can be delivered more efficiently to browsers and other runtimes. Examples include Webpack and Browserify.
    • Task Runners: These enable automated development workflows such as minifying or concatenating files. Examples include Gulp and Grunt.
    • Transpilers: Developers can write code in other languages (CoffeeScript, TypeScript) and then convert them into JavaScript. Another use case is to write in modern ES6 syntax and transpile to syntax supported by older browsers. Examples include Babel.
  • What are some concerns that developers have about JavaScript?

    Developers coming from languages such as C++ and Java, find JavaScript annoying in many ways: automatic semicolon insertion, automatic type coercion (loose typing), lack of block scoping, lack of classes, unusual (prototypal) inheritance. Another quirk is type mismatches between objects that are otherwise similar: "Hello world" of type "string" versus new String("Hello world") of type "object". Some of these are attributed to the hurried development of JavaScript.

    Because there are many JS frameworks, libraries and tools, the choice of which one to adopt can be daunting. In one example, it was shown that Vue.js was hardcoded to rely on yarn and this broke the workflow because the developer had only installed npm. It's also possible in the JS world to have a small project of just few lines of code download lots of dependencies. An average web app has over 1000 modules.

    Because the language was designed in a hurry, it has design errors. Developers can write bad JS code. This prompted Douglas Crockford to write his now famous book titled JavaScript: The Good Parts.

Milestones

1993

In the early days, the history of JavaScript is somewhat tied to the history of web browsers. Among the early browsers are WorldWideWeb, ViolaWWW, Erwise and Midas. In 1993, NCSA Mosaic appears on the scene. It supports multiple networking protocols and is able to display images inline. It becomes popular and people begin to see the potential of the web. There's no JavaScript at this point and content shown on browsers are all static.

1994

Marc Andreessen, one of the creators of Mosaic, has the vision that the web should be lot more dynamic with animations and interactions. He starts Netscape Communications.

May
1995

At Netscape, the idea is to invent a dynamic scripting language for the browser that would have simple syntax and appeal to non-programmers. Brendan Eich is contracted by Netscape to develop "Scheme for the browser", Scheme being a language with simple syntax, dynamic and powerful. Thus is born Mocha, which becomes part of Netscape Communicator browser in May 1995.

Nov
1995

With competition from Microsoft and its Internet Explorer, Netscape partners with Sun Microsystems to make Java available in the browser. At the same time, they recognize that Java is a beast not suited for the browser. Together they announce JavaScript, which they describe as "an open, cross-platform object-scripting language designed for creating and customizing applications on the Net." To ride on the hype surrounding Java, JavaScript is positioned as a companion to Java, even based on Java. JS becomes available in beta version of Netscape Navigator 2.0. Mocha becomes JS but less Scheme-like and more Java-like.

1996

Microsoft introduces JScript, it's alternative to JavaScript. It's included in Internet Explorer 3.0. JScript can also be used for server-side scripting in Internet Information Services (IIS) web server. Server-side scripting is also possible with JavaScript in Netscape Enterprise Server. However, only in 2009 does Node.js make server-side scripting with JS popular.

Jun
1997

ECMA organization publishes ECMAScript, documented as the ECMA-262 standard. Web pages that conform to ECMAScript are guaranteed to work on all browsers, provided browsers support the standard. JavaScript conforms to ECMA, while providing additional features. ActionScript and JScript are other well-known implementations of ECMAScript.

2005

Jesse James Garrett of Adaptive Path mentions a new term, AJAX, which expands to Asynchronous JavaScript + XML. AJAX eliminates the need to reload an entire webpage to update small details. It gives developers more flexibility to make their web apps more responsive and interactive. Many projects in Google already use AJAX. AJAX goes on to change the way web interactions are built with JS.

2009

As a standard library, CommonJS is founded, mainly for JS development outside the browser. This include the use of JS for web server, desktop and command line applications. This is also the year when NodeJS is released so that JS can be used for server-side scripting.

Jun
2015
History of ECMAScript up to ES6. Source: French-Owen 2016.
History of ECMAScript up to ES6. Source: French-Owen 2016.

As a standard, ECMAScript 2015 (ES2015 or ES6) is released. ES6 is seen as a major update to the core language specifications, which hadn't changed since ES5 of 2009. ES6 is expected to make JS coding easier, although it may take a while for browsers to support it fully.

2017
JS dominates on GitHub in terms of pull requests. Source: Putano 2017.
JS dominates on GitHub in terms of pull requests. Source: Putano 2017.

JavaScript has highest number of pull requests on GitHub, an open site for sharing code, particularly on open source projects. A pull request is a way for developers to submit their contributions to a project.

2018

With more than 9.7 million developers using JavaScript worldwide, JS is declared as the most popular programming language. This is based on a survey of 21,700 developers from 169 countries. JS has 2.4 million more developers than the next popular language. However, some predict that JS may decline due to WebAssembly. For interactions on the web, JS has been the only language of choice so far. With WebAssembly, developers can potentially migrate to other languages.

Mar
2018

TensorFlow project releases TensorFlow.js to train and run Machine Learning (ML) models within a web browser. This becomes an easy path for JS developers to get started with ML. This is just one example to illustrate the versatility of JS.

Sample Code

  • let message = 'Writing JS Code is so easy!';
     
    console.log('Hello Devopedia!', message);
     

References

  1. Ahmed, Kamran. 2019. "kamranahmedse/developer-roadmap." GitHub, January 26. Accessed 2019-02-03.
  2. Aston, Ben. 2015. "A brief history of JavaScript." Medium, April 01. Accessed 2019-02-03.
  3. Berners-Lee, Tim. 2019. "What were the first WWW browsers?" FAQ, W3.org. Accessed 2019-02-03.
  4. CNet. 1995. "Netscape and Sun Unveil JavaScript." CNet, November 30. Accessed 2019-02-03.
  5. Chauhan, Shailendra. 2015. "Brief history of node.js and io.js." DotNetTricks, December 31. Accessed 2019-02-03.
  6. Crockford, Douglas. 2019a. "Classical Inheritance in JavaScript." Accessed 2019-02-03.
  7. Crockford, Douglas. 2019b. "Private Members in JavaScript." Accessed 2019-02-03.
  8. Elliott, Eric. 2014. "JavaScript Training Sucks." JavaScript Scene, on Medium, December 30. Accessed 2019-02-03.
  9. Fireship. 2018. "JavaScript Pro Tips - Code This, NOT That." Fireship - AngularFirebase, on YouTube, September 27. Accessed 2019-02-03.
  10. French-Owen, Calvin. 2016. "The Deep Roots of Javascript Fatigue." Blog, Segment, March 15. Accessed 2019-02-03.
  11. Garrett, Jesse James. 2005. "Ajax: A New Approach to Web Applications." Adaptive Path, February 18. Accessed 2019-02-03.
  12. Gordon, Josh and Sara Robinson. 2018. "Introducing TensorFlow.js: Machine Learning in Javascript." TensorFlow, on Medium, March 30. Accessed 2019-02-03.
  13. Harris, Richard. 2018. "9.7M developers use JavaScript." App Developer Magazine, April 09. Accessed 2019-02-03.
  14. Hawes, Chris. 2019. "Why Programmers Hate the JavaScript Ecosystem." YouTube, January 24. Accessed 2019-02-03.
  15. Jackson, Brian. 2018. "100+ Awesome Web Development Tools and Resources." KeyCDN, August 02. Accessed 2019-02-03.
  16. Kolce, James. 2018. "The Anatomy of a Modern JavaScript Application." SitePoint, April 18. Accessed 2019-02-03.
  17. Kowal, Kris. 2009. "CommonJS effort sets JavaScript on path for world domination." Ars Technica, December 01. Accessed 2019-02-03.
  18. Mardan, Azat. 2015. "Top 10 ES6 Features Every Busy JavaScript Developer Must Know." Webapplog, November 10. Accessed 2019-02-04.
  19. Microsoft GitHub. 2019. "Microsoft/ChakraCore." February 01. Accessed 2019-02-03.
  20. Netscape. 1998. "Server-Side JavaScript Guide." Netscape Communications Corporation, December 11. Accessed 2019-02-03.
  21. Novák, Martin. 2018. "8 steps to turn imperative JavaScript class to a functional declarative code." Frontend Weekly, on Medium, March 06. Accessed 2019-02-03.
  22. Peyrott, Sebastián. 2017. "A Brief History of JavaScript." Blog, Auth0, January 16. Accessed 2019-02-03.
  23. Putano, Ben. 2017. "Most Popular and Influential Programming Languages of 2018." Stackify, December 18. Accessed 2019-02-03.
  24. Sengstacke, Peleke. 2016. "JavaScript Transpilers: What They Are & Why We Need Them." Scotch, April 25. Accessed 2019-02-03.
  25. Stanford. 1998. "Overview." In: CS98SI: Introduction to JavaScript, Stanford University. Accessed 2021-03-2021.
  26. SungTheCoder. 2016. "Brief history of JavaScript Modules." Medium, May 13. Accessed 2019-02-03.
  27. Tagliaferri, Lisa. 2017. "How To Add JavaScript to HTML." Tutorial, Digital Ocean, June 30. Accessed 2021-03-2021.
  28. Tjhung, Wilsen. 2018. "ES5 vs. ES6 Syntax." Autotrader & Carsguide Engineering, on Medium, November 08. Accessed 2019-02-03.
  29. Uttariello, Jamie. 2018. "The Javascript Runtime Environment." Medium, April 21. Accessed 2019-02-03.
  30. Vepsäläinen, Juho. 2015. "What are some really cool features of JavaScript?" Quora, July 09. Accessed 2019-02-04.
  31. Voss, Laurie. 2018. "This year in JavaScript: 2018 in review and npm's predictions for 2019." NPM Blog, December 06. Accessed 2019-02-03.
  32. Wikipedia. 2019a. "JavaScript." Wikipedia, January 30. Accessed 2019-02-03.
  33. Wikipedia. 2019b. "Mosaic (web browser)." Wikipedia, January 27. Accessed 2019-02-03.
  34. Wikipedia. 2019c. "Netscape." Wikipedia, February 02. Accessed 2019-02-03.
  35. WinningWP. 2018. "What is JavaScript? What Does It Do, and What Is It Used For?" WinningWP, on YouTube, May 11. Accessed 2021-03-2021.
  36. w3tweaks. 2018. "Best Javascript Frameworks: The top most popular javascript frameworks for Mobile and Web apps." w3tweaks, October 05. Accessed 2019-02-03.

Further Reading

  1. CS50 YouTube. 2017. "JavaScript." CS50, on YouTube, Harvard University, October 25. Accessed 2019-02-03.
  2. Hamedani, Mosh. 2018. "JavaScript Tutorial for Beginners." Programming with Mosh, YouTube, April 23. Accessed 2019-02-03.
  3. Getify GitHub. 2018. "You Don't Know JS (book series)." November 18. Accessed 2019-02-03.
  4. Peyrott, Sebastián. 2017. "A Brief History of JavaScript." Blog, Auth0, January 16. Accessed 2019-02-03.
  5. Mardan, Azat. 2015. "Top 10 ES6 Features Every Busy JavaScript Developer Must Know." Webapplog, November 10. Accessed 2019-02-04.

Article Stats

Author-wise Stats for Article Edits

Author
No. of Edits
No. of Chats
DevCoins
7
3
1755
4
2
880
1
0
7
1
0
6
2249
Words
7
Likes
5922
Hits

Cite As

Devopedia. 2022. "JavaScript." Version 13, February 15. Accessed 2024-06-26. https://devopedia.org/javascript
Contributed by
4 authors


Last updated on
2022-02-15 11:52:35
  • JavaScript Data Types
  • JavaScript Frameworks
  • JavaScript Libraries
  • Object-Oriented Programming in JavaScript
  • Asynchronous Programming in JavaScript
  • Node.js