Wecode day 6/7

1. Array Methods

Arrow functions of the es6 are most used when used as callback functions.

***So what are callback functions?

Callback functions are functions that are passed to another function as an argument

a. Array.map()

array map goes through the array and applies the callback funtion to every element in the array. Then it returns the array with the resulting return values. This method leaves the original array unchanged and returns the transformed array

let arr1 = [1,2,3,4,5,6];

fucntion f1(num){
    return num+1;
}

let arr2 = arr1.map(f1);

console.log(arr2);

--------result--------
(6) [2, 3, 4, 5, 6, 7]
0: 2
1: 3
2: 4
3: 5
4: 6
5: 7
length: 6
__proto__: Array(0)
----------------------

Es6 can come in handy here. In the example above, a function named f1 has to be created and then called by map. By using es6 you can shorten the step by creating the function within the argument

let arr1 = [1,2,3,4,5,6];

let arr2 = arr1.map(num => num+1);

console.log(arr2);

--------result--------
(6) [2, 3, 4, 5, 6, 7]
0: 2
1: 3
2: 4
3: 5
4: 6
5: 7
length: 6
__proto__: Array(0)
----------------------

The code becomes shorter with the same result!

b. Array.forEach()

forEach is a looping method that can be used instead of the for loop. The difference between forEach and map is that the forEach method doesn't have a return value.

let store = [];
let names = ['a', 'ab', 'cbb', 'ada'];

names.forEach(el => {   
  if (el.startsWith('a')) {     
    store.push(el);   
  } 
});

The example loops through the names array and pushes the element starting with 'a' into the store array. The method doesn't return anything.

Example code

1. Takes in an array of numbers and return an array of true/false if bigger or equal to 100

const moreThan100 = nums => {
    return nums.map(element => {
        if(element < 100){
            return false;  
        }
        else{
            return true;
        }
    })
}

2. Take in an array with strings of dates in the form of 'YYYY-MM-DD'.
   Returns an array with strings in the form of 'YYYY년 MM월 DD일'.

const formatDate = dates =>{
    return dates.map(date => {
        let ymd = date.split('-');
        return ymd[0]+"년 "+ymd[1]+"월 "+ymd[2]+"일";
    })
}

2. Looping Through Objects

An object is a data type that does not have order. Thus, it is impossible to loop through an object using indexes like you can in lists.

object refresher

const information = {
  name: 'galbimandu'
}

const verb = 'developes'
const project = 'facebook'

information[verb] = project // [A]
information.developes = 'facebook' // [B]

A and B are both valid ways to insert a new key/value pair into an object.
A however is a 'better' way because in B the key/value is fixed. By using variables, A allows for different key/value pairs to be inserted

a. For loop

Although objects can't be looped using index, object can looped using the built in methods. Object.keys() is a method that returns an array of keys of the object.

const obj = {
    name: 'melon',
    weight: '1000',
    price: '233',
    isFresh: true
}

let keys = Object.keys(obj);

console.log(keys);

---------------result---------------------
(4) ["name", "weight", "price", "isFresh"]
0: "name"
1: "weight"
2: "price"
3: "isFresh"
length: 4
__proto__: Array(0)
------------------------------------------

In ES6, Object.values() and Object.entries() were added.
Objects.values() returns an array of the values and Object.entries() returns an array of arrays of the key/value pair

const values = Object.values(obj)
// values === ['melon', 4350, 16500, true]

const entries = Object.entries(obj)

/*
entries === [
  ['name', 'melon'],
  ['weight', 4350],
  ['price', 16500],
  ['isFresh', true]
]
*/

b. For-in loop

The for-in loop in js is same as the for-in loop in python. Instead of looping though numbers like in the for loop, the for-in loop loops through elements of an array or object.

-------array----------
for (let i in arr) {
  console.log(i)
  console.log(arr[i])
}

-------object--------
const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

for (let key in obj) {
  const value = obj[key]

  console.log(key)
  console.log(value)
}
----------------------

Where is JS located?

Javascript can be placed within the html file or be made into a seperate file and called into the html file. The script tag is used in both cases

<script src="index.js"></script>

<script> 
  function sayHi() { 
    console.log('여기는 index.html파일입니다.'); 
  } 

  sayHi();
</script>

The best way is to create a serperate file since it is easier to edit and read

DOM(Document Object Model)

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." 링크텍스트

If you load a web page the elements of the page is organized into a tree.

Dom defines all of these HTML elements as objects