DEV Community

Cover image for (Javascript) My learning journey Part 5: Array, Object and loop
Eric The Coder
Eric The Coder

Posted on • Edited on

4 1

(Javascript) My learning journey Part 5: Array, Object and loop

An essential point to remember a training course is to take notes and discuss the subject with others. That's why every day I will post on dev.to the concepts and notes that I learned the day before.

If you want to miss nothing click follow and you are welcome to comments and discuss with me.

Without further ado here is a summary of my notes for day 5.

Array

An array is a data structure that contains a group of elements. Arrays are commonly used to organize data so that a related set of values can be easily sorted or searched.

// Data store one by one
name1 = 'Mike'
name2 = 'Paul'
name3 = 'John'

// More efficiently store in a array
names = ['Mike', 'Paul', 'John']

// Alternative declaration
names = new Array('Mike', 'Paul', 'John')

// Accessing a specific array element
console.log(names[0]) // Mike
console.log(names[1]) // Paul
console.log(names[2]) // John

// Number of entry in array
console.log(names.length)) // 3

// Get array last element
console.log(names[names.length-1])

// Modify a specific element
names[0] = 'Jack' // replace first entry (Mike) with Jack

//
Enter fullscreen mode Exit fullscreen mode

Array basic methods

names = ['Mike', 'Paul', 'John']

// Add a element to array
names.push('Simon') // ['Mike', 'Paul', 'John', 'Simon']

// Add a element to the beginning 
names.unshift('Jack') // ['Jack', 'Mike', 'Paul', 'John', 'Simon']

// Remove last element
names.pop() // ['Jack', 'Mike', 'Paul', 'John']

// Remove first element
names.shift() // ['Mike', 'Paul', 'John']

names = ['Mike', 'Paul', 'John']
// Find element index position
names.indexOf('Paul') // 1

// If elements includes in array
names.includes('Paul') // true
Enter fullscreen mode Exit fullscreen mode

Objects

JavaScript objects are containers for named values, called properties and methods.

// Object declaration
const customer = {
  firstName: 'Mike',  // String
  lastName: 'Tailor', // String
  emails: ['mike@exemple.com', 'mike2@gmail.com'], //Array
  creditLimit: 2500 // Number
}

// Access object property
console.log(customer.firstName) // Mike
// or
console.log(customer['firstName']) // Mike

// Add property
customer.phone = "800-828-1240"
// or
customer['phone'] = "800-828-1240"
Enter fullscreen mode Exit fullscreen mode

Objects functions

const phone = {
  number: '819-204-5678',
  extension: '2010',
}

const customer = {
    firstName: 'Mike',  
    lastName: 'Tailor',
    phone: phone,
    // or short hand (if property same name as value)
    phone, 
    fullName: function() { 
        // this keyword reference the object calling the method
        return this.firstName + ' ' + this.lastName
    }
    // or the short hand syntax
    fullName() { 
        // this keyword reference the object calling the method
        return this.firstName + ' ' + this.lastName
    }
  }

customer.firstName = 'Mike'
customer.lastName = 'Taylor'
console.log(customer.fullName()) // Mike Taylor
// or 
console.log(customer['fullName']() // Mike Taylor

// object keys
const keys = Object.keys(customer)
console.log(keys) // firstName, lastName, phone, fullName

// object values
const values = Object.values(customer)
console.log(keys) // 'Mike', 'Taylor', {number: '819-243-4554', extension: '20'}, function fullName()
Enter fullscreen mode Exit fullscreen mode

Loop

// For Loop keep running until condition is true
for (let i = 1;i <= 10; i++) {
  console.log(i)
}

// For Loop : Break and Continue keyword
for (let i = 1;i <= 10; i++) {
if (i === 1) continue // go directly to next interation
if (i === 5) break // stop and exit loop
  console.log(i)
}

// Loop within a Array
names = ['Mike', 'Paul', 'John']
for (let i = 0;names.length - 1; i++) {
  console.log(names[i])
}

// While loop
let count = 1
while (count <= 10) {
  count++
  console.log(count)
}

// For of loop
names = ['Mike', 'Paul', 'John']
for (const name of names) {
  console.log(name)
}

// For of loop with index (destructuring)
for (const [name, index] of names.entries()) {
  console.log(name) // 'Mike'
  console.log(index) // 0
}

// Object: keys and values (destructuring)
for (const [key, value] of Object.entries(customer)) {
  console.log(key) // firstName
  console.log(value) // Mike
}


Enter fullscreen mode Exit fullscreen mode

Conclusion

That's it for part 5. Next day will cover DOM manipulation.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)