With statement in JavaScript

-

JavaScript 'with statement' is a simplified way to access object properties as variables.

Take for instance;

const dog = "puppy"
const mascots = {
    'tux': "tuxedo",
    'cow': 'cow'
}

with(mascots) {
    console.log(tux)
    // tuxedo
    console.log(cow)
    // cow
    console.log(dog)
    // puppy
}

properties of mascots are converted to variables accessible within the with block 'dog' is not part of mascots and as a fallback, dog global is returned.

At the time of writing this post with statement is discouraged.

It's not allowed in 'safe mode'

With the above sample you can do the same thing using destructureing operator

const {cow, dog, tux} = mascots

console.log(tux)
// tuxedo
console.log(cow)
// cow
console.log(dog)
// puppy

Comments

Post a Comment

Popular posts from this blog

Js13k game jam multiplayer wack'a mole game concept

-
--- due date not met yet I'll share my idea of the classic game wack a mole for js13k so space is crucial. I'm using my micro game engine node-craters.js for nodejs my first plan is split the engine take out the loop and update leave the task to the server , using socket.io for communicating information back and forth when the user opens the game index.html socket.io is loaded later the game.js file containing rendering and canvas. rendering basically nothing much and initial loading text is displayed below there's some functions for socket communication , once the page is loaded the game emits a start command telling the server am ready let's play with an optional argument room id vital for playing a game with a friend. the server gets the start command and additionally checks if there's a room id so that the user or player joins an existing match or else  create a new room and emit the users details to tell them their id and room id , if there enough peo...
Read more

How to change sound volume using webAudio api gain property

-
A quick function to adjust html5 web audio gain value or "audio volume" sound gain value is controlled by creating a gain node and setting it's gain value 0-1 where 0 is the lowest value 1 is the maximum gain value  let sound = function sound(url, params) {     // params     let loop = params.loop;     // make a context     let audioContext = new (window.AudioContext || window.webkitAudioContext)();     let source = audioContext.createBufferSource();     let gainNode = audioContext.createGain()         gainNode.gain.value = 0.05 // sound percentage     let request = new XMLHttpRequest(); request.open('GET', url, true);     request.responseType = 'arraybuffer';     request.onload = function() {             audioContext.decodeAudioData(request.response, function(buffer) {             source.buffer = buffer; ...
Read more

How to use canvas context rect method for drawing rectangles

-
canvas context rect method does as it says. It's used for drawing a rectangle on a canvas context Parameters context.rect(positionX, positionY, Width, Height) PositionX specifies the x coordinate at which the rectangle should be drawn at on the context PositionY specifies the y coordinate at which the rectangle should be drawn at on the context Width specifies the width of the rectangle Height specifies the height of the rectangle Stroking and filling the rectangle In order for the rectangle to be actually visible you have to either stroke it or fill it with a color. Stroke Stroking a rectangle means to draw a line that joins all of it's vertices To specify the fill color you should set it and call stroke to draw context.strokeStyle = "#colors" context.stroke() Fill Similar to srokings filling a rectangle means to paint it's inner bounding box with a specified color context.fillStyle = "#colors" context.fill() Example context.rect...
Read more

JavaScript var const and let

-
Signification and let are new JavaScript methods of declaring a variables on modern browser's you don't need to enable strict mode to make use of const, and let What's the difference between var , let and const Immutability when you declare a variable using const its value is immutable ie you can't simply reassign the variable with another value neither can you declare const variables as const variable, another; because it's pointless afterall scope of this let variable decelerations are block scoped therefore if used in an if statement or in a function its value is scoped within that block
Read more

How to use fetch api submit an html form

-
Fetch api allows asynchronous means of reading files and a more simplified way of making http requests in JavaScript. How to submit an existing html form using fetch api; Assuming you have html source code with a form and some input fields; <form id="form" action="./submit" method="post" onsubmit="handle(event)"> <input name="query"> <button>     submit </button> </form> You can pass an instance of a dom form to formData constructor as the first parameter; const handle = function(event) {     event.preventDefault()     const data = new formData(event.target) fetch('//localhost/api/post', {     method: 'POST',     body: data }) } Fetch api returns a new pending promise to process the response you will need to await asynchronous process once ready to consume parse it as follows; .then(response => response.json()) .then(response => console.log(response))
Read more