Somnath Singh

Somnath Singh

1623690561

Learn JavaScript’s Most Feared Feature

In this article, we cover the all-important yet so confusing topic in JavaScript which is the “this” keyword.

TL;DR

If “this” scares you, do not worry! We will learn how to determine the value of the “this” keyword using five simple rules.

Those five simple rules are as follows:

  • The Regular One — Default binding
  • Function Inside an ObjectImplicit binding
  • Function BorrowingExplicit binding
  • Using Function to Create ObjectsNew binding
  • How Arrow Function Differs from the Regular Ones— Lexical binding

Don’t worry about these scary names. Computer Science people have a fancy for naming terms so that they sound extra-terrestrial. Under the hood, they are just common concepts that any willing human can understand.

The “this” variable corresponds to how you invoke a function. These rules help us to determine the value of this in various scenarios.

Once you understand these rules, then you would not fear them anymore.

Before we begin, please go through this article to understand how this works.

What is “this” in brief

In JavaScript, whenever a function is called, a new execution context is created by the JavaScript engine. That execution context exists until the function has finished executing. Every execution context contains a variable called ‘this’.

#Rule 1. Default binding

When calling a function in a standard way shown above, “this” will actually refer to the global object!

In the browser, the global object means the Window object.

One exception to remember — that is when strict mode is enabled. By writing “use-strict” you can prevent anything from being declared on the global object.

#Rule 2. Implicit binding

If the function is contained within an object, then that object will be referenced by “this”.

For the above, the this keyword will point to the personObj

#Rule 3. Explicit binding

We saw how this points to the global object and in another case, it points to the object which contains it. Wouldn’t it be nice to able to control what this variable ends up being when the function is called?

Words like call, apply, and bind usually causes terror in new developers. In reality, they are all functions that can be used to explicitly set the value of “this”.

Let us understand it with an example.

Suppose we have two objects, let us say personObj and readerObj

Both the object has a name property. The personObj has a function that can print the value inside the name but, the readerObj does not have any such feature!

Here we can make use of one of the three methods — call, apply or bind.

This process is called function borrowing.

We borrowed the sayName method for the readerObj.

Now we can print the name property that is in readerObj

We are calling the sayName method from personObj, but at the same time, we are instructing the JavaScript engine that the ‘this’ variable in the sayName method should point to readerObj.

So when the JavaScript engine executes the code, the this variable in the sayName function does not point to the personObj but it points to the readerObj.

Does that make sense?

Not just that — we can also pass some arguments when we use the call function.

We passed Namaste as an argument

We can make use of the argument in the sayName method.

When we execute the code, we will get the output along with the passed argument.

The apply method works the same way, but instead of regular arguments, it takes an array as an argument.

The bind method also works the same way — it can accept a regular argument.

But unlike call and apply — bind returns a function — that function can be stored in a variable and can be executed in the future.

One can see the use of bind in function currying — a topic that we will cover in the future.

#Rule 4. New binding

We use the new keyword to create an instance or copy of an object. What the new keyword does is:

  • It creates an empty object and then instructs the keyword this to point to that empty object.
  • It then adds a return this statement to the end of that function.

Remember, when an instance of an object gets created using the new keyword, “this” always points to that newly created instance.

Let us understand this with an example.

When we run this code, what are we supposed to get?

As we said — an empty object!

What is happening under the hood is

What? Are we invoking the function?

Yes!

See, I told you it is getting invoked.

Let us look at the whole thing.

If we put some value in the function, it will put that in the newly created object and then return it!

When we console.log(newPersonObj)

Let us finish this concept with an animation.

In the above example, we are using a function to create an object.

This type of function is known as a function constructor.

Remember, in the newPersonObj, which stores the copy of personObj— the “this" variable points to empty personObj

Does it make sense now?

Good! Let us now understand the last rule.

#Rule 5. Lexical binding

With the advent of ES6 — we got arrow functions. Arrow functions with their ultra-lean syntax are a natural replacement for their traditional anonymous counterparts.

To explicitly invoke an arrow function, as with a regular anonymous function, you would assign it to a variable first:

Arrow functions are just like regular anonymous functions, with one major exception- the behavior of this object inside the function.

In a regular function, the value of “this” is context-based- call the function inside a link, and “this” points to the link’s object; call it inside one more function like setInterval(), then “this” points to the global window object.

For example, the following example attempts to call the start() method of a custom object to increment its counter property by 1 every second, though it fails due to an incorrect assumption of the “this” object reference counter.

In the above, this.counter fails to properly reference the counter property of the countup object, though the error may not be so obvious to spot. One can either mistakenly or carelessly assume that “this” points to the countup object, when in fact it points to the global window object due to the context “this” is being called- inside the global window method setInterval().

The result is a reference to a non-existent window.counter property that will repeatedly return NaN when we try to increment it. To properly reference the countup object then inside the anonymous function, we should cache a reference to the correct “this” object before the context changes to a different one:

The “this” object inside an arrow function is lexically bound, which is just a fancy way of saying its value is static and determined by the place where the “this" keyword is defined.

Contrast that with regular functions, where “this” is dynamic and based on the context it’s called regardless of the scope at the time “this” was defined.

Let’s take the previous example that gave us trouble initially, and see how changing over to using an arrow function intuitively addresses the problem:

We solved the problem by just using an arrow function.

Conclusion

If you understood all the rules, then pat yourself on the back — you deserve it! Now you are no more someone who is afraid of JavaScript’s most confusing concept — the “this” keyword.

In this article we learned:

  • When calling a function in a standard way shown above, “this” will actually refer to the global object!
  • If the function is contained within an object, then “this” will point to that object.
  • call, apply and bind are functions that are available to us by JavaScript to alter the behaviour of “this” in our program.
  • new keyword or operator when used makes an empty object, then instructs “this” to point to that newly created object
  • Arrow function enables us to lexically bind the “this” keyword in the program, what this means is its value is static and determined by the place where the “this" keyword is defined.

Note of Gratitude

I wanted to take this last opportunity to say thank you.

Thank you for being here! I would not be able to do what I do without people like you who follow along and take that leap of faith to read my post.

I hope you’ll join me in my future blog post and stick around because I think we have something great here. And I hope that I will be able to help you along in your career for many more years to come!

See you next time. Bye!

#javascript #node #web-development

What is GEEK

Buddha Community

Learn JavaScript’s Most Feared Feature
Sival Alethea

Sival Alethea

1624298400

Learn JavaScript - Full Course for Beginners. DO NOT MISS!!!

This complete 134-part JavaScript tutorial for beginners will teach you everything you need to know to get started with the JavaScript programming language.
⭐️Course Contents⭐️
0:00:00 Introduction
0:01:24 Running JavaScript
0:04:23 Comment Your Code
0:05:56 Declare Variables
0:06:15 Storing Values with the Assignment Operator
0:11:31 Initializing Variables with the Assignment Operator
0:11:58 Uninitialized Variables
0:12:40 Case Sensitivity in Variables
0:14:05 Add Two Numbers
0:14:34 Subtract One Number from Another
0:14:52 Multiply Two Numbers
0:15:12 Dividing Numbers
0:15:30 Increment
0:15:58 Decrement
0:16:22 Decimal Numbers
0:16:48 Multiply Two Decimals
0:17:18 Divide Decimals
0:17:33 Finding a Remainder
0:18:22 Augmented Addition
0:19:22 Augmented Subtraction
0:20:18 Augmented Multiplication
0:20:51 Augmented Division
0:21:19 Declare String Variables
0:22:01 Escaping Literal Quotes
0:23:44 Quoting Strings with Single Quotes
0:25:18 Escape Sequences
0:26:46 Plus Operator
0:27:49 Plus Equals Operator
0:29:01 Constructing Strings with Variables
0:30:14 Appending Variables to Strings
0:31:11 Length of a String
0:32:01 Bracket Notation
0:33:27 Understand String Immutability
0:34:23 Find the Nth Character
0:34:51 Find the Last Character
0:35:48 Find the Nth-to-Last Character
0:36:28 Word Blanks
0:40:44 Arrays
0:41:43 Nest Arrays
0:42:33 Access Array Data
0:43:34 Modify Array Data
0:44:48 Access Multi-Dimensional Arrays
0:46:30 push()
0:47:29 pop()
0:48:33 shift()
0:49:23 unshift()
0:50:36 Shopping List
0:51:41 Write Reusable with Functions
0:53:41 Arguments
0:55:43 Global Scope
0:59:31 Local Scope
1:00:46 Global vs Local Scope in Functions
1:02:40 Return a Value from a Function
1:03:55 Undefined Value returned
1:04:52 Assignment with a Returned Value
1:05:52 Stand in Line
1:08:41 Boolean Values
1:09:24 If Statements
1:11:51 Equality Operator
1:13:18 Strict Equality Operator
1:14:43 Comparing different values
1:15:38 Inequality Operator
1:16:20 Strict Inequality Operator
1:17:05 Greater Than Operator
1:17:39 Greater Than Or Equal To Operator
1:18:09 Less Than Operator
1:18:44 Less Than Or Equal To Operator
1:19:17 And Operator
1:20:41 Or Operator
1:21:37 Else Statements
1:22:27 Else If Statements
1:23:30 Logical Order in If Else Statements
1:24:45 Chaining If Else Statements
1:27:45 Golf Code
1:32:15 Switch Statements
1:35:46 Default Option in Switch Statements
1:37:23 Identical Options in Switch Statements
1:39:20 Replacing If Else Chains with Switch
1:41:11 Returning Boolean Values from Functions
1:42:20 Return Early Pattern for Functions
1:43:38 Counting Cards
1:49:11 Build Objects
1:50:46 Dot Notation
1:51:33 Bracket Notation
1:52:47 Variables
1:53:34 Updating Object Properties
1:54:30 Add New Properties to Object
1:55:19 Delete Properties from Object
1:55:54 Objects for Lookups
1:57:43 Testing Objects for Properties
1:59:15 Manipulating Complex Objects
2:01:00 Nested Objects
2:01:53 Nested Arrays
2:03:06 Record Collection
2:10:15 While Loops
2:11:35 For Loops
2:13:56 Odd Numbers With a For Loop
2:15:28 Count Backwards With a For Loop
2:17:08 Iterate Through an Array with a For Loop
2:19:43 Nesting For Loops
2:22:45 Do…While Loops
2:24:12 Profile Lookup
2:28:18 Random Fractions
2:28:54 Random Whole Numbers
2:30:21 Random Whole Numbers within a Range
2:31:46 parseInt Function
2:32:36 parseInt Function with a Radix
2:33:29 Ternary Operator
2:34:57 Multiple Ternary Operators
2:36:57 var vs let
2:39:02 var vs let scopes
2:41:32 const Keyword
2:43:40 Mutate an Array Declared with const
2:44:52 Prevent Object Mutation
2:47:17 Arrow Functions
2:28:24 Arrow Functions with Parameters
2:49:27 Higher Order Arrow Functions
2:53:04 Default Parameters
2:54:00 Rest Operator
2:55:31 Spread Operator
2:57:18 Destructuring Assignment: Objects
3:00:18 Destructuring Assignment: Nested Objects
3:01:55 Destructuring Assignment: Arrays
3:03:40 Destructuring Assignment with Rest Operator to Reassign Array
3:05:05 Destructuring Assignment to Pass an Object
3:06:39 Template Literals
3:10:43 Simple Fields
3:12:24 Declarative Functions
3:12:56 class Syntax
3:15:11 getters and setters
3:20:25 import vs require
3:22:33 export
3:23:40 * to Import
3:24:50 export default
3:25:26 Import a Default Export
📺 The video in this post was made by freeCodeCamp.org
The origin of the article: https://www.youtube.com/watch?v=PkZNo7MFNFg&list=PLWKjhJtqVAblfum5WiQblKPwIbqYXkDoC&index=4

🔥 If you’re a beginner. I believe the article below will be useful to you ☞ What You Should Know Before Investing in Cryptocurrency - For Beginner
⭐ ⭐ ⭐The project is of interest to the community. Join to Get free ‘GEEK coin’ (GEEKCASH coin)!
☞ **-----CLICK HERE-----**⭐ ⭐ ⭐
Thanks for visiting and watching! Please don’t forget to leave a like, comment and share!

#javascript #learn javascript #learn javascript for beginners #learn javascript - full course for beginners #javascript programming language

Mike  Kozey

Mike Kozey

1656151740

Test_cov_console: Flutter Console Coverage Test

Flutter Console Coverage Test

This small dart tools is used to generate Flutter Coverage Test report to console

How to install

Add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dev_dependencies:
  test_cov_console: ^0.2.2

How to run

run the following command to make sure all flutter library is up-to-date

flutter pub get
Running "flutter pub get" in coverage...                            0.5s

run the following command to generate lcov.info on coverage directory

flutter test --coverage
00:02 +1: All tests passed!

run the tool to generate report from lcov.info

flutter pub run test_cov_console
---------------------------------------------|---------|---------|---------|-------------------|
File                                         |% Branch | % Funcs | % Lines | Uncovered Line #s |
---------------------------------------------|---------|---------|---------|-------------------|
lib/src/                                     |         |         |         |                   |
 print_cov.dart                              |  100.00 |  100.00 |   88.37 |...,149,205,206,207|
 print_cov_constants.dart                    |    0.00 |    0.00 |    0.00 |    no unit testing|
lib/                                         |         |         |         |                   |
 test_cov_console.dart                       |    0.00 |    0.00 |    0.00 |    no unit testing|
---------------------------------------------|---------|---------|---------|-------------------|
 All files with unit testing                 |  100.00 |  100.00 |   88.37 |                   |
---------------------------------------------|---------|---------|---------|-------------------|

Optional parameter

If not given a FILE, "coverage/lcov.info" will be used.
-f, --file=<FILE>                      The target lcov.info file to be reported
-e, --exclude=<STRING1,STRING2,...>    A list of contains string for files without unit testing
                                       to be excluded from report
-l, --line                             It will print Lines & Uncovered Lines only
                                       Branch & Functions coverage percentage will not be printed
-i, --ignore                           It will not print any file without unit testing
-m, --multi                            Report from multiple lcov.info files
-c, --csv                              Output to CSV file
-o, --output=<CSV-FILE>                Full path of output CSV file
                                       If not given, "coverage/test_cov_console.csv" will be used
-t, --total                            Print only the total coverage
                                       Note: it will ignore all other option (if any), except -m
-p, --pass=<MINIMUM>                   Print only the whether total coverage is passed MINIMUM value or not
                                       If the value >= MINIMUM, it will print PASSED, otherwise FAILED
                                       Note: it will ignore all other option (if any), except -m
-h, --help                             Show this help

example run the tool with parameters

flutter pub run test_cov_console --file=coverage/lcov.info --exclude=_constants,_mock
---------------------------------------------|---------|---------|---------|-------------------|
File                                         |% Branch | % Funcs | % Lines | Uncovered Line #s |
---------------------------------------------|---------|---------|---------|-------------------|
lib/src/                                     |         |         |         |                   |
 print_cov.dart                              |  100.00 |  100.00 |   88.37 |...,149,205,206,207|
lib/                                         |         |         |         |                   |
 test_cov_console.dart                       |    0.00 |    0.00 |    0.00 |    no unit testing|
---------------------------------------------|---------|---------|---------|-------------------|
 All files with unit testing                 |  100.00 |  100.00 |   88.37 |                   |
---------------------------------------------|---------|---------|---------|-------------------|

report for multiple lcov.info files (-m, --multi)

It support to run for multiple lcov.info files with the followings directory structures:
1. No root module
<root>/<module_a>
<root>/<module_a>/coverage/lcov.info
<root>/<module_a>/lib/src
<root>/<module_b>
<root>/<module_b>/coverage/lcov.info
<root>/<module_b>/lib/src
...
2. With root module
<root>/coverage/lcov.info
<root>/lib/src
<root>/<module_a>
<root>/<module_a>/coverage/lcov.info
<root>/<module_a>/lib/src
<root>/<module_b>
<root>/<module_b>/coverage/lcov.info
<root>/<module_b>/lib/src
...
You must run test_cov_console on <root> dir, and the report would be grouped by module, here is
the sample output for directory structure 'with root module':
flutter pub run test_cov_console --file=coverage/lcov.info --exclude=_constants,_mock --multi
---------------------------------------------|---------|---------|---------|-------------------|
File                                         |% Branch | % Funcs | % Lines | Uncovered Line #s |
---------------------------------------------|---------|---------|---------|-------------------|
lib/src/                                     |         |         |         |                   |
 print_cov.dart                              |  100.00 |  100.00 |   88.37 |...,149,205,206,207|
lib/                                         |         |         |         |                   |
 test_cov_console.dart                       |    0.00 |    0.00 |    0.00 |    no unit testing|
---------------------------------------------|---------|---------|---------|-------------------|
 All files with unit testing                 |  100.00 |  100.00 |   88.37 |                   |
---------------------------------------------|---------|---------|---------|-------------------|
---------------------------------------------|---------|---------|---------|-------------------|
File - module_a -                            |% Branch | % Funcs | % Lines | Uncovered Line #s |
---------------------------------------------|---------|---------|---------|-------------------|
lib/src/                                     |         |         |         |                   |
 print_cov.dart                              |  100.00 |  100.00 |   88.37 |...,149,205,206,207|
lib/                                         |         |         |         |                   |
 test_cov_console.dart                       |    0.00 |    0.00 |    0.00 |    no unit testing|
---------------------------------------------|---------|---------|---------|-------------------|
 All files with unit testing                 |  100.00 |  100.00 |   88.37 |                   |
---------------------------------------------|---------|---------|---------|-------------------|
---------------------------------------------|---------|---------|---------|-------------------|
File - module_b -                            |% Branch | % Funcs | % Lines | Uncovered Line #s |
---------------------------------------------|---------|---------|---------|-------------------|
lib/src/                                     |         |         |         |                   |
 print_cov.dart                              |  100.00 |  100.00 |   88.37 |...,149,205,206,207|
lib/                                         |         |         |         |                   |
 test_cov_console.dart                       |    0.00 |    0.00 |    0.00 |    no unit testing|
---------------------------------------------|---------|---------|---------|-------------------|
 All files with unit testing                 |  100.00 |  100.00 |   88.37 |                   |
---------------------------------------------|---------|---------|---------|-------------------|

Output to CSV file (-c, --csv, -o, --output)

flutter pub run test_cov_console -c --output=coverage/test_coverage.csv

#### sample CSV output file:
File,% Branch,% Funcs,% Lines,Uncovered Line #s
lib/,,,,
test_cov_console.dart,0.00,0.00,0.00,no unit testing
lib/src/,,,,
parser.dart,100.00,100.00,97.22,"97"
parser_constants.dart,100.00,100.00,100.00,""
print_cov.dart,100.00,100.00,82.91,"29,49,51,52,171,174,177,180,183,184,185,186,187,188,279,324,325,387,388,389,390,391,392,393,394,395,398"
print_cov_constants.dart,0.00,0.00,0.00,no unit testing
All files with unit testing,100.00,100.00,86.07,""

Installing

Use this package as an executable

Install it

You can install the package from the command line:

dart pub global activate test_cov_console

Use it

The package has the following executables:

$ test_cov_console

Use this package as a library

Depend on it

Run this command:

With Dart:

 $ dart pub add test_cov_console

With Flutter:

 $ flutter pub add test_cov_console

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):

dependencies:
  test_cov_console: ^0.2.2

Alternatively, your editor might support dart pub get or flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:test_cov_console/test_cov_console.dart';

example/lib/main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
        // This makes the visual density adapt to the platform that you run
        // the app on. For desktop platforms, the controls will be smaller and
        // closer together (more dense) than on mobile platforms.
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug painting" (press "p" in the console, choose the
          // "Toggle Debug Paint" action from the Flutter Inspector in Android
          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
          // to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Author: DigitalKatalis
Source Code: https://github.com/DigitalKatalis/test_cov_console 
License: BSD-3-Clause license

#flutter #dart #test 

Learning JavaScript: Working with Strings

Strings are the second most common data type used in JavaScript, and in many cases, since JavaScript is so widely used for web applications, it is the prominent data type. In this article I’ll discuss how strings work in JavaScript and how to work with them efficiently and effectively. I’ll also discuss some newer abilities of strings that are just being discovered and used.

Strings Defined

A string is any set of 0 or more characters enclosed in either single quotes or double quotes. The characters in a string can be alphabetic characters, numbers, symbols, and spaces. Here are some examples of JavaScript string literals:

"hello world"
'good bye, world!'
"1600 Pennsylvania Avenue"
'$*&!@ it!'

If you are using single quotes in your string, and you need to embed a single quote to write out a contraction, you use the backslash character (\) as an escape character. To see why you need to do this, let’s look at what happens when you don’t escape a single quote by writing out such a string in the JavaScript shell:

js> 'can't'
typein:1:5 SyntaxError: unexpected token: identifier:
typein:1:5 'can't'
typein:1:5 .....^

The interpreter can’t figure out what to do with the ‘t’ after the single quote.

Now watch what happens when we escape the single quote:

js> 'can\'t'
"can't"

The escape character tells the interpreter to treat the single quote as an apostrophe and not as an “end-of-string” character.

You can embed other characters into a string, including the newline character (\n) and the tab character (\t). Here are some examples using the shell:

js> print("Hello, \n world!");
Hello,
world!
js> print("Hello, \tworld");
Hello,  world

#javascript-training #learn-to-code #learn-to-program #javascript #javascript-tutorial #deep learning

Tia  Gottlieb

Tia Gottlieb

1596632340

Learning JavaScript: Statements, Arithmetic, and Math

In this article I will discuss how to perform arithmetic and more advanced mathematical operations in JavaScript. First, though, I need to discuss how statements are formed and used in JavaScript.

Statements

JavaScript programs are made up of statements. A statement can be anything from a single function call or command to even just a variable name. JavaScript evaluates statements and then executes them.

For example, when you create a variable, you write a statement:

let number = 100;

JavaScript recognizes this as a statement and evaluates it by following its grammar rules. In this case the rule is to assign the expression on the right-hand sign of the assignment operator to the variable on the left-hand side.

As I mentioned above, a statement can be just an expression, as in the following example:

js> 1;
1

You can do the same thing with a variable:

js> let name = "Brendan";
js> name
"Brendan"

Statements can be much more complicated than these examples, though, as you’ll learn as you get deeper into JavaScript. So far, you have seen examples of two types of statements — variable declaration and assignment statements and print statements.

JavaScript Arithmetic

Arithmetic is performed in JavaScript using the arithmetic operators. There are five arithmetic operators:

  • + (Addition)
  • - (Subtraction)
  • * (Multiplication)
  • / (Division)
  • % (Modulo/Remainder)

These operators are binary operators, meaning there must be values on either side of the operator. The + operator and the -operator can also be used as unary operators, in which can they are used to distinguish the sign (positive or negative) of a number.

The JavaScript arithmetic operators also have an order of operations, or precedence, they follow when used in a statement. The order of operations is: 1) modulo; 2) multiplication and division; 3) addition and subtraction.

You can use parentheses to modify the order of operations. When an arithmetic expression is placed inside parentheses, that expression is evaluated before any other operations.

For example, take the expression:

let n = 100 + 3 * 22;

Does n get the value 2266, 103 * 26, or does the variable get the value 166? Without parentheses the value of n is 166 because the multiplication takes place before the addition due to the precedence of the multiplication operator over the addition operator.

#learn-to-code #learning-javascript #javascript #learn-to-program #deep learning

Learning JavaScript: Computing with Object Methods

JavaScript has a set of built-in methods you can use with your user-defined objects. In this article I’m going to discuss several of these methods and how you can use them in your JavaScript programs.

Object.assign

The Object.assign method is used to make a copy of one object into another object. The syntax template for this method is:

Object.assign(target, source);

where source is the object you are copying from and target is the object you are copying into. This method returns the target object if you want to assign it.

Here is a sample program that demonstrates how to use Object.assign:

function Student(name, id, grades) {
  this.name = name;
  this.id = id;
  this.grades = grades;
}
let st1 = new Student("",0,[]);
et st2 = new Student("Jane Doe", 123, [91, 92, 93]);
Object.assign(st1, st2);
print(`${st1.name}, ${st1.id}\n[${st1.grades}]`);

The output from this program is:

Jane Doe, 123
[91, 92, 93]

A good reason to use this method is to make sure that a new object has all the properties and values of the old object. You may accidentally leave something out when writing your own method, while Object.assign will systematically make sure all properties and values are assigned to the new object.

Object.create

The Object.create method creates a new object from an existing object prototype. Here is the syntax template for this method:

const|let|var object-name = Object.create(existing-object);

Let’s look at a few examples to see how this method works in practice. The first example creates a new object from a function and then creates a second object using Object.create:

function Student(name, id, grades) {
  this.name = name;
  this.id = id;
  this.grades = grades;
}
let st1 = new Student("Bob Green", 1234, [81, 77, 92]);
print(`${st1.name}, ${st1.id}\n${st1.grades}`);
let st2 = Object.create(st1);
print(`${st2.name}, ${st2.id}\n${st2.grades}`);

The output from this program is:

Bob Green, 1234
81,77,92
Bob Green, 1234
81,77,92

Code must be written to change the properties of the newly created object.

#learn-to-code #javascript-development #learn-to-program #javascript #learning-javascript