Let’s understand this weird behavior in JavaScript
The arithmetic "**+"** operator
The binary + operator is generally used to add two numbers, when both of the operands are just numbers it will give the sum(quite obvious)
But when one of the operands is a string then the + acts as a string concatenation operator.
The other operand if it is a number, it will be converted into a string.
2+2=4
2+"2"="22"
"2"+2="22"
"2"+"2"="22"
The arithmetic “ — “ operator
The - operator only operates with numbers only.
If both operators are numbers, it will do the casual subtraction. If the operators are numbers represented in strings, it will just convert those into numbers.
If there exist any character strings like "hello" , it will just result in NaN.
2-5=-3
5-4=1
"500"-100=400
"50"-"19"=31
"adarsh"-9=NAN
Precedence of “+” and “-” operator
We know the BODMAS rule from our high school, here addition and subtraction got the same priority or precedence.
Hence it will evaluate from left to right.
"100"+200-"150" //will start from this
"100"+"200"-"150"
"100200"-"2"
100200-2
100198 //will end like this
Unlike many other high-level languages out there, JavaScript is a dynamically typed language and is not strict about the datatypes of the operand.
When the operands are of different types it will convert them into suitable types instead of showing errors
These cannot be called a weirdness or a feature of JavaScript. These are just how JavaScript works under the hood.
In simple word + is both a concatenation as well as an addition operator. If any operands/arguments are not m=numeric it will do concatenation, that's why "2"+"2" == 22 just like "adarsh”+" gupta" == “adarsh gupta”.
- is only subtraction. No matter what its arguments are, they are coerced to numbers. Thus, '22' - '2' is evaluated as 22 - 2 which is 20.
Conclusion
We have learned why the + operator does both concatenation and addition in different scenarios.
I hope you have found these useful. Be sure to follow me on Twitter as I’m active there too.
Bit: Feel the power of component-driven dev
Say hey to Bit. It’s the #1 tool for component-driven app development.
With Bit, you can create any part of your app as a “component” that’s composable and reusable. You and your team can share a toolbox of components to build more apps faster and consistently together.
- Create and compose “app building blocks”: UI elements, full features, pages, applications, serverless, or micro-services. With any JS stack.
- Easily share, and reuse components as a team.
- Quickly update components across projects.
- Make hard things simple: Monorepos, design systems & micro-frontends.
Learn more
[How We Build Micro Frontends
Building micro-frontends to speed up and scale our web development process.blog.bitsrc.io](https://blog.bitsrc.io/how-we-build-micro-front-ends-d3eeeac0acfc "blog.bitsrc.io/how-we-build-micro-front-end..")
[How we Build a Component Design System
Building a design system with components to standardize and scale our UI development process.blog.bitsrc.io](https://blog.bitsrc.io/how-we-build-our-design-system-15713a1f1833 "blog.bitsrc.io/how-we-build-our-design-syst..")
[How to reuse React components across your projects
Finally, you completed the task of creating a fantastic input field for the newsletter in your app. You are happy with…bit.cloud](bit.cloud/blog/how-to-reuse-react-component.. "bit.cloud/blog/how-to-reuse-react-component..")
[Painless monorepo dependency management with Bit
Simplify dependency management in a monorepo to avoid issues with phantom dependencies and versions. Learn about…bit.cloud](bit.cloud/blog/painless-monorepo-dependency.. "bit.cloud/blog/painless-monorepo-dependency..")