JavaScript Archives - SoftUni Global

All The New JavaScript Features Coming Up with ECMAScript 2022

Nikol Ruseva — Thu, 25 Aug 2022 08:48:25 +0000

The thirteenth edition of ECMAScript Language specification was officially approved on June 22, 2022. With its release, new features were added to the JavaScript language:

Method .at();
Object.hasOwn();
RegExp: match indices(‘d’ flag);
Error: .cause;
New members of Classes;
Private Slot Checks;
Top-level Await.

Now let’s find out more about each new feature.

Method .at()

The method .at() is supported by indexable values like Array, String, or TypedArray. It takes a positive or negative integer value and returns the element at the given index.

In this example, there is an array with three elements, which means that its length is 3. The first element is at index 0 and the last is at index array length -1 (in this example at index 2).

To check what the element at a certain index is, use the bracket operator (animals[0]). For indexes out of the range, the program returns “Undefined“.

				
					let animals = ["Cat", "Dog", "Cow"];

console.log(animals[0]);
console.log(animals[animals.length - 1]) 
console.log(animals[animals.length])

//Cat
//Cow
//undefined

The new feature works exactly like the bracket operator but it allows negative indexing of elements. The last element is accessed easily by replacing animals[animals.length – 1] with animals.at(-1)

				
					let animals = ["Cat", "Dog", "Cow"];

console.log(animals.at(0));
console.log(animals.at(-1));

//Cat
//Cow

				
					//Example with a String
let string = "Hello, World!";

console.log(string.at(-1));

//!

Object: .hasOwn()

Object.hasOwn() returns true if the specified object has the indicated property as its own property. If the property is inherited or does not exist, the method returns false.

Object.hasOwn() is intended as a replacement of Object.hasOwnProperty()

Before:

				
					let user = {
name: 'John Doe',
role: 'Admin'
};

console.log(user.hasOwnProperty('role'));
console.log(user.hasOwnProperty('age'));

//true
//false

After:

				
					let user = {
name: 'John Doe',
role: 'Admin'
};

console.log(Object.hasOwn(user, 'role'));
console.log(Object.hasOwn(user, 'age'));

//true
//false

RegExp: match indices(‘d’ flag)

ECMA Script 2022 introduced a new /d flag for Regular Expressions. It provides some additional information about the start and indices position end of each match in the input string.

Without the new feature the following information has been provided:

				
					let string = 'hello1helloAll';
let regEx = /hello(\w)/g;
let result = [...string.matchAll(regEx)];
console.log(result[0]);
//[ 'hello1', '1', index: 0, input: 'hello1helloAll', groups: undefined ]

let string = 'hello1helloAll';
let regEx = /hello(\w)/g;
let result = [...string.matchAll(regEx)];
let regEx2 = /hello(\w)/dg;
let result2 = [...string.matchAll(regEx2)];
console.log(result2[0]);

With the /d flag there is an array with the indices of the different elements that match the regex:

				
					[
  'hello1',
  '1',
  index: 0,
  input: 'hello1helloAll',
  groups: undefined,
  indices: [ [ 0, 6 ], [ 5, 6 ], groups: undefined ]
]

Error: .cause

With the Error .cause, you can add more essential information to the errors you receive. You should specify the error options as a second parameter, and with the “cause“ key you can pass the error that you want to chain.

Before:

				
					const weatherNow = async (city) => {
    try {
      const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=67a20d293903cbcf9aab38633b30fbf9`);
      const info = await response.json();
      const description = info.weather[0].description;
      return description;
    } catch (error) {
throw new Error('Something went wrong')
    }
  }
 
try {
    await weatherNow('');           //Empty string
} catch(error) {
    console.log(error);
}

//Error: Something went wrong
    //at weatherNow (<anonymous>:8:7)
    //at async <anonymous>:13:5

After:

				
					const weatherNow = async (city) => {
    try {
      const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=67a20d293903cbcf9aab38633b30fbf9`);
      const info = await response.json();
      const description = info.weather[0].description;
      return description;
    } catch (error) {
throw new Error('Something went wrong', { cause: error })
    }
  }
 
try {
    await weatherNow('');        //Empty String
} catch(error) {
    console.log(error.cause);
}

//TypeError: Cannot read properties of undefined (reading '0')
    //at weatherNow (<anonymous>:5:39)
    //at async <anonymous>:13:5

New Members of Classes

Static class fields and methods are not used on instances of a class. Instead, they can be called on the class itself and are declared using the static keyword. Static methods are often utility functions and helpers, whereas static properties are useful for caches, fixed-configuration, or any other data we do not need to be replicated across instances.

Before:

				
					class User {
    firstName = 'Jon';
};
  
console.log(User.firstName); 
  
//undefined

After:

				
					class User {
    static firstName = 'Jon';
};

console.log(User.firstName); 
  
//Jon

Private Slot Checks

EcmaScript 2022 added new features such as private instance fields, methods, and accessors. To initialize a private method or a field before you had to add an underscore at the beginning of its name, but this did not guarantee that the method/field will be private. Now, you just need to add a # at the beginning of the method name to have it declared as private.

It looks like this:

				
					class User {
    firstName = 'John';
    lastName = 'Doe';
    #role = 'Admin';
}
 
const adminUser = new User();
console.log(adminUser.role); 
  
//undefined

				
					class User {
    firstName = 'John';
    lastName = 'Doe';
    role = 'Admin';
    #sayHi() {
        return this.firstName + ' ' + this.lastName + ' with role ' + this.role + ' says Hi!';
    }
}
 
  const adminUser = new User();
  console.log(adminUser.sayHi());      
  
//TypeError: adminUser.sayHi is not a function

Top-level Await

Before ECMAScript 2022 await could only be used in the scope of asynchronous functions. Now the await keyword can be used outside of an async function within a JavaScript module. This means that a module waits for its child modules that use await to execute before it runs itself.

				
					const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=london&appid=67a20d293903cbcf9aab38633b30fbf9`);
const info = await response.json();
const description = info.weather[0].description;
console.log(description);

We will receive an error:

				
					SyntaxError: await is only validin async functions and the top-level bodies of modules

With ECMAScript 2022 it works fine and you will see the following:

				
					//clear sky

Conclusion

Nowadays when technology is rapidly evolving being up to date is an important part of working as a software developer.

The EcmaScript specification for 2022 contains some significant changes that aim to provide convenience and efficiency in programming by allowing you to write more expressive and concise code. After reading this post, you are now familiar with all of the new features and it is up to you to choose which of them to use into your JavaScript programming.

The post All The New JavaScript Features Coming Up with ECMAScript 2022 appeared first on SoftUni Global.

An Insider’s Perspective on the IT Industry

Aleksandar Peev — Thu, 14 Apr 2022 15:00:00 +0000

Meet William Abboud. He is a senior software engineer that decided to talk about his path as a developer so far. We asked William some questions that might help you start your career as a programmer.

How did you get into programming?

As a student, I liked computer networking. In 12th grade, I first had to write programs with C++ and Pascal. The materials were not enough, and I watched a few youtube video tutorials and got hooked. After I graduated, I moved to the United Kingdom and started learning computer science there.

Which language to choose if you are a beginner?

The thing is, after years of programming development, it doesn’t matter. You need to learn Algorithms and Data Structures, and from there, it will be easy. The real question is, what do you want to do with programming? It depends on what you want to do. But still, I will prefer C# and Python.

Would you recommend JavaScript for beginners?

Yes. With JS, you can quickly see results on your screen. You usually program web apps, and you can see your results almost immediately. In C# or Java, your first tasks are mathematical equations, but in JS, the problems are more interesting. For example, you will have to move a box from the left to the right part of your screen. JavaScript is easy to start with, but it is hard to master. There is a great community and good tools. You can debug with chrome and so on. There are a lot of solved problems on the web.

What is the difference between a front and back-end developer?

A front-end developer creates a user interface that the user interacts with. Everything that the user clicks and see is what a front-end dev does. The back-end developer works with data and ensures that the users see the correct data. There is a lot behind the scene logic. You cannot make a site without the two sides.

What are the perks of a programmer's job?

One of the main perks is flexibility. You can work remotely the job from another country. Most companies are ok with you not going to the physical location. The job pays well. It can be a very creative and satisfying job.

Is it true that for each new project, you have to learn something?

Yeah. You have to constantly be on your feet and search for new techniques and tools. It’s a field where things can change very fast in a matter of a year. You always need to learn. You have to be wary of what is trending and the best tools to solve programming problems.

Will Machine Learning replace Software Engineering?

Partly yes. It’s a great tool, but I don’t think it will happen fully. In the next 10-15 years, I don’t believe that it will happen. It will make my job easier but not take my job.

What would you say recruiters look for when hiring?

They always look for experienced people. They don’t want to hire inexperienced, but some companies have to hire junior developers. There is a deficit for junior developers. For me, the most necessary quality is passion and motivation.

How can you best prepare for a job interview?

Every company has a different interview process. What I would say, research a company and the position you apply for. Ask the recruiters questions. Search for typical interview questions on the web, and I believe that you will be ready for the interview.

Do you want to be like him? Become a programmer with comprehensive, up-to-date online classes led by an expert. Study in your own time and at your own pace. Go back any time and rewatch the lessons, if needed. Click the button below, and start your journey today!

Video Topics

In the video, William talks about the following topics:

How did you get into programming?
Which language to choose if you are a beginner?
Would you recommend JavaScript for beginners?
What is the difference between a front and back-end developer?
What are the perks of a programmer’s job?
Is it true that for each new project, you have to learn something?
Will Machine Learning replace Software Engineering?
What would you say recruiters look for when hiring?
How can you best prepare for a job interview?

The post An Insider’s Perspective on the IT Industry appeared first on SoftUni Global.

What Do We Need To Know About JavaScript?

Luben Lubenov — Sun, 24 Jan 2021 16:27:00 +0000

Although JavaScript is developing at an incredible pace and is among the most popular programming languages in the GitHub and Stack-Overflow communities, there are still a number of misconceptions or myths about the language.

The JavaScript Name

Often, novice developers confuse JavaScript with Java, though there is almost nothing in common between the two languages. In fact, JavaScript goes through several language shifts until it gets the name it is has today. It was first developed under the name Mocha in May 1995, but during the ongoing development, Netscape (the company that had developed it) renamed it to LiveScript. The next change comes at the end of the same year when the language gets the name it is known for today – JavaScript. Some people suggest that this is due to the use of Netscape’s Java technology in the creation of their Netscape Navigator browser, and according to others, the name is the result of a contract between Netscape and Sun Microsystems.

Is JavaScript Sufficient?

Many people think that JavaScript is not widely applicable compared to other languages like Java, Python, and so on, since it was created only for 10 days and covered the requirements of strictly specific tasks. Nevertheless, more than 20 years have passed since the creation of the language and he has not stopped developing yet. Today, there are many full-featured JavaScript frameworks, libraries, and plugins that can modify the language to your own needs.

Is JavaScript Used Only For Browser Interactions?

JavaScript has evolved so much over the year of its existence that today the creation of various browser functionalities is just a small part of all the things JavaScript is capable of. Additionally, today JavaScript can be used in the back-end using Node.js and/or Express.js, etc. to create desktop applications using Electron.js, and almost all JavaScript front-end frames are used for iOS and Android apps.

If you want to acquire knowledge of how to build the Front-End structure of a web application, then our end-to-end professional JavaScript program is right for you.

The post What Do We Need To Know About JavaScript? appeared first on SoftUni Global.

JavaScript Archives - SoftUni Global

All The New JavaScript Features Coming Up with ECMAScript 2022

Method .at()

Object: .hasOwn()

RegExp: match indices(‘d’ flag)

Error: .cause

New Members of Classes

Private Slot Checks

Top-level Await

Conclusion

Want to learn to code and start a tech job?

An Insider’s Perspective on the IT Industry

How did you get into programming?

Which language to choose if you are a beginner?

Would you recommend JavaScript for beginners?

What is the difference between a front and back-end developer?

What are the perks of a programmer's job?

Is it true that for each new project, you have to learn something?

Will Machine Learning replace Software Engineering?

What would you say recruiters look for when hiring?

How can you best prepare for a job interview?

Want to learn to code and start a tech job?

Video Topics

What Do We Need To Know About JavaScript?

The JavaScript Name

Is JavaScript Sufficient?

Is JavaScript Used Only For Browser Interactions?

Want to learn to code and start a tech job?