lolaos

A Beginners Guide: Javascript Basics and Git Stash

Damilola Oseni's photo
Damilola Oseni
·

11 min read

Javascript is a scripting language used to render web pages interactive. It is one of the major web technologies, along with HTML and CSS. In this article, I’ll highlight a few basic Javascript concepts for absolute beginners.

Data Types

One of the basic features of a programming language is the set of data types it recognizes. Data types are the kind of values that a programming language interprets. Javascript has seven data types. The first six are primitive data types:

  1. Number: an integer or a floating-point number: let a =23;
  2. String: represents textual data: let a= "this is a string";
  3. Boolean: Any of two values: true or false. let a = true;
  4. Undefined: a data type with an uninitialized variable: let 'a';
  5. Null: denotes a null value: let 'a' = null;
  6. BigInt: used for arbitrarily large integers: let a=900719925491n;
  7. Object: This is a non-primitive data type.

Variables

Variables are named containers that hold data. In Javascript, the let and const keywords are used to declare variables. For example:

let a; const "age";

The let keyword is used for variables whose value can be changed, while the const keyword is used for constants whose values do not change. The assignment operator = is used to assign a value to a variable.

let name = "mark";
const age = 40;

In this example above, mark is assigned to the variable name while 40 is assigned to the variable age. If a variable is used without initialization, it will have an undefined value. let age; // age is the name of the variable console.log(age); //undefined In this example, age is the variable name. Because it does not hold any value, it will be undefined.

Conditional statements

Conditional statements are used to perform different actions based on a set of given conditions. The following conditional statements exist in JavaScript.

If statement

If statement specifies a block of code to execute if a specific condition is true.

if (condition) {
//block of code to be executed if the condition is true
};

For example 

let a = "male"
if( a = "male") {
alert("You are a boy")
}

The code above displays an alert of " You are a boy" if the variable a contains the string 'male'.

Else statement

Else statement specifies a block of code to execute if a condition is false.

if(condition) {
//block of code to execute if the condition is true
} else{
//block of code to execute if the condition is false
};

An example

if(a="male"){
alert("You are a boy")
}else{
alert("You are a girl")
};

if...else statement

In situations where you have to run a block of code with multiple alternative conditions, the if...else statement can be used.

if(condition 1){
//block of code 1 to execute 
} else if (condition 2) {
//block of code 2 to execute 
}else if (condition 3) {
//block of code 3 to execute 
}else {
//block of code to execute if neither 1,2 or 3 are true
};

Example

// check if the number if positive, negative or zero const number = prompt("Enter a number: "); // check if number is greater than 0

if (number > 0) {
    console.log("The number is positive");
}
// check if number is 0
else if (number == 0) {
  console.log("The number is 0");
}
// if number is neither greater than 0, nor zero
else {
    console.log("The number is negative");
};

Loops

In Javascript, loops are used to repeat a block of code as long as it satisfies a given condition. The following loops are used in Javascript.

For loop

The syntax of the for loop is given below: 

for(initialExpression; condition; updateExpression) {
    // block of code
}
  1. initialExpression: initializes variables. 2.Condition: sets the instruction to be evaluated. If the condition is true, the block of code is executed. If the condition is false, the loop is terminated.
  2. updateExpression: updates the value of the initialExpression when the condition is true.
  3. The condition is evaluated again. The entire process runs until the condition is false.

While loop

The syntax of the while loop is shown below:

while (condition) {
 code block to be executed
}
  1. The while loop evaluates the condition. if it returns true, the code block is executed. The condition is evaluated again and the process repeats.
  2. When the condition evaluates to false, the loop stops. Otherwise, the loop will never end.

do-while loop

The do/while statement defines a loop that executes a block of code once, before verifying whether the condition is valid. It repeats the loop as long as the condition is true. The syntax of the do...while loop is shown below:

do {
    // block of code
} while(condition)
  1. The block of code is first executed then the condition is evaluated.
  2. If the condition returns true, the block of code is executed again. Otherwise, if it returns false, the loop stops.

Git Stash- Saving Your Local Changes Temporarily.

There’s been a lot written about git and understanding how it works. It is an important tool many developers use daily, yet it’s seen as magic: brilliant but scary. In this article, I will talk about a useful git technique - “git stash”. Git has an area called stash where you can temporarily but safely shelve (or stash) your uncommitted local changes, leaving you with a clean working copy. This functionality is useful when you’ve made changes you are not ready to commit but you need to switch to another branch. For example, you need to fix a bug in a different branch but you’re not ready to commit the changes you’ve made in your working copy. Git stash acts like a clipboard, it takes all your changes in your working copy and saves them on a new clipboard. At any time, you can restore the changes from that clipboard and continue where you left off in your working copy.

Stash a Change

To stash a change, run this command: $ git stash "optional message"

It is good practice to add a message so you can remember what the stash is about. After running this command you should get a message similar to this:

Saved working directory and index state WIP on upload-project: b2e6e58 Merge branch 'develop' of https://github.com/startng/bank-of-spain-starthub-fe into feat/upload-project

Your working copy is now clean and all uncommitted changes have been safely stashed temporarily. It’s important to know that stash is local to your git repository.

View Stashed Changes

To view changes you've stashed: $ git stash list

You should get a result similar to this:

stash@{0}: WIP on upload-project: b2e6e58 Merge branch 'develop' of https://github.com/startng/bank-of-spain-starthub-fe into feat/upload-project
stash@{1}: WIP on user-signup: d557e20 feat: implemented user login

This returns a list of saved changes. The stash@{0} is the name of the stash and the number in curly braces is the index of the stash.

Continue Where you Left Off

To retrieve stashed changes, run: $ git stash pop. Using this command reapplies the last saved changes and removes the file from the stash. You can also use: $ git stash apply

This reapplies the last saved changes and keeps a copy of the file in the stash. It is useful if you want to apply the same changes to multiple branches. By default, git stash does not stash untracked files and ignored files. To stash untracked files run: $ git stash -u

Delete Stash Changes

To remove stash changes without applying them $git stash drop And finally to clear your entire stash, $git stash clear

There are a whole lot more git techniques. Which techniques do you find tricky implementing?

Conclusion

Thank you for reading and stay tuned for more articles!

GitJavaScriptguideBeginner Developers