Consider the following arrays. What gets logged in various sorting conditions?
const arr1 = ['a', 'b', 'c']; const arr2 = ['b', 'c', 'a']; console.log( arr1.sort() === arr1, arr2.sort() == arr2, arr1.sort() === arr2.sort());
const arr1 = ['a', 'b', 'c']; const arr2 = ['b', 'c', 'a']; console.log( arr1.sort() === arr1, arr2.sort() == arr2, arr1.sort() === arr2.sort());
Final Results
16%
true true true
32%
true true false
26%
false false false
26%
true false true
Consider the following Set of objects spread into a new array. What gets logged?
const mySet = new Set([{ a: 1 }, { a: 1 } const result = [...mySet]; console.log(result);
const mySet = new Set([{ a: 1 }, { a: 1 } const result = [...mySet]; console.log(result);
Final Results
53%
[{a: 1}, {a: 1}]
47%
[{a: 1}]
Learn JavaScript™
Consider the following arrays. What gets logged in various sorting conditions?
const arr1 = ['a', 'b', 'c']; const arr2 = ['b', 'c', 'a']; console.log( arr1.sort() === arr1, arr2.sort() == arr2, arr1.sort() === arr2.sort());
const arr1 = ['a', 'b', 'c']; const arr2 = ['b', 'c', 'a']; console.log( arr1.sort() === arr1, arr2.sort() == arr2, arr1.sort() === arr2.sort());
Explanation:
There are a couple concepts at play here. First, the array sort method sorts your original array and also returns a reference to that array. This means that when you write arr2.sort(), the arr2 array object is sorted.
It turns out, however, the sort order of the array doesn't matter when you're comparing objects. Since arr1.sort() and arr1 point to the same object in memory, the first equality test returns true. This holds true for the second comparison as well: arr2.sort() and arr2 point to the same object in memory.
In the third test, the sort order of arr1.sort() and arr2.sort() are the same; however, they still point to different objects in memory. Therefore, the third test evaluates to false.
There are a couple concepts at play here. First, the array sort method sorts your original array and also returns a reference to that array. This means that when you write arr2.sort(), the arr2 array object is sorted.
It turns out, however, the sort order of the array doesn't matter when you're comparing objects. Since arr1.sort() and arr1 point to the same object in memory, the first equality test returns true. This holds true for the second comparison as well: arr2.sort() and arr2 point to the same object in memory.
In the third test, the sort order of arr1.sort() and arr2.sort() are the same; however, they still point to different objects in memory. Therefore, the third test evaluates to false.
Learn JavaScript™
Consider the following Set of objects spread into a new array. What gets logged?
const mySet = new Set([{ a: 1 }, { a: 1 } const result = [...mySet]; console.log(result);
const mySet = new Set([{ a: 1 }, { a: 1 } const result = [...mySet]; console.log(result);
Explanation:
While it's true a Set object will remove duplicates, the two values we create our Set with are references to different objects in memory, despite having identical key-value pairs. This is the same reason
It should be noted if the set was created using an object variable, say
While it's true a Set object will remove duplicates, the two values we create our Set with are references to different objects in memory, despite having identical key-value pairs. This is the same reason
{ a: 1 } === { a: 1 } is false.It should be noted if the set was created using an object variable, say
obj = { a: 1 }, new Set([ obj, obj ]) would have only one element, since both elements in the array reference the same object in memory.JavaScript Tip 💡
Did you know that you can use an empty 'placeholder' comma, to skip elements when destructuring arrays? #Javascripttip
Did you know that you can use an empty 'placeholder' comma, to skip elements when destructuring arrays? #Javascripttip
JavaScript Tip 💡
Use this one-liner to add leading zeros to numbers.
(Very useful for dates).#Javascripttip
Use this one-liner to add leading zeros to numbers.
(Very useful for dates).#Javascripttip
What gets logged in the following scenario?
const map = ['a', 'b', 'c'].map.bind([1, 2, 3]); map(el => console.log(el));
const map = ['a', 'b', 'c'].map.bind([1, 2, 3]); map(el => console.log(el));
Final Results
33%
1 2 3
28%
a b c
28%
An error is thrown
11%
Something else
Build as soon as you learn 🔥
❌ Don't wait to finish the whole course.
❌ Don't wait to finish the whole book.
❌ Don't wait until you understand it all.
1️⃣ Learn a little.
2️⃣ Build something from that.
🔁 Repeat.
It's the most effective way to become skilled fast.
❌ Don't wait to finish the whole course.
❌ Don't wait to finish the whole book.
❌ Don't wait until you understand it all.
1️⃣ Learn a little.
2️⃣ Build something from that.
🔁 Repeat.
It's the most effective way to become skilled fast.
✨Hurry UP!!! less than 47 hours for free t-shirt.✨
Every 48 hours, they will give away a free premium t-shirt!
Add this extension to your browser and sign in with your GitHub or Google account and register and chance to win free t-shirt from daily. dev.
About the extension:
In this extension you can find the hottest dev news from the best tech blogs on any topic you can think of.
Note: This will only works with your PC or Laptop.
Link:
https://api.daily.dev/get?r=Venomynus
Every 48 hours, they will give away a free premium t-shirt!
Add this extension to your browser and sign in with your GitHub or Google account and register and chance to win free t-shirt from daily. dev.
About the extension:
In this extension you can find the hottest dev news from the best tech blogs on any topic you can think of.
Note: This will only works with your PC or Laptop.
Link:
https://api.daily.dev/get?r=Venomynus
Learn JavaScript™
What gets logged in the following scenario?
const map = ['a', 'b', 'c'].map.bind([1, 2, 3]); map(el => console.log(el));
const map = ['a', 'b', 'c'].map.bind([1, 2, 3]); map(el => console.log(el));
Explanation:
['a', 'b', 'c'].map, when called, will call Array.prototype.map with a this value of ['a', 'b', 'c']. But, when used as a reference, rather than called, ['a', 'b', 'c'].map is simply a reference to Array.prototype.map .Function.prototype.bind will bind the this of the function to the first parameter (in this case, that's [1, 2, 3]), and invoking Array.prototype.map with such a this results in those items being iterated over and logged.What gets logged when I try to log fetch?
console.log(fetch);
console.log(fetch);
Anonymous Quiz
53%
The fetch function
18%
A reference error
29%
It depends on the environment you are in
I don't care about any Frontend, Backend and so on.
I only care about the Weekend until Monday. Enjoy your weekend! 🎉😂😜
I only care about the Weekend until Monday. Enjoy your weekend! 🎉😂😜
JavaScript Tip 💡
Did you know that you can use object destructuring on arrays?
This is very convenient when we need a group of values from specific indexes.
#Javascripttip
Did you know that you can use object destructuring on arrays?
This is very convenient when we need a group of values from specific indexes.
#Javascripttip
✨7 GitHub repositories that can help you in your React development journey✨
1️⃣ Awesome React
- A collection of awesome things regarding React ecosystem. In this repo you will find tools, tutorials and other resources in various form
https://t.co/ovEsMyiIPJ
2️⃣ React learning
- As the repo name suggests in this repo you'll find a curated list of free resources to master React Development
https://t.co/2wBOD7lIS2
3️⃣ Beatiful React Hooks
- A collection of various custom hooks that can speed up your React coding process
https://t.co/hRkUvF80jy
4️⃣ Awesome React Components
- A huge curated List of React Components & Libraries that can solve a real problem. Definitely check it out
https://t.co/rrPjpwLJcx
5️⃣ Amazing React Projects
- As the term suggest, in this repo you will find an amazing list of React projects and React native projects which are open source
https://t.co/h0H2GXndyo
6️⃣ 30 Seconds of React
- Short React code snippets for all your development needs. You can visit site and search for code snippets as well
https://t.co/PeEBGhLhK7
7️⃣ React use
- A great collection of pre built custom hooks that you can use in your project straight away. Hooks are divided into categories.
https://t.co/pub1mfJS9M
Follow @learn_JavaScript_js for more JavaScript content.
___________________
Follow my other channels
For HTML : @learn_html_web
For CSS : @learn_CSS_web
For PHP : @learn_php_web
For Programming tutorials/Courses/Materials :
@Programmingworld_dev
For any quires you can ask in this group :
@devlopers_hub
1️⃣ Awesome React
- A collection of awesome things regarding React ecosystem. In this repo you will find tools, tutorials and other resources in various form
https://t.co/ovEsMyiIPJ
2️⃣ React learning
- As the repo name suggests in this repo you'll find a curated list of free resources to master React Development
https://t.co/2wBOD7lIS2
3️⃣ Beatiful React Hooks
- A collection of various custom hooks that can speed up your React coding process
https://t.co/hRkUvF80jy
4️⃣ Awesome React Components
- A huge curated List of React Components & Libraries that can solve a real problem. Definitely check it out
https://t.co/rrPjpwLJcx
5️⃣ Amazing React Projects
- As the term suggest, in this repo you will find an amazing list of React projects and React native projects which are open source
https://t.co/h0H2GXndyo
6️⃣ 30 Seconds of React
- Short React code snippets for all your development needs. You can visit site and search for code snippets as well
https://t.co/PeEBGhLhK7
7️⃣ React use
- A great collection of pre built custom hooks that you can use in your project straight away. Hooks are divided into categories.
https://t.co/pub1mfJS9M
Follow @learn_JavaScript_js for more JavaScript content.
___________________
Follow my other channels
For HTML : @learn_html_web
For CSS : @learn_CSS_web
For PHP : @learn_php_web
For Programming tutorials/Courses/Materials :
@Programmingworld_dev
For any quires you can ask in this group :
@devlopers_hub
Hey! Welcome to the Devlopers Hub group. First of all, please read the rules:
@devlopers_hub
Want to learn JavaScript and conquer the world? Start here:
Tutorials and Books
- JavaScript For Cats is a dead simply introduction for new programmers.
- MDN JavaScript Guide has the most standard and straightforward tutorials. If you need references, MDN is here for you
too.
- You Don’t Know JS is the best book to learn JavaScript from. It’s free to read on GitHub.
- Eloquent JavaScript is another great introduction to programming and learning JavaScript.
- Modern JavaScript Cheatsheet helps you understand and learn all the new features in the language.
- JSBooks, a collection of free JavaScript books.
Videos and Courses
- JavaScript: Understanding the Weird Parts an incredible course which teaches the concepts of the language. First 3 hours
are free on YouTube, you can but the whole course from Udemy
- FunFunFunction makes the learning process enjoyable.
- Javascript30, 30 videos to level up your skills.
- Traversy Media great contents mostly aimed for begginers.
Learn by Doing
- FreeCodeCamp, learn to code by building projects.
- CodeAcademy, learn to code interactively.
- Codewars, train with programming challenges.
Functional Programming
This where the true the good parts show theirselves.
- JSUnconf 2016, learn functional programming basics with this talk from Anjana Vakil.
- FunFunFunction's videos are a great start.
- Mostly Adequate Guide to Functional Programming and Functional Light JS will make you master the functional programming.
- JavaScript Allongé, programming from functions to classes.
- Functional Programming Jargon in simple terms.
- awesome-fp-js is a good reference for functional programming in JavaScript.
Other Resources
- Spellbook of Modern Web Dev is a big picture of modern JavaScript development.
- What the fuck JavaScript?, list of funny and tricky JavaScript examples.
What’s next?
You can learn Node.js for backend, or go crazy with front-end frameworks, or even further, create mobile
applications.
Follow @learn_JavaScript_js for more JavaScript content.
________________________________
Follow my other channels
For HTML : @learn_html_web
For CSS : @learn_CSS_web
For PHP : @learn_php_web
For Programming tutorials/Courses/Materials :
@Programmingworld_dev
For any quires you can ask in this group :
@devlopers_hub
@devlopers_hub
Want to learn JavaScript and conquer the world? Start here:
Tutorials and Books
- JavaScript For Cats is a dead simply introduction for new programmers.
- MDN JavaScript Guide has the most standard and straightforward tutorials. If you need references, MDN is here for you
too.
- You Don’t Know JS is the best book to learn JavaScript from. It’s free to read on GitHub.
- Eloquent JavaScript is another great introduction to programming and learning JavaScript.
- Modern JavaScript Cheatsheet helps you understand and learn all the new features in the language.
- JSBooks, a collection of free JavaScript books.
Videos and Courses
- JavaScript: Understanding the Weird Parts an incredible course which teaches the concepts of the language. First 3 hours
are free on YouTube, you can but the whole course from Udemy
- FunFunFunction makes the learning process enjoyable.
- Javascript30, 30 videos to level up your skills.
- Traversy Media great contents mostly aimed for begginers.
Learn by Doing
- FreeCodeCamp, learn to code by building projects.
- CodeAcademy, learn to code interactively.
- Codewars, train with programming challenges.
Functional Programming
This where the true the good parts show theirselves.
- JSUnconf 2016, learn functional programming basics with this talk from Anjana Vakil.
- FunFunFunction's videos are a great start.
- Mostly Adequate Guide to Functional Programming and Functional Light JS will make you master the functional programming.
- JavaScript Allongé, programming from functions to classes.
- Functional Programming Jargon in simple terms.
- awesome-fp-js is a good reference for functional programming in JavaScript.
Other Resources
- Spellbook of Modern Web Dev is a big picture of modern JavaScript development.
- What the fuck JavaScript?, list of funny and tricky JavaScript examples.
What’s next?
You can learn Node.js for backend, or go crazy with front-end frameworks, or even further, create mobile
applications.
Follow @learn_JavaScript_js for more JavaScript content.
________________________________
Follow my other channels
For HTML : @learn_html_web
For CSS : @learn_CSS_web
For PHP : @learn_php_web
For Programming tutorials/Courses/Materials :
@Programmingworld_dev
For any quires you can ask in this group :
@devlopers_hub
React is a JavaScript library for building user interfaces.
Wes Bos Courses
We highly recommend Wes Bos' React courses:
- React For Beginners is a step-by-step training course to get you building real world React applications.
- Fullstack Advanced React & GraphQL is an excellent course that teaches you to create React applications with latest technologies.
- Learn Redux is a free course that will simply the learning of Redux.
Tutorials and books
- React Official Docs is the best place to start. React has a great documentaion.
- React Enlightenment is a well written online book.
- React Bits is a compilation of patterns, techniques, tips and tricks.
Videos and Courses
- Egghead, with lots of high quality free courses by well-know instructors such as Dan Abramov, the creator of Redux.
- Academind has a well made React course.
- Traversy Media's React crash course is very useful for beginners.
- The Net Ninja's complete React/Redux tutorial.
- LearnCodeAcademy's course is the most viewed React course on YouTube.
What's next?
- Learn more about Redux (http://redux.js.org/) and other state managers.
- Find out about server-side rendering and get to know frameworks like Next.js (https://github.com/zeit/next.js/).
- Start creating mobile applications with React Native (https://facebook.github.io/react-native/).
- Use GraphQL (http://graphql.org/) for your APIs.
Follow @learn_JavaScript_js for more JavaScript content.
_____________________________________________
Follow my other channels
For HTML : @learn_html_web
For CSS : @learn_CSS_web
For PHP : @learn_php_web
For Programming tutorials/Courses/Materials :
@Programmingworld_dev
For any quires you can ask in this group :
@devlopers_hub
Wes Bos Courses
We highly recommend Wes Bos' React courses:
- React For Beginners is a step-by-step training course to get you building real world React applications.
- Fullstack Advanced React & GraphQL is an excellent course that teaches you to create React applications with latest technologies.
- Learn Redux is a free course that will simply the learning of Redux.
Tutorials and books
- React Official Docs is the best place to start. React has a great documentaion.
- React Enlightenment is a well written online book.
- React Bits is a compilation of patterns, techniques, tips and tricks.
Videos and Courses
- Egghead, with lots of high quality free courses by well-know instructors such as Dan Abramov, the creator of Redux.
- Academind has a well made React course.
- Traversy Media's React crash course is very useful for beginners.
- The Net Ninja's complete React/Redux tutorial.
- LearnCodeAcademy's course is the most viewed React course on YouTube.
What's next?
- Learn more about Redux (http://redux.js.org/) and other state managers.
- Find out about server-side rendering and get to know frameworks like Next.js (https://github.com/zeit/next.js/).
- Start creating mobile applications with React Native (https://facebook.github.io/react-native/).
- Use GraphQL (http://graphql.org/) for your APIs.
Follow @learn_JavaScript_js for more JavaScript content.
_____________________________________________
Follow my other channels
For HTML : @learn_html_web
For CSS : @learn_CSS_web
For PHP : @learn_php_web
For Programming tutorials/Courses/Materials :
@Programmingworld_dev
For any quires you can ask in this group :
@devlopers_hub