JavaScript is an interpreted and lightweight programming language which has wider applications in the web-based frontends. The original purpose of the language was to make web pages (HTML) "come alive" by adding dynamic behaviours and interactivity.  JavaScript executes in the browser (front-end) and as of today, many backends are also built using JavaScript.

I would like to know more about the ‘map’ and ‘filter’ functions.In which sections are they covered?

In which section is 'map' covered?

Introduction to JavaScript

You may need to perform certain tasks based on whether a condition is true or false. The 'if', 'if...else', 'if...else if...else' statements allow us to take different paths within a program.<h4>If statement</h4>The 'if' statement evaluates an expression and performs a set of tasks when the expression evaluates to true. For example:<pre><code class="language-javascript">var my_name = "teachsomebody"
var your_name = "teachsomebody"
if (my_name === your_name) {
 console.log("We have the same names!!!")
}</code></pre>Since the values of the variables my_name and your_name are the same, the 'if' statement will evaluate to true and code within the 'if' block will be executed.<code>We have the same names!!!</code><h4>If else statement</h4>The 'if...else' statement provides a means to execute alternative code when a condition is not met. Example:<pre><code class="language-javascript">var my_name = "teachsomebody"
var your_name = "teach"
if (my_name === your_name) {
 console.log("We have the same names!!!")
}
else {
 console.log("We have different names")
}</code></pre>Since 'teachsomebody' and 'teach' are not the same, the statement in the 'else' block will execute instead of the code in the 'if' block.<code>We have different names</code><h4>If else if else</h4>The 'if...else if...else' statements provide multiple paths or decision points within a program as opposed to only two paths as described in the previous section. The example below shows four possible paths:<pre><code class="language-javascript">var my_name = "teachsomebody"

if (my_name === "Teach") {
 console.log("My name is " + my_name)
}
else if (my_name === "teachsome") {
 console.log("My name is " + my_name)
}
else if (my_name === "teachsomebo") {
 console.log("My name is " + my_name)
}
else {
 console.log("All conditions were wrong")
 console.log("My name is " + my_name)
}</code></pre>The output will be:<code>All conditions were wrong</code><code>My name is teachsomebody</code>Since all the three comparisons were false.

Conditionals using if

Different data types are supported by JavaScript for the presentation of data as well as for performing various calculations needed for solving programming problems. The following are the supported datatypes:&nbsp;Strings&nbsp;Arrays&nbsp;Numbers&nbsp;Boolean&nbsp;&nbsp;<h4>JavaScript Strings&nbsp;</h4>A string stores a series of characters. JavaScript can automatically convert between string primitives and String objects, and therefore any helper method designed for a String object can be used on a string primitive.&nbsp;The syntax of creating a string in JavaScript is given below&nbsp;&nbsp;<pre><code class="language-javascript">var st = new String("Teachsomebody");&nbsp;</code></pre>Strings have some common properties like a constructor which provides a reference to the string function from which the object is being created, <code>length()</code> property providing the number of characters or length of the string and also the <code>Prototype()</code> property which enables the addition of procedures and properties to the object.&nbsp;Helper methods for both string objects and string primitives are already discussed in the JavaScript built-in functions section. Review the previous section for further details.&nbsp;<h4>JavaScript Arrays&nbsp;</h4>Arrays are for storing multiple instances or values by a single variable. Arrays store a collection of values, characters or elements having the same type in a fixed-size successive pattern. The following syntax presents a simple way of creating a new array object<pre><code class="language-javascript">var vegetables = new Array( "tomatoes", "carrots", "onions" );</code></pre>or by using square brackets:<pre><code class="language-javascript">var vegetables = [ "tomatoes", "carrots", "onions" ];</code></pre>Arrays also have some properties like a constructor which provides a reference to the array function from which the object is being created, <code>length()</code> property providing the number of elements of the array and also the <code>Prototype()</code>property which enables the addition of procedures and properties to the object. A list of the methods of the Array object along with their descriptions are given in the section of <a href="https://teachsomebody.com/course/view/introduction-to-javascript/EtCqT0wFlBCLd0EABdTy0/built-in-functions?sid=9a8dRGd8Xz4gOKBdZeS3A">built-in functions.&nbsp;</a>&nbsp;<h4>JavaScript Numbers&nbsp;&nbsp;</h4>The Number object play a very important role in JavaScript programming as they are used to present numerical data like integers, natural numbers or floating-point numbers.Given below is the syntax for creating a number object&nbsp;&nbsp;<pre><code class="language-javascript">var val = new Number(number);</code></pre><h4>JavaScript Boolean&nbsp;</h4>The Boolean Object represent only two values which are either true or false or can be represented as 1 or 0. If the value parameter does not consist of any valid value, then the object holds the initial value of false.The syntax of creating a Boolean object is given below<pre><code class="language-javascript">var x = new Boolean(value);</code></pre>The two properties of the Boolean object are <code>constructor()</code> and <code>prototype()</code> similar to the global objects as explained above.&nbsp;

Datatypes

Another means by which we can execute certain statements based on a condition is using the 'switch...case' syntax. This condittional style makes code more readable and provides a means to compare multiple values via a single switch statement.Syntax:<pre><code class="language-javascript">switch (&lt;variable or constant&gt;) {
 case &lt;value1&gt;:
 &lt;statements&gt;
 break
 case &lt;value2&gt;:
 &lt;statements&gt;
 break
 default:
 &lt;statements&gt;
}</code></pre>The statements in the 'case' whose value is equal to the constant in the switch will be executed. If not case value is equal to the constant in the switch, the dafault block will then be executed.Example:<pre><code class="language-javascript">const x = 5
switch (x) {
 case 2:
 console.log("Case 2 block is executed")
 break
 case 4:
 console.log("Case 4 block is executed")
 break
 case 5:
 console.log("Case 5 block is executed")
 break
 default:
 console.log("Default block is executed")
}</code></pre>Output will be:<code>Case 5 block is executed</code>since the third case value (5) is equal to the value of x.In case none of the case values was equal to 5, the default block would execute.

Conditionals using switch case

JavaScript has many different built-in functions which ease the process of coding. Built-in functions are pre-coded functions that are readily available to use in one's project.&nbsp;
Examples are as below:&nbsp;
<ul>
<li><code>toExponential()</code> - It displays a number in the form of an exponent&nbsp;</li>
<li><code>toFixed()</code> - Defines the number of digits to the right of a decimal number</li>
<li><code>toLocaleString()</code> - Returns the string value of a number&nbsp;</li>
<li><code>toPrecision()</code> - Define the total numbers of a digit to be displayed after the decimal point</li>
<li><code>valueOf()</code> - Returns the actual value of a number&nbsp;</li>
<li><code>charAt()</code> - Returns the value of a character at a specific index&nbsp;</li>
<li><code>concat()</code> - Concatenates or appends two strings to produce a new string&nbsp;</li>
<li><code>length()</code> - Returns the total length of a string </li>
<li><code>replace()</code> - Replaces parts of a string with the a new string&nbsp;&nbsp;</li>
<li><code>Date()</code> - Return the time and date of today &nbsp;</li>
<li><code>getDate()</code> - Returns the date of the current month in accordance with the local time&nbsp;&nbsp;</li>
<li><code>getDay()</code> - Returns the day of the current week in accordance with the local time &nbsp;</li>
<li><code>getHours()</code> - Returns the hours of the specified day in accordance with the local time &nbsp;</li>
<li><code>getMilliseconds()</code> - Returns the milli seconds of the specified date in accordance with the local time&nbsp;</li>
<li><code>getMinutes()</code> - Returns the minutes of the specified date in accordance with the local time&nbsp;</li>
<li><code>every()</code> - Returns the value to be true if every element present in an array is in accordance with the testing function given</li>
<li><code>filter()</code> - Filter out the elements of an array according to the given condition and creates a new array &nbsp;</li>
<li><code>forEach()</code> - Calls the function for every element in the array &nbsp;</li>
<li><code>push()</code> and <code>pop()</code> - To remove and add an element to the index of the array respectively &nbsp;</li>
<li><code>abs()</code> - Provides the absolute value of a number&nbsp;</li>
<li><code>acos()</code> - Provides the arc cosine of the number&nbsp;</li>
</ul>
Similarly we have functions like <code>cos()</code>, <code>sin()</code>, <code>tan()</code>, <code>acos()</code>, <code>asin()</code>, <code>atan()</code>, <code>log()</code> and many other mathematical functions.&nbsp;

Built-in Functions

Expressions and operators play very important roles in any programming language. To understand this, let's take a simple expression of &nbsp;
<pre>5+7=12</pre>
Here in this expression, <code>5</code> and <code>7</code> are referred to as operands and <code>+</code> is known as the operator while the whole expression is referred to as the operation of addition. JavaScript provides a number of different operators: 
<ul>
<li>Arithmetic Operators&nbsp;</li>
<li>Comparison Operators&nbsp;</li>
<li>Logical Operators&nbsp;</li>
<li>Assignment Operators&nbsp;</li>
</ul>
<h6>Arithmetic Operators&nbsp;</h6>
These are the arithmetic operators that are supported in JavaScript:&nbsp;
<ol>
<li>Addition using the symbol <code>+</code> for example <code>2 + 3 = 5</code>&nbsp;</li>
<li>Subtraction using the symbol <code>–</code> for example <code>10 - 20</code> will equals <code>-10</code></li>
<li>Multiplication using the symbol <code>*</code> for example <code>10*20</code> will equals <code>200</code>&nbsp;</li>
<li>Division using the symbol <code>/</code> for example <code>20/10</code> gives <code>2</code>&nbsp;</li>
<li>Modulus using the symbol <code>%</code> which provides the remainder of an integer division for example <code>20 % 10</code> will be <code>0</code>.&nbsp;</li>
<li>Increment using the symbol <code>++</code> which increases the value of integer by one. For example, <code>10++</code> will give <code>11</code>&nbsp;</li>
<li>Decrement using the symbol <code>--</code> which decreases the value of integer by one. For example, <code>10--</code> will give <code>9</code>.&nbsp;</li>
</ol>
<h6>Comparison Operators&nbsp;</h6>
Comparison operators provide a means to compare two values. The following comparison operators are supported.&nbsp;
<ul>
<li>Equal operator using the symbol <code>==</code> for comparing two values and giving true result if they are equal to each other. For Example, <code>10 == 20</code> is not true (false).&nbsp;</li>
<li>Not equal operator using the symbol <code>!=</code> for comparing two values and giving true result if they are not equal to each other. For Example, <code>10 != 20</code> is true.&nbsp;</li>
<li>Greater than operator using the symbol <code>&gt;</code> for comparing two values and returning true if the left side is greater than the right side. For Example, <code>20 &gt; 10</code> is true.&nbsp;</li>
<li>Less than operator using the symbol <code>&lt;</code> for comparing two values and returning true if the left side is less than the right side. For Example, <code>10 &lt; 20</code> is true.&nbsp;</li>
<li>Greater than or equal to operator using the symbol <code>&gt;=</code> for comparing two values and returning true if the left operand is greater than or equal to the right operand. For Example, <code>20 &gt;= 10</code> is true.&nbsp;</li>
<li>Less than or equal to operator using the symbol &lt;= forcomparing two values and returning true if the left operand is less than or equal to the right operand. For Example, <code>20 &lt;= 10</code> is not true.&nbsp;</li>
</ul>
<h6>Logical Operators&nbsp;</h6>
<ul>
<li>Logical 'And' using the symbol &amp;&amp; returning true if both operands of the expression are true. </li>
</ul>
For example if <code>x=true</code> and <code>y=true</code> then <code>x</code><code> &amp;&amp; y</code> is true and if <code>x=true</code> and <code>y=false</code> then <code>x &amp;&amp; y</code> is false
<ul>
<li>Logical 'Or' using the symbol || returning true if any of the operands is true. </li>
</ul>
For example if x=true and y=false then x || y is true and if x=false and y=false then x || y is false
<ul>
<li>Logical 'Not' using the symbol ! reverses the logical state of an operand. The logical 'Or' is a unary operator. </li>
</ul>
For example if <code>x=true</code> then <code>!x</code> is false.
<h6>Assignment Operators&nbsp;</h6>
<ul>
<li>Simple Assignment Operator using the symbol <code>=</code>, assigns the value of the right side to the left side. </li>
</ul>
For example, given y<code> = 5</code> and z<code> = 10,</code> then <code>x = y+z</code> assigns the value <code>15</code> to <code>x</code>
<ul>
<li>Addition and Assignment Operator using the symbol <code>+=</code>, performs the addition of the left operand to the right operand and then assigns the result to the left operand. </li>
</ul>
For example, given <code>x</code> = 5 and z = 11, then x += z assigns the value 16 to x&nbsp;
<ul>
<li>Subtraction and Assignment Operator using the symbol <code>-=</code>, performs the subtraction of the right operand from the left operand and then assigns the result to the left operand. &nbsp;</li>
</ul>
For example, given x = 11 and z = 5, then x -= z assigns the value 6 to x&nbsp;
<ul>
<li>Multiplication and Assignment Operator using the symbol <code>*=</code>, performs the multiplication of the right operand with the left operand and then assigns the result to the left operand. </li>
</ul>
For example, given x = 11 and z = 5, then x *= z assigns the value <code>55</code> to x&nbsp;
<ul>
<li>Division and Assignment Operator using the symbol /=, performs the division of the left operand by the right operand and then assigns the result to the left operand. For example, X/= Z is equal to X=X­/Z&nbsp;</li>
</ul>
For example, given x = 10 and z = 5, then x /= z assigns the value <code>2</code> to x&nbsp;
<ul>
<li>Modulus and Assignment Operator using the symbol <code>%=</code>, performs modulus using two operands and assigns the result to the left operand. For example, X%= Z is equal to X=X­%A.&nbsp;</li>
</ul>
For example, given x = 11 and z = 5, then x %= z assigns the value <code>1</code> to x&nbsp;

Expressions and Operations

JavaScript is an interpreted and lightweight programming language which has wider applications in the web-based frontends. The original purpose of the language was to make web pages (HTML) "come alive" by adding dynamic behaviours and interactivity. JavaScript executes in the browser (front-end) and as of today, many backends are also built using JavaScript.
JavaScript is easy to learn, implement and test as it does not require any special software for its execution. All browsers such as Chrome, Safari, Mozilla Firefox on all devices support the interpretation and execution of JavaScript.&nbsp;
Within web applications, JavaScript may be used for:&nbsp;
<ul>
<li>direct manipulation of HTML elements - adding, removing, showing and hiding of elements at run time. JavaScript may also be used to dynamically style (add CSS) HTML elements.</li>
<li>validation of form inputs - checking the validity of information entered by a user before processing. This is normally done in cases of user authentication, correction of form inputs before saving to databases, etc.</li>
<li>notifications - JavaScript may be used to elevate dynamic pop-ups on the screen of webpages in order to show various kind of notifications to users.</li>
</ul>

Introduction

Variables are memory locations where data may be stored. Data type define the type of data that a vriable may store. Variables are named containers which are used to contain and refer to saved data inside them which may be called by only referring to the name assigned.JavaScript support three primitive data types:&nbsp;<ul><li>Mathematical Numbers used for everyday problems like 123, 120.50 etc. All numbers in JavaScript are represented as floating-point values.</li><li>Strings consisting of the text and special characters e.g. "This text is a string!" etc.</li><li>Boolean values defined as true or false.</li></ul>Along with these primitive data types, Java Script also supports two trivial data types, null and undefined, both of these are used to define and represent only a single value.Variables are declared by using the key word of var as shown in the example:<pre><code class="language-javascript">var x;
var name;</code></pre>Variable initialization is a way of assigning data to a variable. You can initialize the variable with the data when you are creating the variable or later in the program whenever the need arises for handling the data and assigning it to a variable. Variable initialization is explained below by using an example:<pre><code class="language-javascript">var player_name = "Evans";
var money = 2000;</code></pre>JavaScript variables can hold the value of any datatype without providing any specification of which datatype the variable will hold at the time of its declaration making it an untyped language. JavaScript is able to infer datatypes during run time.Java Script Variable Scope&nbsp;The scope of a variable is the area of your program wherein it is characterized. JavaScript variables have only two scopes explained below&nbsp;<ul><li>Global variables are the type of variables which have a global scope meaning that this variable is visible anywhere in the JavaScript code.</li><li>Local variables are the type of variables that will be visible in the code only within a function where this variable has been defined and initialized. Function parameters used in a function always remain local to that function.</li></ul>The precedence of the local and global variable varies according to the code context. The local variable has always a precedence over the global variable within the body of a function if both variables have the same name. &nbsp;<pre><code class="language-javascript">var test_var = "I am global"; // Global variable
function scoped() {
 var test_var = "I am local"; // Local variable
 document.write(local_var);
}</code></pre>The output of this whole code will be:<code>I am local</code>&nbsp;Naming Convention for the JavaScript Variables&nbsp;<ul><li>Variable names in JavaScript are case sensitive for example Y and y will represent two different variables.</li><li>Do not use JavaScript reserved keywords as a variable name. The list of JavaScript keywords are:</li></ul>break case catch class const continue&nbsp; debugger default delete do else export&nbsp; extends finally for function if import&nbsp; in instanceof new return super switch&nbsp; this throw try typeof var void while with yield&nbsp;&nbsp;<ul><li>A variable name must not start with the numerical digits from 0 to 9. It may start with a letter or an underscore.</li></ul>

Variables

Java script has a very simple and easy to learn syntax. You can write any JavaScript statement and execute it by placing it within the &lt;script&gt;... &lt;/script&gt; tags in HTML documents. The &lt;script&gt; tag indicates to the browser that it has reached a point where all the text between these &lt;script&gt; tags are sets of statements that need to be executed. A simple example of Java Script syntax is as follows:<pre><code class="language-javascript">&lt;script&gt;
JavaScript code 
&lt;/script&gt;&nbsp;&nbsp;&nbsp;</code></pre>Let us illustrate the syntax of JavaScript with a simple program that prints “Hey there!”.&nbsp;&nbsp;&nbsp;<pre><code class="language-html">&lt;html&gt; 
 &lt;body&gt; 
 &lt;script&gt; 
 &lt;!-- 
 document.write("Hey there!") 
 //--&gt; 
 &lt;/script&gt; 
 &lt;/body&gt; 
&lt;/html&gt;</code></pre>The output produced by this code will beHey there!&nbsp;White Spaces, Line Breaks and Semicolons&nbsp;&nbsp;JavaScript ignores irrelevant spaces, tabs, and new lines within a program. This allows free formatting and unrestricted levels of indentations to suit one's readability needs.Simple statements in JavaScript and many other programming languages like java, C, etc. usually end with a semicolon. In JavaScript, you may omit semicolons if each instruction is placed on separate lines. For example, the following code explains the whole procedure described above.<pre><code class="language-javascript">&lt;script&gt;
 var x = 15
 var y = 25
&lt;/script&gt;&nbsp;&nbsp;</code></pre>When multiple statements are placed are on a single line, then semicolons are necessary to determine the end of the statements.&nbsp;<pre><code class="language-javascript">&lt;script language = "javascript" type = "text/javascript"&gt;
 var x = 15; var y = 25; var z = 30
&lt;/script&gt;&nbsp;</code></pre>

Syntax

Functions in a programming language is a group of statements for performing a specific task. This section of code may be reused anywhere in the whole program when needed. The use of functions eases the process of writing code for programmers as it assists in breaking down huge and complex programs into small and manageable parts. A function may have a name (named functions) and may accept a set on inputs called 'parameters'.&nbsp;To create a function, follow this syntax:&nbsp;<pre><code class="language-plaintext">function &lt;function name&gt; (parameter list) {
 &lt;statements&gt;
}</code></pre>Example:<pre><code class="language-javascript">function write_my_name(my_name) {
 console.log('My name is ' + my_name)
}

var your_name = 'Teachsomebody'
write_my_name(your_name)</code></pre>Output:<code>My name is Teachsomebody</code>A function may also return a value as shown in the example:<pre><code class="language-javascript">function get_sum(x, y) {
 var z
 z = x + y
 return z
}

var sum = get_sum(2, 5)
console.log(sum)</code></pre>Output:<code>7</code>

Functions

A loop executes a set of instructions (code block) repeatedly as long as a specified condition is met. JavaScript like many other programming languages offer several ways of repeating a block of code.<h4>While loop</h4>In a while loop, the condition is always evaluated before the block of code is executed.<pre><code class="language-javascript">let x = 10
const sum = 50
while (x &lt; sum) {
 console.log(x)
 x += 10
}</code></pre>In the example above, the condition x &lt; sum is checked on every iteration until x is greater that or equal to the defined sum (50).Output:10203040<h4>do...while loop</h4>A do...while loop is like a while loop except that the block of code is executed at least once.&nbsp;<pre><code class="language-javascript">let x = 10
const sum = 50
do {
 console.log(x)
 x += 10
}
while (x &lt; sum) </code></pre>The output of the example above is exactly equal to the output of the while loop except that the block of code in the do..while loop is executed for the first time before the condition is checked.<h4>For loop</h4>The for loop is the most common loop in many programming languages. It consists of an initialization which initialises the variable(s) for the loop, a condition, which must be met before the code block is executed and finally and afterthought or an update by which the test variable is updated (i.e incremented).<pre><code class="language-javascript">const sum = 5
for (let x = 0; x &lt; sum; x++) {
 console.log(x)
}</code></pre>Output:01234The loop terminates when the value of x becomes greater or equal to sum (5).&nbsp;

Introduction to JavaScript

Course Description

Course Objectives

About TeachSomebody

On TeachSomebody

Need help

Policies