Forem: Rajat_Arya

Sometimes JavaScript is Tricky.

Rajat_Arya — Sat, 30 Jan 2021 19:07:56 +0000

When I was new in Web Development, I faced many difficulties while learning JavaScript, but after regular practice, my views changed.

To be honest, still Javascript changes my perspective, but it also gives me more strength to work hard on it.

I accumulated some questions from the internet and I am sure this will change your views too.

But before going straight to the questions:-

"The Expert in anything was once a beginner"

Q1- What is typeof []

Answer: Object. Actually Array is derived from Object. If you want to check array use Array.isArray(arr)

Q2- What is 2+true

Answer: 3. The plus operator between a number and a boolean or two boolean will convert boolean to number. Hence, true converts to 1 and you get result of 2+1.

Q3- What is '6'+9

Answer: 69. If one of the operands of the plus (+) operator is string it will convert other number or boolean to string and perform a concatenation.

Q4- What's the output?

let a = 0;
console.log(a++);
console.log(++a);
console.log(a);

The postfix unary operator(a++)
First it returns 0 and after that increment a by 1 means now a=1.

The prefix unary operator(++a)
First increment by 1 and then return means now a=2

Answer: 0 2 2

Q5- What's the output?

function myAge(...args) {
  console.log(typeof args);
}

myAge(23);

Answer: Object.The rest parameter (...args) lets us "collect" all remaining arguments into an array. An array is an object, so typeof args returns "object".

Q6- What's the output?

const confusing = { a: 'one', b: 'two', a: 'three' };
console.log(confusing);

Answer: If you have two keys with the same name, the key will be replaced. It will still be in its first position, but with the last specified value.

Q7- What's the output?

for (let i = 1; i < 5; i++) {
  if (i === 3) continue;
  console.log(i);
}

Answer: 1 2 4.The continue statement skips an iteration if a certain condition returns true.

Q8- What's the output?

var a=(2,3,4,5,6,7);
console.log(a);

Answwer:7.The comma operator evaluates each of its operands (from left to right) and returns the value of the last operand.

Q9- What is the value of !'Sleep'?

Answer:False. ! is NOT. If you put ! in front of truthy values, it will return false.

Q10-What the logged output when you click the paragraph?

<div onclick="console.log('div')">
  <p onclick="console.log('p')">
    Click here!
  </p>
</div>

Answer: p div. If we click p, we see two logs: p and div. During event propagation, there are 3 phases: capturing, target, and bubbling. By default, event handlers are executed in the bubbling phase (unless you set useCapture to true). It goes from the deepest nested element outwards.

Q11- What is the output?

const myName = { name: 'Rajat Arya' };

function hello(age) {
  return `${this.name} is ${age}`;
}

console.log(hello.call(myName, 23));
console.log(hello.bind(myName, 23));

Answer: Rajat Arya is 23

function hello(age) {
return ${this.name} is ${age};
}

Explanation:- With both, we can pass the object to which we want the 'this' keyword to refer to. However, .call is also executed immediately!
.bind returns a copy of the function, but with a bound context! It is not executed immediately.

Q12- What's the output?

function think() {
  return (() => 0)();
}

console.log(typeof think());

Answer:number The think function returns the returned value of the immediately invoked function expression (IIFE). This function returned 0, which is type "number".

Q13- What's the output?

const numbers = [1, 2, 3];
numbers[10] = 11;
console.log(numbers);

Answer:When you set a value to an element in an array that exceeds the length of the array, JavaScript creates something called "empty slots". These actually have the value of undefined, but you will see something like:

[1, 2, 3, empty x 7, 11]

Q14-What's the Output?

console.log(typeof typeof 1);

Answer: string. From right typeof 1 returns "number". typeof "number" returns "string"

Q15-What's the Output?

var myName=[...'Rajat'];
console.log(myName)

Answer: ["R","a","j","a","t"]
A string is an iterable. The spread operator maps every character of an iterable to one element.

While Learning HTML,CSS,JAVASCRIPT....

Rajat_Arya — Fri, 29 Jan 2021 12:12:40 +0000

No doubt HTML, CSS, JavaScript is indispensable for Web Development but along with this you should learn and develop these things also which I described in this post.

To put it bluntly, it is difficult for beginners to adopt this habit, but you have to trust me -

"If you do things repeatedly, it soon becomes a habit".

1- Reading Documentation and other Codes

Before going straight to the programming, we should need to look through the Documentation first.

Documentation is helpful to get detailed information about the language and gives us an idea about how we can use it in our program.

You don’t need to read complete documentation, you can take a glance whenever you stuck in your program.

I think the reading habit is essential for developers because the developer has to look for the solution in different articles or from the other developer codes and this will only occur when a person has the consistency to read.

2-Git

Git is a free and open-source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

It is easy to learn, and it’s extremely useful for tracking workflow there is no need to learn all its commands, you can start with a few commands also.

In git where you can put your code file along with the commit, which helps to track your changes on code, you can clone a repository from GitHub to your local computer, add or remove files, pull request, etc.

I will put a link from its official website for you so you can get all the git commands.

Commands

3-Consistent Practice

“Consistent Practice leads to Success”.

Practice makes a man perfect, everyone knows the power of practice.

When you are in your learning journey and you never practice what you learned, sorry bro this will not be going to count for your progress, it just a waste of time.

This is the only thing that can make a vast difference between a Good Developer and an average one.

“Everything is hard Before it is Easy”

To make things easy, you need to practice it every day.

4-Escape From the Tutorial Hell

“Sometimes if you do more than enough without any plan, maybe it does not give you a desirable result” this statement is perfectly suitable when we are new in programming.

What is Tutorial Hell?

When we starting any programming language we looking for a tutorial that can teach us and after completing it we go to another one without any practice, it leads us to nowhere we just trapped in a loop.

Most of the beginners are in the tutorial hell, where they think by just watching more tutorials they become good at that language, but this will not going to happen.

There is only one solution for this, stop after completing the tutorial. Try to make some projects where you can apply most of your knowledge. By making projects on your own you develop a certain mindset on approaching problems.

5- Stackoverflow

Most people would be familiar with the stack overflow, but it is also important for the newbie as well.
Stack Overflow is a question-and-answer site for professional and enthusiast programmers. It has over 50+ Million visitors every month, 51000 registered reputed developers, and over 19 million answers.
It is the most trusted website by developers where people asked their queries and some professional developer answer them.
If you search for an answer to your problem, tons of developers who had faced the same problem as yours have already asked for it… and there is more possibility these answers to that question are on StackOverflow!

Best Gems for beginners.

Rajat_Arya — Sun, 17 Jan 2021 09:53:54 +0000

When we want to learn any new language, the first thing that came to our mind is that " I should find the tutorial on YouTube", and no doubt YouTube is the best free resource to learn.
It's very helpful if you find a good instructor on Youtube because it helps you to understand the basic concept of the technology much better than reading all of them.
I collected Five YouTube channels here that offer both in-depth tutorials and quick tip videos that make it easy to expand your Web Development skills.

1-The Net Ninja

The person behind this wonderful channel is Shaun and he is one of the best full-stack developers on youtube.
His tutorial also helps those who never did any coding in their entire life.
I will definitely recommend everyone to visit and try to learn from him.

Some of his playlist :

HTML & CSS
JavaScript
React.js,Vue.js,Node,js and etc.

2- Traversy Media

The man who has a solution for every problem, he has a large variety of playlists in which he covers mostly the language of Web technology. He also Shares his work experience and being a software developer.

Best Youtube Playlist on Traversary Media :

FullStack React and Django
Python
React.js Project and etc.

3- WebDevSimplified

Open up your notebook when you visit this channel it is a pure tutorial experience.
If you are the kind of person, who likes to take 15-30 minutes a day for professional development, check this channel out.

Best Youtube videos on WebDevSimplified

Real-Time Chat App
AI Face Detection using Js
Design Photoshop Clone etc.

4-Dev Ed

This youtube channel covers those problems that we face in the development of any website like making a logo, small animation, freelancing, photoshop, etc. He has a very interesting playlist that you should check out.

Best YouTube videos on DevEd

Figma Tutorial
Animation using Vanilla Javascript
Python Tutorial

5-FreeCodeCamp

It is the most popular youtube channel which has a tutorial on most of the programming languages, here you can find the complete website making, App development as well as machine learning tutorials.
This channel provides tutorials on the topic like HTML, CSS, jQuery, JavaScripts, React.js, SQL, and Ruby, etc.

Best Youtube Playlist of FreeCodeCamp

DevOps
Machine Learning
Game Development and etc.