How to use Array.fill() to your fill. We have seen examples of how to use Array.fill() to quickly fill data in an array. But, can we do more? Yes..! You can generate array with sequential numbers. Use Array.fill() to line up your number array in sequence. const nums = new Array(10).fill().map((val, index) => index + 1); console.log(nums); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] Note technically an array.fill(), but you get it :)
How can we use our beloved bubble sort in Javascript? We have seen examples of how to sort an array and sorting with multiple attributes. The easiest way is to sort an array is to just use Array.sort(). But that alone will not show you the complexity that you want to show in your program (for e.g. for your next college thesis work that requires you to write minimum 100 pages of code). ...
Let us see how to execute a specified function only once in the life time of the program. The Simple Way The easiest way is to use a global variable and remember the function execution. We can then ignore all future invocations. let saidHello = false; function sayHello() { console.log("hello world"); saidHello = true; } function helloOnce() { if (!saidHello) sayHello(); } helloOnce(); // hello world helloOnce(); // nothing helloOnce(); The Reusable Way We can apply concepts similar to our debounce utility to execute a function once and only one time. ...
Debouncing a function gives us a way to wait for input to stop and only then trigger a set of actions. This is particularly useful when we have to call a function only when user input is complete (or there is a gap in typing that we can utilise for processing). Debounce avoids sending multiple requests that load the client as well as server with needless processing. We have previously seen how debounce can be done using a simple timeout. ...
Let us create a dead simple calculator using Vue. Create basic structure As it was earlier, the basic structure just has two files - index.html and main.js. <!-- index.html --> <html> <body> <div id="app"> <h1>Lé Calculator</h1> <p> <input type="string" v-model="inputExpr" placeholder="Enter expression" style="width:80%;height:30px" /> </p> <p>Result:</p> <p>{{ result }}</p> </div> <script src="https://unpkg.com/vue"></script> <script src="./main.js"></script> </body> </html> We have followed a few fundamental principles to create two elements and bind them to Vue variables - nothing new. ...
Let us create a small example to-do app using Vue from CDN. There is not going to be any backend for this application. Create basic structure The basic structure just has two files - index.html and main.js. <!-- index.html --> <html> <body> <div id="app"> <h5>Hello, {{ name }}</h5> <h1>Your To Dos</h1> </div> <script src="https://unpkg.com/vue"></script> <script src="./main.js"></script> </body> </html> Start playing around with Vue in main.js. console.log("hello world"); new Vue({ el: "#app", data() { return { name: "World!" }; } }); Above code is enough to make the application “usable”. Open index.html in your favourite browser that starts with the word for 🔥. ...
There are multiple ways of using VueJS - which should you use? VueJS is flexible and powerful - not a combination that you often see together. You can initiate and use Vue in more than one way in your app. Use in package with a build cycle This should be your preferred way of using Vue. First install Vue CLI globally - npm i -g @vue/cli The above command will install Vue CLI globally in your computer (in Windows - it is in C:\Users\<user>\AppData\Roaming\npm\). ...
How do you return anything from async functions? How do you receive what is returned from async functions? Previously we have seen how return works in Javascript. I typically write functions that return at least a true or false value. function printThis(statement) { console.log(statement); return true; } const ret = printThis("hello world"); console.log(ret); /* output hello world true */ If the function described above is async - async function printThis(statement) { console.log(statement); return true; } const ret = printThis("hello world"); console.log(ret); /* output hello world Promise { true } */ If you are interested in the return value from an async function, just wait till the promise resolves. Use then or wrap function in await. ...
Coercions are useful and almost intuitive, but beware of pitfalls. Consider below block of code - const x = 42; Numbers greater than 0 and not undefined are generally considered truthy. So, following is understandable - if (x) console.log("found the answer"); // found the answer But, you will be surprised if you do this - if (x == true) console.log("found the answer"); // nothing This seems counterintuitive to the previous test that did not use an explicit true check. The reason is simple. While the first comparison simply checked whether 42 is truthy (it is), the next code block compared the int 42 with Boolean true. ...
I like Array.forEach() and use it whenever I need to iterate through elements. However one needs to be aware of its quirk. const arr = new Array(5); arr[0] = 0; arr[4] = 4; A typical for outputs all elements including those not initialized yet (hold your breath for a moment on the initialized thing). for (let i = 0; i < arr.length; i++) console.log("for rocks", arr[i]); /* output for rocks 0 for rocks undefined for rocks undefined for rocks undefined for rocks 4 */ Now, repeat the same for forEach. ...