• 7 JavaScript Fundamentals Every Web Developer Should Know
  • Cristian Salcescu
  • Translation from: The Gold Project
  • This article is permalink: github.com/xitu/gold-m…
  • Translator: Hyde Song
  • Proofreader: PassionPenguin, Greycodee

In this article, we’ll discuss what I think are some of the most important and unique features of JavaScript.

1. Functions are independent units of behavior

The function is the basic unit, but the important thing here is that the function is independent! In other languages such as Java or C#, functions must be declared inside classes, but this is not the case in JavaScript.

Functions can be defined globally or as reusable units within modules.

2. An object is a dynamic collection of properties

An object is really just a collection of properties. In other languages, they are called maps, hashmaps, or Hashtables.

Objects are dynamic, meaning that once created, properties can be added, edited, or removed.

Here is a simple object defined using literal syntax. It has two properties:

const game = {
  title : 'Settlers'.developer: 'Ubisoft'
}
Copy the code

3. Objects inherit from other objects

If you’ve ever used a class-based language like Java or C#, you might be used to inheriting classes from other classes. However, this is not the case with JavaScript.

Objects inherit objects that call themselves prototypes.

As mentioned earlier, in this language, an object is a collection of properties. When an object is created, it has a hidden property called __proto__, which refers to other objects. This referenced object is called Prototype.

Here is an example of creating an empty object (one that has no properties, so to speak) :

const obj = {};
Copy the code

Even though obj looks empty and has no attributes, it actually has a hidden attribute __proto__ :

obj.__proto__ === Object.prototype;
//true
Copy the code

On such objects, we can access methods that have not yet been defined, such as the toString method, even though we have not yet defined such methods. How is that possible?

This method is inherited from object.prototype. When trying to access the method, the JS engine first tries to look for the method on the current object and then for the properties on its prototype.

Don’t be misled by the class keyword. Class is just the syntactic sugar of the prototype system to help familiarize developers from class-based languages with JavaScript.

4. Functions are values

In JavaScript, functions are values. Like any other value, a function can be assigned to a variable:

const sum = function(x,y){ return x + y }
Copy the code

This is not possible in other programming languages.

Like any other value, a function can be passed to or returned by a different function. Here is an example of a function returning another function:

function startsWith(text){
  return function(name){
    returnname.startsWith(text); }}const games = ['Fornite'.'Overwatch'.'Valorant'];
const newGames = games.filter(startsWith('Fo'));
console.log(newGames);
//["Fornite"]
Copy the code

In the same example, we can see how the function returned by the startsWith function is sent as an argument to the filter array method.

5. Functions can be closed

Functions can be defined inside functions. Internal functions can refer to variables of other functions.

Moreover, after the outer function executes, the inner function can refer to the variables of the outer function. Here are some examples of this;

function createCounter(){
  let x = 0;
  return function(){
    x = x + 1;
    returnx; }}const count = createCounter();
console.log(count());/ / 1
console.log(count());/ / 2
console.log(count());/ / 3
Copy the code

The count function can access the x variable from the createCounter parent function, even after execution. Count is the closure function.

6. Basic data types are treated as objects

JavaScript gives an illusion by treating basic types as objects. In fact, a primitive type is not an object. A basic type is not a collection of properties.

However, we can call methods on basic types. For example, we can call the toUpperCase method on a string:

const upperText = 'Minecraft'.toUpperCase();
console.log(upperText);
//'MINECRAFT'
Copy the code

Simple text like Minecraft is a basic type and doesn’t have any methods of its own. But JavaScript uses the built-in String constructor to convert it to an object, and then we can execute the toUpperCase method on the newly created object.

JavaScript allows you to call methods and treat them as objects by converting basic types to wrapped objects underneath.

JavaScript is a single-threaded language

JavaScript single threaded. This means that only one statement is executed at a given time.

In the main thread, two functions cannot be executed simultaneously.

You may have heard of parallel functions like Web Workers, but workers don’t share data with the main thread. They communicate only through messaging — nothing is shared.

So that’s easy to understand, we just have to focus on making the function execute faster. Taking a long time to execute a function makes the page unresponsive.

Thanks for reading. Happy coding!

If you find any errors in the translation or other areas that need improvement, you are welcome to revise and PR the translation in the Gold Translation program, and you can also get corresponding bonus points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

Diggings translation project is a community for translating quality Internet technical articles from diggings English sharing articles. The content covers the fields of Android, iOS, front end, back end, blockchain, products, design, artificial intelligence and so on. For more high-quality translations, please keep paying attention to The Translation Project, official weibo and zhihu column.