## DEV Community

Eric The Coder

Posted on • Updated on

# (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

//
``````

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
``````

## 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

customer.phone = "800-828-1240"
// or
customer['phone'] = "800-828-1240"
``````

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()
``````

## 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
}

``````

## Conclusion

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