Today we do more JS.

What You'll Learn

Requirement :

week2-basic-javacript/
|- monday.js
|- tuesday.js
|- wednesday.js

Exercise time

training

 
const programmers = [];

programmers[0] = "Bill";
programmers[1] = "Mark";
programmers[2] = "Elon";
programmers[1] = "Alan";
programmers.shift();

console.log(programmers);

Positive : We've learned how to define arrays, add elements to them, replace items in them, and remove items from them.

const myCompanies = ["grab", "vingroup"];
const theirCompanies = ["microsoft", "facebook"];

const techCompanies = myCompanies.concat(theirCompanies);

console.log(techCompanies);

Docs

Array methods are built specifically for arrays. They help us change the arrays themselves or get certain information out of them.

Reference: MDN Array

Add an item to the end of an array:

var fruits = ["Apple", "Banana"];
var newLength = fruits.push("Orange");
// newLength will be 3, and fruites becomes ["Apple", "Banana", "Orange"]

Determines whether the array contains a value

var pets = ["cat", "dog", "bat"];
console.log(pets.includes("cat"));
// expected output: true
console.log(pets.includes("at"));
// expected output: false

Remove an item from the end of an array:

var last = fruits.pop(); // remove Orange (from the end)
// last will be "Orange" and fruits becomes ["Apple", "Banana"]

Remove an item from the beginning of an array:

var first = fruits.shift(); // remove Apple from the front
// last will be "Apple" and fruits becomes ["Banana"]

Add an item to the beginning of an array:

newLength = fruits.unshift("Strawberry"); // add to the front
// newLength will be 2, and fruites becomes ["Strawberry", "Banana"]

Copy an array:

The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.

fruits.push("Mango");
fruits.push("Apple");
fruits.push("Orange");
// fruits = ["Strawberry", "Banana", "Mango", "Apple", "Orange"]
console.log(fruits.slice(2));
// expected output: Array ["Mango", "Apple", "Orange"]
console.log(fruits.slice(2, 4));
// expected output: Array ["Mango", "Apple"]
console.log(fruits.slice(1, 5));
// expected output: Array ["Banana", "Mango", "Apple", "Orange"]

Remove items from an index position

// fruits = ["Strawberry", "Banana", "Mango", "Apple", "Orange"]
var removedItems = fruits.splice(1, 3); // starting at the index position 1 and remove 3 items
// removedItems will be ["Banana", "Mango", "Apple"], fruits becomes  ["Strawberry", "Orange"]

Assignment

console.log(reverseArray(["A", "B", "C"]));
// ["C", "B", "A"];
var arr = [1, 2, 3, 4, 5];
console.log(reverseArray(arr));
// [5, 4, 3, 2, 1]
console.log(arr);
// [1, 2, 3, 4, 5]

Let's create objects that represent real world concepts.

const mark = {};

mark.fullName = "Mark Zuckerberg";
mark.company = "Google";
mark["company"] = "Facebook"; // 2nd way to set property on object
mark.age = 18;
mark.city = "San Francisco";

console.log(mark);

Another way to create an object is this

const elon = {
  age: 33,
  city: "Austin",
  fullName: "Elon Musk",
  companies: ["Space-X", "Tesla"],
};

console.log(elon);

function isAnAdult(person) {
  if (person.age > 17) {
    console.log("Is adult!");
  }
}

isAnAdult(mark);

function isCoderSchoolStaff(person) {
  if (person.company === "CoderSchool") {
    console.log("Is working at CoderSchool!");
  }
}

isCoderSchoolStaff(mark);

Those were easy, now see if you can do some on your own

Given the object below:

var userA = {
  id: 123456,
  name: "Peter Parker",
  email: "peter.parker@gmail.com",
  role: "student",
  courseId: 112233,
};

Methods

use Object methods to log your answer to the console:

Nested Objects

{
  id: 123456,
  name: "Peter Parker",
  email: "peter.parker@gmail.com",
  role: "student",
  courseId: 112233,
  age:15,
  tasks: [
    { name: "Task 1", status: "Done"},
    { name: "Task 2", status: "Not Started"},
    { name: "Task 3", status: "In Progress"},
    { name: "Task 4", status: "Not Started"},
    { name: "Task 5", status: "Done"},
    { name: "Task 6", status: "In Progress"},
    { name: "Task 7", status: "Not Started"},
    { name: "Task 8", status: "Done"},
    { name: "Task 9", status: "Done"},
    { name: "Task 10", status: "In Progress"}
  ]
};

listOfTask(userA);

// Expected output in the console:
// Not Started:
// - Task 2
// - Task 4
// - Task 7
// In Progress:
// - Task 3
// - Task 6
// - Task 10
// Done:
// - Task 1
// - Task 5
// - Task 8
// - Task 9

Test your code

var task1 = {
  name: "Task 1", // The name is "Task " followed by an integer number
  status: "pending", // One options between ["In progress", "Not Started", "done"]
};

The array userA.tasks in the exercise above should be a good example.

var tasks = generateFakeTasks(3);
console.log(tasks);

// Example output:
// [
//   { name: "Task 1", status: "Done" },
//   { name: "Task 2", status: "Not Started" },
//   { name: "Task 3", status: "In Progress" },
// ]

//your code above
userA.tasks = generateFakeTask(6); //make 6 fake tasks
console.log(userA);
//expected to see userA with new tasks list

listOfTask(userA.tasks);
// Expected output in the console: SAME FORMA
// Not Started:
// - Task x
// - Task x
// In Progress:
// - Task x
// - Task x
// Done:
// - Task x
// - Task x

Docs

As we go through our programming careers, we'll be working a lot with text. To facilitate this, we'll want to get familiar with some common string methods and properties.

Reference: MDN String

var s = "Life, the universe and everything. Answer:";

console.log(`${s} ${s.length}`);
// expected output: "Life, the universe and everything. Answer: 42"

return "cat"[1]; // returns "a"

var sentence = "The quick brown fox jumps over the lazy dog.";
var word = "fox";
console.log(sentence.includes(word)); // expected output: true

var str1 = "Saturday night plans";
console.log(str1.startsWith("Sat")); // expected output: true
var str2 = "Is this a question";
console.log(str2.endsWith("?")); // expected output: false

var str = "The quick brown fox jumps over the lazy dog.";
console.log(str.slice(31));
// expected output: "the lazy dog."
console.log(str.slice(4, 19));
// expected output: "quick brown fox"
console.log(str.slice(-4));
// expected output: "dog."
console.log(str.slice(-9, -5));
// expected output: "lazy"

var str = "The quick brown fox jumps over the lazy dog.";

var words = str.split(" ");
console.log(words);
//expected output: ["The", "quick", "brown", "fox", "jumps", "over", "the", "lazy", "dog."]
console.log(words[3]);
// expected output: "fox"

var str = "The Quick Brown Fox Jumps Over The Lazy Dog.";

console.log(str.toLowerCase());
// expected output: "the quick brown fox jumps over the lazy dog."
console.log(str.toUpperCase());
// expected output: "THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG."

const greeting = "   Hello world!   ";
console.log(greeting);
// expected output: "   Hello world!   ";
console.log(greeting.trim());
// expected output: "Hello world!";

Assignment

var variousThings = [
  true, true, true, false,
  true, true, 1, true,
  true, false, true, false,
  true, "hello", false, true,
  true, true, true, true,
  false, false, "world", true
];
findFirstString(variousThings);
// => 'hello'

var emails = ["  PETER@gmail.com", "Mia1024@gmail.COM  ", " Dorian@gmail.com "];
console.log(normalizeEmails(emails));
// ["peter@gmail.com", "mia1024@gmail.com", "dorian@gmail.com"]

console.log(splitNames("Peter Parker"));
// {firstName: "Peter", lastName: "Parker"}

var characters =
  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

function getRandomString(length) {
  // Your code here
}

console.log(getRandomString(5));
// example output: B5cgH

Github here