DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Learn this before React
Jack Pritom Soren
Jack Pritom Soren

Posted on • Updated on

Learn this before React

In this article we will explore top fundamental Javascript concepts necessary to know in order to have an effective first learning cycle of React / React Native

Table of Contents

  • map() & filter()

  • slice() & splice()

  • concat()

  • find() & findIndex()

  • destructuring

  • rest & spread operator

  • promises

map and filter

Both are array methods and both return a new array when applying Filter additionally eliminates items that don't match

map:

const Data =[
    {id: '1',title: "car"},
    {id: '2',title: "bus"},
    {id: '3',title: "plane"},
    {id: '4',title: "train"},
    {id: '5',title: "ship"},
]

const upperData = Data.map(element => element.title.toUpperCase());
console.log(upperData)
Enter fullscreen mode Exit fullscreen mode
Output:
['CAR', 'BUS', 'PLANE', 'TRAIN', 'SHIP']
Enter fullscreen mode Exit fullscreen mode

filter:

const Data =[
    {id: '1',title: "car"},
    {id: '2',title: "bus"},
    {id: '3',title: "plane"},
    {id: '4',title: "train"},
    {id: '5',title: "ship"},
]

const filterData = Data.filter(element => element.id %2 === 0);
console.log(filterData)
Enter fullscreen mode Exit fullscreen mode
Output:
[ { id: '2', title: 'bus' }, { id: '4', title: 'train' } ]
Enter fullscreen mode Exit fullscreen mode

slice and splice

Method returns a new array with selected elements, while splice method changes the contents of an existing array

splice:

const Data =[
    'Car',
    'Bus',
    'Helicopter',
    'Train'
]

const CopyArray = [...Data]

CopyArray.splice(0,1)
console.log(CopyArray)
Enter fullscreen mode Exit fullscreen mode
Output:
['Bus', 'Helicopter', 'Train']
Enter fullscreen mode Exit fullscreen mode
const Data =[
    'Car',
    'Bus',
    'Helicopter',
    'Train'
]

const CopyArray = [...Data]

CopyArray.splice(CopyArray.length,1,"Plane")
console.log(CopyArray)
Enter fullscreen mode Exit fullscreen mode
Output:
['Car', 'Bus', 'Helicopter', 'Train', 'Plane']
Enter fullscreen mode Exit fullscreen mode

slice:

const Data =[
    'Car',
    'Bus',
    'Helicopter',
    'Train'
]

const CopyArray = [...Data]

const newArray = CopyArray.slice(0,2)
console.log(newArray)
console.log(Data)
Enter fullscreen mode Exit fullscreen mode
Output:
['Car', 'Bus']
['Car', 'Bus', 'Helicopter', 'Train']
Enter fullscreen mode Exit fullscreen mode

concat

This method returns a new array of merging two or more arrays

concat:

const array1 = [1, 2, 3, 4, 5];
const array2 = [6, 7, 8, 9, 10];
const array3 = [11, 12, 13, 14, 15];

const mergeArray = array1.concat(array2, array3);

console.log(mergeArray);
Enter fullscreen mode Exit fullscreen mode
Output:
[
   1,  2,  3,  4,  5,  6,
   7,  8,  9, 10, 11, 12,
  13, 14, 15
]
Enter fullscreen mode Exit fullscreen mode

find and findIndex

The find method returns the first element that satisfies the condition, while findIndex returns the index of that element

findIndex:

const data = [
  { id: 1, title: "first" },
  { id: 2, title: "second" },
  { id: 3, title: "third" },
  { id: 4, title: "fourth" },
];

const itemIndex = data.findIndex((element) => element.id === 3);
console.log(itemIndex);
Enter fullscreen mode Exit fullscreen mode
Ouput:
2
Enter fullscreen mode Exit fullscreen mode

find:

const data = [
  { id: 1, title: "first" },
  { id: 2, title: "second" },
  { id: 3, title: "third" },
  { id: 4, title: "fourth" },
];

const item = data.find((element) => element.id === 3);
console.log(item);

Enter fullscreen mode Exit fullscreen mode
Output:
{ id: 3, title: 'third' }
Enter fullscreen mode Exit fullscreen mode

destructuring

The destructuring assignment is a special syntax which enables unpacking (assign) value from arrays or object properties directly into variables

const name = ["jack", "pritom"];

const [firstName, lastName] = name;

console.log(firstName, lastName);

Enter fullscreen mode Exit fullscreen mode
Output:
jack pritom
Enter fullscreen mode Exit fullscreen mode
const data = {
  id: 1,
  name: "jack pritom",
  loveMusic: true,
  species: "human",
};

const { name: dataName, species, ...rest } = data;

console.log(dataName);
console.group(species);
console.group(rest);
Enter fullscreen mode Exit fullscreen mode
Output:
jack pritom
human
{ id: 1, loveMusic: true }
Enter fullscreen mode Exit fullscreen mode

rest & spread operator

Rest parameter enables us to pass unspecified number of parameters to a function which will be placed into array, while the spread operator enables us to spread the content of a iterable(i.e. array) into individual elements

Spread:

const introduction = ["my", "name", "is", "jack"];

const copyArr = [...introduction];
console.log(copyArr);
console.log(...copyArr);
Enter fullscreen mode Exit fullscreen mode
Output:
[ 'my', 'name', 'is', 'jack' ]
my name is jack
Enter fullscreen mode Exit fullscreen mode

Rest:

const getSize = (...args) => {
  return args.length;
};

console.log(getSize(1, 2, 3));
console.log(getSize(10, 20, 30, 100));

Enter fullscreen mode Exit fullscreen mode
Output:
3
4
Enter fullscreen mode Exit fullscreen mode

promises

In simple terms promises are used to handle asynchronous operations. Each promise can end as a success or failure having 3 possible statuses: pending, fulfilled or rejected. In the example below we handle promises with async await syntax while fetching data from API

const fetchData = async () => {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/");

    if (!response.ok) throw new Error(response.status);
    const result = await response.json();
    return result;
  } catch (e) {
    console.log(e);
  }
};

Enter fullscreen mode Exit fullscreen mode

Follow me on : Github Linkedin

Top comments (39)

Collapse
 
jonrandy profile image
Jon Randy • Edited on

I would strongly suggest building a website without using a framework/library first, so you can understand what problem they are actually solving and gain an understanding of what goes on 'under the hood'. I've interviewed wayyyyyy too many developers who can throw something together in React, but are totally clueless when I ask them to do some basic stuff in vanilla JS. This problem is steadily getting worse and worse.

Collapse
 
theaccordance profile image
Joe Mainwaring

I have to respectfully disagree with this recommendation.

I concur itโ€™s valuable for devs to understand the basics of JS, but these frameworks exist specifically to accelerate development. Unless Iโ€™m hiring engineers to build a framework, I donโ€™t need them to be experts in all the nuances that come with interfacing directly with browsers.

Collapse
 
jps27cse profile image
Jack Pritom Soren Author

Thanks for the valuable suggestion !

Collapse
 
andrewhu368 profile image
Andrew Hu

I agree. Building an application with plain HTML, CSS and adding some interactivity with JS should be part of any curriculum before learning React. I would also throw in the usage of a template engine to fully appreciate the power of React.

Collapse
 
nettcaster87 profile image
nettcaster87

Thanks for this. You have exposed an area I can exploit as a noob dev.

Collapse
 
codingchili profile image
Robin Duda (they/them)

I would say learn platform fundamentals before ANY framework. :)

Collapse
 
jps27cse profile image
Jack Pritom Soren Author

The point is correct, it is very important to strengthen the basics before learning anything, and these frameworks can't be learned in 2 days, we need to practice for many days, with that we need to make the basics strong, then we can do well. Thanks for the comment

Collapse
 
riju_bro profile image
riju_bro

๐Ÿ’ฏ

Collapse
 
codingjlu profile image
codingjlu

Thanks. Um, destructuring, please; not destructing ๐Ÿคฃ.

Collapse
 
jps27cse profile image
Jack Pritom Soren Author

๐Ÿ˜‚๐Ÿ˜‚ I have corrected it ,,,,,thanks for mentioning,,,

Collapse
 
jmau111 profile image
jmau111โญ

hi, nice post, but you could highlight js code more specifically to get colorful examples (read the editor doc).

It's always the same problem. Many aspiring devs think they know the language while they don't. They may use progress bars to describe their progression, but you can't master "80% of js" if you don't know how to achieve very common programs without using a framework and tons of add-ons.

The list you provided is great, and these are only basics of js.

Collapse
 
jps27cse profile image
Jack Pritom Soren Author

Thank you !

 
teamradhq profile image
teamradhq

@theaccordance I have to respectfully rebuff you here. Your statements are incorrect.

Bold statement, I know, but itโ€™s a statement derived from over a decade building teams, products, and teaching students how to code.

So is repeatedly calling a library a framework a tactic you use to weed out the fakers and posers? I mean, as an expert, you know we're talking about a library right? I think someone who understands computing enough to claim expertise should know the difference between these fundamental concepts.

Youโ€™ve got your way of doing things, but it sounds like it involves maintaining way more code than myself or my teams do. If only we were paid by the number of lines we authored in a projectโ€ฆ

I'm very curious to see how your way of doing things would be able to define a select element with values, handling a change event that mutates global document state in fewer lines than these:

<select id="stuff">
  <option value="1">One</option>
  <option value="2">Two</option>
  ...
</select>

<script>
  document.addEventListener('change', (e) => {
    const { value } = e.currentTarget;

    doSomethingWith(value);
    window.someExternal.post(value);
  });
</script>
Enter fullscreen mode Exit fullscreen mode

This the point @natescode is making: It's impossible to implement the above in React without injecting hundreds of lines of boiler plate into your project and a layer of complexity that is mostly not required.

Even if we discount the technical debt maintaining your boilerplate code adds to your workload, this is your codebase:

Image description

Only the red outlined box in the middle represents actual project code... And even then, only a sliver on the far right hand side of the box... Most of app is polyfills because you used some CRA template and nobody knows how to Babel properly... If you had access to an expert instead of a bunch of React monkeys, maybe you could fix it...

Point is, that if you were paid based upon how many lines of code you have to maintain, then you and your React monkeys would be making it rain compared to those silly novices who work with plain old JS.

Thread Thread
 
theaccordance profile image
Joe Mainwaring

I agree you have valid points, but I see one major flaw in your rebuttal:

It's impossible to implement the above in React without injecting hundreds of lines of boiler plate into your project and a layer of complexity that is mostly not required.
Enter fullscreen mode Exit fullscreen mode

We're clearly not building apps at the same scale here. You view all the overhead as a burden, whereas I have tangible savings in labor and code we maintain.

Yeah - your simple example proves your point, but my enterprise applications? They tell a different story.

Collapse
 
chideraike profile image
Chidera

This was very helpful, thanks!

Collapse
 
parvejkhan profile image
Parvej khan

Greatt Post, its help and understant the overview thank you jack

Collapse
 
pabloferrari013 profile image
Pablo Ferrari • Edited on

Sensational article ๐Ÿ˜ฎ

Collapse
 
rickdelpo1 profile image
Rick Delpo

I agree that it is important to understand basic array methods before jumping into React. Unless React is required in school or on the job I suggest skipping it altogether because in my opinion React is way too much overkill. Plain Vanilla JS is the way to go for simple apps. Nice to understand some of the React basics though.

I wrote a Dev.to piece on 17 reasons why I prefer Plain JS over React. U can read it here at
dev.to/rickdelpo1/react-vs-plain-j...

Collapse
 
codingchili profile image
Robin Duda (they/them)

Nice! Vanilla + custom elements + some tiny html render lib is everything one needs, with greatly reduced complexity based completely on browser standards and features.

Collapse
 
pramit_marattha profile image
Pramit Marattha

Awesomee! ๐Ÿ’ฏ๐Ÿ’ฏ

Collapse
 
jps27cse profile image
Jack Pritom Soren Author

Thank you !

Collapse
 
ninhnd profile image
Dang Ninh

Awesome! A lot of these are used a lot in React so knowing these beforehand will definitely improves the experience of a beginner reading some React code without getting overwhelmed

Collapse
 
jps27cse profile image
Jack Pritom Soren Author

Thank you !

Collapse
 
devangtomar profile image
Devang Tomar

Thanks this is great โ˜บ๏ธ๐Ÿ‘

Collapse
 
asadanik profile image
Asad Anik

Awesome for begginers

Collapse
 
jps27cse profile image
Jack Pritom Soren Author

Thank you !

Collapse
 
sohrab09 profile image
Sohrab Hossain

Nice article

Collapse
 
jps27cse profile image
Jack Pritom Soren Author

Thank you !

 
theaccordance profile image
Joe Mainwaring • Edited on

Who said they need to be experts? I did.

Bold statement, I know, but itโ€™s a statement derived from over a decade building teams, products, and teaching students how to code. It comes from experiences working on projects before and after frameworks became popular, and watching too many engineers think they were being creative with plain JS instead of RTFM with the framework. Those engineers never stick around long enough to see how poorly their solutions age.

Youโ€™ve got your way of doing things, but it sounds like it involves maintaining way more code than myself or my teams do. If only we were paid by the number of lines we authored in a projectโ€ฆ

Thread Thread
 
jonrandy profile image
Jon Randy • Edited on

I think he was referring to:

...experts in all the nuances that come with interfacing directly with browsers

which you specifically said they didn't need to be, rather than being experts in React.

Search No More

Join DEV and MongoDB and build an application with full-text search capabilities using MongoDB Atlas and Atlas Search for the DEV x MongoDB Atlas Hackathon 2022.

โ†’ Join the Hackathon