Author: Ahmad Shadeed
Translator: Front-end Xiaozhi
Source: dev
If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.
This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.
First of all, a question to everyone, how proficient are you in JS?
Today, let's introduce 33 concepts in JS. Among these concepts, you may know, or you may not, or even have never heard of them.
These concepts should be known as a front-end, so let's get started.
1. Call stack
The call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its position in a script that calls multiple functions – what function is currently running, and what function is being called from that function, and many more.
2. Primitive types
All types except objects define immutable values (that is, values that cannot be changed). For example (unlike C), strings are immutable. We call these types of values "primitives".
3. Value Types and Reference Types
A variable that is assigned a non-primitive value is given a reference to that value. The reference points to the location of the object in memory. The variable doesn't actually contain the value.
4. Implicit, Explicit, Nominal, Structuring and Duck Typing
Type coercion means that when the operands of an operator are of different types, one of the operands will be converted to the "equivalent" value of the other operand's type.
Reference: https://stackoverflow.com/questions/19915688/what-exactly-is-type-coercion-in-javascript
5. == vs === vs typeof
JavaScript has two visually similar but very different ways to test equality. You can use ==or ==to test for equality.
6. Function Scope, Block Scope and Lexical Scope
1: function scope
2: block scope
3: notation scope
7. Expressions and Declaratives
Making this distinction is important because expressions can act like declaratives, which is why we also have expression statements. On the other hand, however, declaratives cannot act like expressions.
8. IIFEs, modules and namespaces
Reference: https://vvkchandra.medium.com/essential-javascript-mastering-immediately-invoked-function-expressions-67791338ddc6
9. Message queues and event loops
"How is JavaScript made asynchronous and single-threaded?" The short answer is that the JavaScript language is single-threaded, and asynchronous behavior is not part of the JavaScript language itself, but rather the core JavaScript language built into the browser (or programming environment) on top and accessed through the browser's API.
Reference: https://medium.com/front-end-weekly/javascript-event-loop-explained-4cd26af121d4
10. setTimeout, setInterval 和 requestAnimationFrame
We want to not Riemann execute a function, but sometime later. This is called a "dispatch call".
Reference: https://javascript.info/settimeout-setinterval
11. JavaScript engine
Writing code for the web can sometimes feel a little magical, as developers write a series of characters that become concrete images, words, and actions in the browser. Understanding the technology can help developers better tune their skills as programmers.
Reference: http://www.softwaremag.com/javascript-engines/
12. Bitwise operators, typed arrays and array buffers
Technically, to a computer, everything is 1s and 0s. It doesn't use numbers, characters or strings, it only uses binary digits (bits). Simply explaining the main turbidity, everything is stored in binary form. The computer then uses an encoding such as UTF-8 to map the saved bit combinations to characters, numbers or different symbols (ELI5 version).
Reference: https://hackernoon.com/programming-with-js-bitwise-operations-393eb0745dc4
13. DOM and layout tree
The Document Object Model, commonly referred to as the DOM, is an important part of what makes a website interactive. It is an interface that allows programming languages to manipulate the content, structure and style of a website. JavaScript is a client-side scripting language that connects to the DOM in an internet browser.
Reference: https://www.digitalocean.com/community/tutorials/introduction-to-the-dom
14. Factories and Classes
JavaScript is a prototype-based language, which means that object properties and methods can be shared through generic objects with the ability to clone and extend. This is called prototypal inheritance and is different from class inheritance.
Reference: https://www.digitalocean.com/community/tutorials/understanding-prototypes-and-inheritance-in-javascript
15. this, call, apply 和 bind
These functions are very important to every JavaScript developer and are used by almost every JavaScript library or framework.
Reference: https://levelup.gitconnected.com/grokking-call-apply-and-bind-methods-in-javascript-392351a4be8b
16. new, Constructor, instanceof 和 Instances
Every JavaScript object has a prototype. All objects in JavaScript inherit their methods and properties from their prototype.
Reference: https://codeburst.io/javascript-for-beginners-the-new-operator-cee35beb669e
17. Prototype inheritance and prototype chain
For developers with experience in class-based languages such as Java or C++, JavaScript is a bit confusing because it is dynamic and does not provide an implementation of a class itself ( classthe , but just syntactic sugar , JavaScript is still prototype-based).
Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
18. Object.create 和 Object.assign
Object.createA method is one of the ways to create a new object in JavaScript.
Reference: https://medium.com/@happymishra66/object-create-in-javascript-fa8674df6ed2
19. map, reduce, filter
Even if you don't know what functional programming is, you've probably been using map, filter, and reduce because they're very useful and allow you to write cleaner logic that makes your code less bad.
Reference: https://medium.com/@bojangbusiness/javascript-functional-programming-map-filter-and-reduce-846ff9ba492d
20. Pure Functions, Side Effects, State Mutation, and Event Propagation
Many of our bugs stem from IO-related, data-mutating, side-effecting code. These problems can be found everywhere in our codebase - from accepting user input, receiving an unexpected response via an http call, or writing to the file system, etc. It's a harsh reality, so we also have to deal with it properly and deal with it.
Reference: https://hackernoon.com/javascript-and-functional-programming-pt-3-pure-functions-d572bb52e21c
21. Closures
A closure is a composition that bundles a function with a reference to its surrounding state (lexical environment). In other words, closures allow us to access the scope of the outer function from the inner function. In JavaScript, closures are created every time a function is created.
Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
22. Higher order functions
JavaScript can accept higher-order functions. This ability to handle higher-order functions, among other features, makes JavaScript one of the programming languages well suited for functional programming.
Reference: https://www.sitepoint.com/higher-order-functions-javascript/
23. Recursion
Reference: https://www.freecodecamp.org/news/recursion-in-javascript-1608032c7a1f
24. Collectors and Generators
Generator objects are returned by generator functions and conform to both the iterable protocol and the iterator protocol.
Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator
25. Promise
A Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.
Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
26. async/await
Reference: https://javascript.info/async-await
27. Data Structures
Javascript is constantly evolving every day. With the rapid development of frameworks and platforms such as React, Angular, Vue, NodeJS, Electron, React Native, etc., the use of javascript in large-scale applications has become quite common.
Reference: https://blog.cloudboost.io/playing-with-data-structures-in-javascript-stack-a55ebe50f29d
28. Expensive Arithmetic and Big O Notation
"What is Big O notation?" is a very common developer job interview question. Simply put, it's a mathematical expression of how long an algorithm needs to run based on how long the input is, usually the worst-case scenario.
Reference: https://medium.com/cesars-tech-insights/big-o-notation-javascript-25c79f50b19b
29. Algorithms
In mathematics and computer science, an algorithm is a finite sequence of well-defined instructions, usually used to solve a specific class of problems or perform calculations.
30. Inheritance, Polymorphism and Code Reuse
Inheritance of classes is the way that one class extends another class so we can create new functionality on top of existing ones.
Reference: https://javascript.info/class-inheritance
31. Design Patterns
Every developer strives to write maintainable, readable, and reusable code. As applications get larger, the structuring of code becomes more important. Design patterns proved to be the key to solving this challenge – providing an organizational structure for common problems in a given situation.
Reference: https://www.digitalocean.com/community/tutorial_series/javascript-design-patterns
32. Partial application, currying, composition, and plumbing
Function composition is a mechanism for combining multiple simple functions to build a more complex function.
Reference: https://www.codementor.io/@michelre/use-function-composition-in-javascript-gkmxos5mj
33. Clean code
Writing clean, understandable, maintainable code is a skill every developer needs to master.
Reference: https://www.freecodecamp.org/news/clean-coding-for-beginners/
If you find this list useful, don't forget to bookmark it and follow me for more content like this.
The bugs that may exist in editing cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, here is a useful BUG monitoring tool , Fundebug .
https://dev.to/eludadev/33-javascript-concepts-every-beginner-should-know-with-tutorials-4kao
comminicate
If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.
This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.