DEV Community: Rahul Barwal

Variable declarations in JS

Rahul Barwal — Wed, 01 Dec 2021 05:52:40 +0000

there are 3 explicit ways a variable can be declared in javascript.

var
let
const

var

var is the grandfather of declarations in js. important points to know about var:

var is hoisted(declaration is brought to the top of function).
in below example b is available in line#3(albeit undefined) even though it gets declared in line#4

function myfn() {
    var a =20;
    console.log(a, b); // 20, undefined
    var b= 10;
    console.log(a, b); // 20, 10 
}

var variables are bound to enclosing function scope(or global).

tricky case

take a look at following case

function fn1() {
    function inner(b) {
      var i=2;
      console.log(b+i);
    }
    for(var i=0; i<10; i++) {
       inner(i);
    }
}

putting your declarations closest to the usage makes sence. but here reusing i will make the for loop run infinitely.

a simple fix would be to declare i insinde inner with var(as this time it will be scoped to inner and will not spoil enclosing fn1s scope)

function inner(b) {
    var i=2;
    console.log(b+i);
}

let & const

in es6 both let and const were introduced to add block scoping to js.

let introduces a new block scope in whichever block(if, for or explicit {} it is declared.

function myfn() {
    if(true) {
        let a =20;
    }
    console.log(a); // reference error
}

for

function myfn() {
    for(let i=0; i<5; i++) {
    ....
    }
    console.log(i); // reference error
}

explicit block {}

function myfn() {

    { 
        let b= 10;
        ....
    }
    console.log(b); // reference error
}

all above logic is also applicable for const. main difference is with assignment.
- what this means is that, once a variable is declared as const you can not change it.
```
const a = 1;
a = 2; // error
```
- that does not mean that variables themselves can not be updated. if variable type is of array or object you can change the properties.. but can't update the variable assignment.
```
const a = [];
a.push(1); // valid
a = 1; // invalid. error.

const b = {};
b.val1 = 1; 
b.val2 = 2; 
b = {} //invalid. error
```

conclusion

when using var in for loops with closures and can lead to unexpected(weired) behaviors. that in iteself is a subject for another post.
let/const are not replacement for var. all have their usecases and one should be aware about when to use which.

Svelte + Typescript + Tailwind

Rahul Barwal — Wed, 07 Jul 2021 05:54:34 +0000

Coming from the Angular world back to Javascript can sometimes feel lackluster. The power of types is too much to resist. Lately, I've been playing around with React and Svelte. To be fair, I am liking Svelte a lot for a small single-page website. Combining these two was a must for me, So here is a post penning down the steps you will need to make your Svelte project run on TypeScript.
Tailwind is a superb CSS framework that can be powerful in bringing your ideas to life in a responsive way 😋.

Installation

Add Svelte project

Clone the svelte repo to your directory with:

npx degit sveltejs/template your-project

Convert it to Typescript

Now change the current directory to your-project and run this command to convert your current JavaScript project to TypeScript, and install packages

cd your-project
node .\scripts\setupTypeScript.js
npm i

Add Tailwind

Install required packages by running the command:

npm i tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

To add tailwind.config.js to your project:

npx tailwindcss init  tailwind.config.js

Setup for your first run

tailwind.config.js

Head over to tailwind.config.js file and add this future property at bottom

future: {
    purgeLayersByDefault: true,
    removeDeprecatedGapUtilities: true,
},

To purge unnecessary classes in production modify purge property to:

purge: {
    content: ["./src/**/*.svelte"],
    enabled: isProduction, // disable purge in dev
},

You won't want purging to be enabled in dev mode, to identify we can use the ROLLUP_WATCH flag.

const isProduction = !process.env.ROLLUP_WATCH;

rollup.config.js

To enable tailwindss during dev and production builds update preprocess property to

preprocess: sveltePreprocess({
        sourceMap: !production,
        postcss: {
          plugins: [require("tailwindcss"), require("autoprefixer")],
    },
}),

App.svelte

You can add this to your App.svelte or optionally this can also be done by creating a new svelte component and then importing it in App.svelte

<style global lang="postcss">
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

Now you're ready to rock🤘, run your Svelte project with:

npm run dev