What is VanillaJS?

Questions : What is VanillaJS?

I have one simple question, that got stuck in my mind for a few days: What is VanillaJS? Some people refer to it as a framework, you can download a library from the official pages.

But when I check some examples or TodoMVC, they just use classic raw JavaScript functions without even including the library from the official pages or anything. Also the link “Docs” on the official webpage leads to the Mozilla specification of JavaScript.

My question is: Is VanillaJS raw JavaScript? And if yes, why people refer to it as “framework” when all you need is a browser without any special included scripts?

I am sorry for a probably stupid question but I have no idea what people are talking about when they say “VanillaJS”.

Total Answers: 9 Answers 9

Popular Answers:

  1. This is VanillaJS (unmodified):

    // VanillaJS v1.0 // Released into the Public Domain // Your code goes here: 

    As you can see, it’s not really a framework or a library. It’s just a running gag for framework-loving bosses or people who think you NEED to use a JS framework. It means you just use whatever your (for you own sake: non-legacy) browser gives you (using Vanilla JS when working with legacy browsers is a bad idea).

  2. VanillaJS is a term for library/framework free javascript.

    Its sometimes ironically referred to as a library, as a joke for people who could be seen as mindlessly using different frameworks, especially jQuery.

    Some people have gone so far to release this library, usually with an empty or comment-only js file.

  3. The plain and simple answer is yes, VanillaJS === JavaScript, as prescribed by Dr B. Eich.

  4. VanillaJS === JavaScript i.e.VanillaJS is native JavaScript

    Why, Vanilla says it all!!!

    Computer software, and sometimes also other computing-related systems like computer hardware or algorithms, are called vanilla when not customized from their original form, meaning that they are used without any customization or updates applied to them (Refer this article). So Vanilla often refers to pure or plain.

    In the English language Vanilla has a similar meaning, In information technology, vanilla (pronounced vah-NIHL-uh ) is an adjective meaning plain or basic. Or having no special or extra features, ordinary or standard.

    So why name it VanillaJS? As the accepted answer says some bosses want to work with a framework (because it’s more organized and flexible and do all the things we want??) but simply JavaScript will do the job. Yet you need to add a framework somewhere. Use VanillaJS

    Is it a Joke? YES

    Want some fun? Where can you find it, http://vanilla-js.com/ Download and see for yourself!!! It’s 0 bytes uncompressed, 25 bytes gzipped 😀

    Found this pun on internet regarding JS frameworks (Not to condemn the existing JS frameworks though, they’ll make life really easy :)), enter image description here

    Also refer,

  5. “Vanilla JS” is an expression that got popular after the publishing of a satire website in 2012 (http://vanilla-js.com/). There’s a section covering its story/meaning in this post.

    So why the joke? It kind of came as a modern response to the old school knee-jerk reflex of relying on jQuery and additional JS libraries. With the ECMAScript spec and modern browsers capabilities, the need to bypass plain JS with external libraries to maintain consistency across browsers just isn’t there anymore. Here’s a site that shows you how true this is with concrete examples: http://youmightnotneedjquery.com/

  6. This word, hence, VanillaJS is a just damn joke that changed my life. I had gone to a German company for an interview, I was very poor in JavaScript and CSS, very poor, so the Interviewer said to me: We’re working here with VanillaJs, So you should know this framework.

    Definitely, I understood that I’was rejected, but for one week I seek for VanillaJS, After all, I found THIS LINK.

    What I am just was because of that joke.

    VanillaJS === plain `JavaScript` 
  7. There’s no difference at all, VanillaJS is just a way to refer to native (non-extended and standards-based) JavaScript. Generally speaking it’s a term of contrast when using libraries and frameworks like jQuery and React. Website www.vanilla-js.com lays emphasis on it as a joke, by talking ’bout VanillaJS as though it were a fast, lightweight, and cross-platform framework. That muddies the waters! Thus, it can be a little philosophical question: “how many things do I compile to Vanilla JavaScript without being VanillaJS themselves?” So, a mere guideline for that is: if you can write the code and run it in any current web-browser without additional tools or so called compile steps, it might be VanillaJS.

  8.  function countArray(originalArray) { var compressed = []; // make a copy of the input array var copyArray = originalArray.slice(0); // first loop goes over every element for (var i = 0; i < originalArray.length; i++) { var count = 0; // loop over every element in the copy and see if it's the same for (var w = 0; w < copyArray.length; w++) { if (originalArray[i] == copyArray[w]) { // increase amount of times duplicate is found count++; // sets item to undefined delete copyArray[w]; } } if (count > 0) { var a = new Object(); a.value = originalArray[i]; a.count = count; compressed.push(a); } } return compressed; }; // It should go something like this: var testArray = new Array("dog", "dog", "cat", "buffalo", "wolf", "cat", "tiger", "cat"); var newArray = countArray(testArray); console.log(newArray);

  9. use Array.prototype.includes for example:

    const fruits = ['coconut', 'banana', 'apple'] const doesFruitsHaveCoconut = fruits.includes('coconut')// true console.log(doesFruitsHaveCoconut)

    maybe read this documentation from MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

  10. Here’s how Prototype does it:

    /** * Array#indexOf(item[, offset = 0]) -> Number * - item (?): A value that may or may not be in the array. * - offset (Number): The number of initial items to skip before beginning the * search. * * Returns the position of the first occurrence of `item` within the array &mdash; or * `-1` if `item` doesn't exist in the array. **/ function indexOf(item, i) { i || (i = 0); var length = this.length; if (i < 0) i = length + i; for (; i < length; i++) if (this[i] === item) return i; return -1; } 

    Also see here for how they hook it up.

  11. By no means the best, but I was just getting creative and adding to the repertoire.

    Do not use this

    Object.defineProperty(Array.prototype, 'exists', { value: function(element, index) { var index = index || 0 return index === this.length ? -1 : this[index] === element ? index : this.exists(element, ++index) } }) // Outputs 1 console.log(['one', 'two'].exists('two')); // Outputs -1 console.log(['one', 'two'].exists('three')); console.log(['one', 'two', 'three', 'four'].exists('four'));

  12. var arrayContains = function(object) { return (serverList.filter(function(currentObject) { if (currentObject === object) { return currentObject } else { return false; } }).length > 0) ? true : false }
    1. Either use Array.indexOf(Object).
    2. With ECMA 7 one can use the Array.includes(Object).
    3. With ECMA 6 you can use Array.find(FunctionName) where FunctionName is a user defined function to search for the object in the array.

      Hope this helps!

  13. Use indexOf()

    You can use the indexOf() method to check whether a given value or element exists in an array or not. The indexOf() method returns the index of the element inside the array if it is found, and returns -1 if it not found. Let’s take a look at the following example:

    var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"]; var a = "Mango"; checkArray(a, fruits); function checkArray(a, fruits) { // Check if a value exists in the fruits array if (fruits.indexOf(a) !== -1) { return document.write("true"); } else { return document.write("false"); } }

    Use include() Method

    ES6 has introduced the includes() method to perform this task very easily. But, this method returns only true or false instead of index number:

    var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"]; alert(fruits.includes("Banana")); // Outputs: true alert(fruits.includes("Coconut")); // Outputs: false alert(fruits.includes("Orange")); // Outputs: true alert(fruits.includes("Cherry")); // Outputs: false

    For further reference checkout here

  14. Use:

    Array.prototype.contains = function(x){ var retVal = -1; // x is a primitive type if(["string","number"].indexOf(typeof x)>=0 ){ retVal = this.indexOf(x);} // x is a function else if(typeof x =="function") for(var ix in this){ if((this[ix]+"")==(x+"")) retVal = ix; } //x is an object... else { var sx=JSON.stringify(x); for(var ix in this){ if(typeof this[ix] =="object" && JSON.stringify(this[ix])==sx) retVal = ix; } } //Return False if -1 else number if numeric otherwise string return (retVal === -1)?false : ( isNaN(+retVal) ? retVal : +retVal); } 

    I know it’s not the best way to go, but since there is no native IComparable way to interact between objects, I guess this is as close as you can get to compare two entities in an array. Also, extending Array object might not be a wise thing to do, but sometimes it’s OK (if you are aware of it and the trade-off).

  15. As others have mentioned you can use Array.indexOf, but it isn’t available in all browsers. Here’s the code from https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/indexOf to make it work the same in older browsers.

    indexOf is a recent addition to the ECMA-262 standard; as such it may not be present in all browsers. You can work around this by inserting the following code at the beginning of your scripts, allowing use of indexOf in implementations which do not natively support it. This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming Object, TypeError, Number, Math.floor, Math.abs, and Math.max have their original value.

    if (!Array.prototype.indexOf) { Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) { "use strict"; if (this == null) { throw new TypeError(); } var t = Object(this); var len = t.length >>> 0; if (len === 0) { return -1; } var n = 0; if (arguments.length > 1) { n = Number(arguments[1]); if (n != n) { // shortcut for verifying if it's NaN n = 0; } else if (n != 0 && n != Infinity && n != -Infinity) { n = (n > 0 || -1) * Math.floor(Math.abs(n)); } } if (n >= len) { return -1; } var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0); for (; k < len; k++) { if (k in t && t[k] === searchElement) { return k; } } return -1; } } 
  16. Or this solution:

    Array.prototype.includes = function (object) { return !!+~this.indexOf(object); }; 
  17. Using idnexOf() it is a good solution, but you should hide embedded implementation indexOf() function which returns -1 with ~ operator:

    function include(arr,obj) { return !!(~arr.indexOf(obj)); } 
  18. I was working on a project that I needed a functionality like python set which removes all duplicates values and returns a new list, so I wrote this function maybe useful to someone

    function set(arr) { var res = []; for (var i = 0; i < arr.length; i++) { if (res.indexOf(arr[i]) === -1) { res.push(arr[i]); } } return res; } 
  19. If you’re working with ES6 You can use a set:

    function arrayHas( array, element ) { const s = new Set(array); return s.has(element) } 

    This should be more performant than just about any other method

  20. I recommended to use underscore library because its return the value and its supported for all browsers.


     var findValue = _.find(array, function(item) { return item.id == obj.id; }); 
  21. let array = [1, 2, 3, 4, {"key": "value"}]; array.some((element) => JSON.stringify(element) === JSON.stringify({"key": "value"})) // true array.some((element) => JSON.stringify(element) === JSON.stringify({})) // true
  22. Adding a unique item to a another list

    searchResults: [ { name: 'Hello', artist: 'Selana', album: 'Riga', id: 1, }, { name: 'Hello;s', artist: 'Selana G', album: 'Riga1', id: 2, }, { name: 'Hello2', artist: 'Selana', album: 'Riga11', id: 3, } ], playlistTracks: [ { name: 'Hello', artist: 'Mamunuus', album: 'Riga', id: 4, }, { name: 'Hello;s', artist: 'Mamunuus G', album: 'Riga1', id: 2, }, { name: 'Hello2', artist: 'Mamunuus New', album: 'Riga11', id: 3, } ], playlistName: "New PlayListTrack", }; } // Adding an unique track in the playList addTrack = track => { if(playlistTracks.find(savedTrack => savedTrack.id === track.id)) { return; } playlistTracks.push(track); this.setState({ playlistTracks }) }; 
  23. This may be a detailed and easy solution.

    //plain array var arr = ['a', 'b', 'c']; var check = arr.includes('a'); console.log(check); //returns true if (check) { // value exists in array //write some codes } // array with objects var arr = [ {x:'a', y:'b'}, {x:'p', y:'q'} ]; // if you want to check if x:'p' exists in arr var check = arr.filter(function (elm){ if (elm.x == 'p') { return elm; // returns length = 1 (object exists in array) } }); // or y:'q' exists in arr var check = arr.filter(function (elm){ if (elm.y == 'q') { return elm; // returns length = 1 (object exists in array) } }); // if you want to check, if the entire object {x:'p', y:'q'} exists in arr var check = arr.filter(function (elm){ if (elm.x == 'p' && elm.y == 'q') { return elm; // returns length = 1 (object exists in array) } }); // in all cases console.log(check.length); // returns 1 if (check.length > 0) { // returns true // object exists in array //write some codes } 
  24. Object.keys(o).some(k => o.country.toLowerCase().includes(string.toLowerCase())));

Tasg: javascript,

Answer Link
  • Unable to run NoraUI mvn verify goal
  • Unable to run my app on emulator in VS Code
  • Unable to run multiple instances of libVLC(MobileVLCKit) in IOS via flutter framework
  • Unable to run make on griddb source on ubuntu 20.04 (building from source)
  • Unable to run latexindent macOS Monterey 12.0.1
  • Unable to run kotlinc-native command
  • Unable to run JUnit Test… Java.lang.ExceptionInInitializerError (Android Studio)
  • Unable to run java with -Xmx > 966m
  • Unable to run ionic cap run android from wsl2 inorder to start android emulator
  • Unable to run Intel HAXM installer: Cannot start process, the working directory does not exist
  • fs
  • Unable to run Google Analytics sample code
  • unable to run flutter run after upgarding to flutter 2.8.0 from 2.5.3
  • Unable to run Django with PostgreSQL in Docker
  • Unable to Run Container Using testcontainers
  • Unable to run ClojureScript Hello World program, Error building classpath. Error reading edn.
  • unable to run client command for apache karaf 4.3.3 through remote server
  • Unable to run c program 2nd time using eclipse
  • unable to run c++ in visual studio code on m1 chipset
  • Unable to run Android Instrumented Tests
  • Unable to run adb, check your Android SDK installation and ANDROID_SDK_ROOT environment variable: …AndroidSdkplatform-toolsadb.exe
  • Unable to run a singlespecific .spec.ts file through angular cli using ng test –include option
  • Unable to run a Mango query
  • Unable to return response back to view in laravel from package
  • Unable to return object reference in std::optional
  • Unable to return NULL in a function that expects an integer return type
  • Unable to return correct change in JavaScript Cash Register
  • Unable to retrieve version information from Elasticsearch nodes. Request timed out
  • Unable to retrieve values from Axios Response data
  • Unable to retrieve dotenv JWT secret Error: secretOrPrivateKey must have a value
  • Unable to resolve your shell environment
  • Unable to resolve token for FCM while implementing Push notification for Xamarin
  • Unable to resolve the request yii
  • Unable to resolve service for type Swashbuckle.AspNetCore.Swagger.ISwaggerProvider
  • Unable to resolve service for type Microsoft.EntityFrameworkCore.Diagnostics.IDiagnosticsLogger