Paige's Journey🎈

WHAT I LEARNED

For this array and method pair, my pair has a better understanding of how JavaScript works and how each of us should act as a driver and a navigator. The funny thing is I understood each task as the opposite and did not know what to do lol. But at least I got to understand and have been able to act as a driver and a navigator. And, I think I should study one day in advance to fully understand the topic while doing coplit. Even though I started to study arrays and objects since yesterday, I was frustrated that I could not do the same as what my pair did. Because of my pair, we were able to finish earlier than the schedule. Time to review more and more 🥵

1. Array (배열) [ ] square bracket!
   
   • • Element: each value of index and seperate with comma inside array
     • can change element as well
     • Index: order inside array and starts with '0'

       1 2 3 4 5

       let list = [5, 7, 11, 13]; list[0] = 5; list[2] = 11; list [3] = 99; list; // [5, 7, 11, 99]

       c

        

     • Property:
       
       • length: list.length

         1 2

         let list = [5, 7, 11, 13]; list.length = 4;

         cs

     • Method:
       • list.push : add element to back **MUTABLE
       • list.pop: remove element from back **MUTABLE
       • list.shift: remove element from front **MUTALBE
       • list.unshift : add element to front **MUTABLE

         1 2 3 4 5

         let list = [5, 7, 11, 13]; list.push(99); // [5, 7, 11, 13, 99] list.pop(); // [5, 7, 11, 13] list.shift(); // [7, 11, 13] list.unshift(5); // [5, 7, 11, 13]

         cs

       • Array.isArray:  check whether it is array or not

         1 2 3

         let list = [5, 7, 11, 13]; Array.isArray(list); // true; Array.isArray([1 ,2, 3]); // true;

         cs

         • if you use typeof, object and array show both as object

           1 2 3 4

           let list = [5, 7, 11, 13]; typeof list // "object" let obj = {a :1}; typeof obj // "object"

           cs

         • Case sensitive
         • if it does not exist, returns as -1
       • indexOf: check whether it is inside array and returns as index( first index at which a given element can be found in the array, or -1 if it is not present.)

         1 2 3 4 5 6 7 8

         let list = ['Paige', 'Kim', 24]; list.indexOf('Paige'); // 0 list.indexOf('paige'); // -1 list.indexOf('Paige') !== -1; // true function hasElemnet(arr, element) {   return list.indexOf(element) !== -1; } hasElement(list, 'Paige') // true

         cs

       • includes: can check whether it includes or not

         1 2 3

         let list = ['Paige', 'Kim', 24]; list.includes('Paige'); // true list.indexOf('Joo Hee'); // -1

         cs

         • does not apply in internet explorer
       • arr.length === 0 or !arr.length
         • to receive empty array
       • splice(starting index, how many from starting index)  ** MUTABLE
         
         • delete: delete index 0 and 1 represents delete
         • insert: insert at index 1 location and 0 represents insert
         • replace: delete index 1 and replace 
           

           1 2 3 4

           var colors = ["red", "green", "blue"]; colors.splice(0, 1); // ["green", "blue"] colors.splice(1, 0, "yellow", "orange");  // ["green", "yellow", "orange", "blue"] colors.splice(1, 1, "red", "purple");  // ["green", "red", "purple", "orange", "blue"]

           cs

       • slice(startIndex, lastIndex) : *IMMUTABLE
         
         • last index will not include
         • 얕은 복사!
           • 배열 안의 배열이 있다면, 주소를 참조하기 때문에, 내용이 변함
           • 원시타입은 순수 복사, 주소타임은 주소 복사

           • github.com/codestates/pre-help-desk/issues/2366

         • var arr = [1, 2, 3, 4, 5, 6];
           var sliced = arr.slice(1, 4); // [2, 3, 4]

           arr.slice(1, 1); // []

          

       • concat:
         • merging arrays

           1 2 3 4

           var array1 = ['a', 'b', 'c']; var array2 = ['d', 'e', 'f']; var array3 = array1.concat(array2); console.log(array3); // [a, b, c, d, e, f]

           cs

       • Convert to Array from String 🤯
         
         • string.split(): split string with comma and conver to array

           1 2

           let str = "Hi I am Paige";  str.split(" ") // ["Hi", "I", "am", "Paige"]

           cs

           1 2 3

           let code = 'codestates'; code.split(' '); // ["codestates"] code.split(''); // ["c", "o", "d", "e", "s", "t", "a", "t", "e", "s"]

           cs

       • Convert to String from Array 🤯
         • for ... of statement 반복가능 객체!!!

           1 2 3 4 5 6 7

           const array1 = ['a', 'b', 'c']; for (const element of array1) {   console.log(element);  } //"a" //"b" //"c"

           cs

         • join():

           1 2 3 4

           let list = [5, 7, 11, 13]; list.join() // "5, 7, 11, 13" list.join("") // "571113" list.join("-") // "5-7-11-13"

            

2. OBJECT (객체)
   
   • Dot Notation: need to use when key is changeable
   • Bracket Notation: need to put String inside bracket
     • better to use over dot notation  parameter could be changed as well
     • always put inside square bracket as 'String', if not probably receive reference error
     • if you put as user[firstname], firstname applies as varialbe

     • 1 2 3 4 5 6 7 8 9

       let user = {     firstName: 'Paige',     lastName: 'Kim',     email: 'paigekim29@gmail.com';     city: 'Seoul' }; user.firstName; // 'Paige' user['firstName']; // 'Paige' user.firstName === user['firstName'];

       cs

   • key-value pair => Property
     • firstName = key  
     • 'Paige' = value
   • add value

     1 2 3

     user['gender'] = 'female'; user.hobby = ['#golf'  , '#pilates']; user.skinny = false;

     cs

   • delete value & key
     • if you delete value, it deletes key together!!
       

       1

       delete user.hobby;

       cs

   • in: check values and returns as boolean

     1 2

     'hobby' in user; // false 'firstName' in user; // true

     cs

   • HOW TO ITERATE (객체 순회하기) 🤯
     • for ... in statement 객체에서 key값 뽑기!!!

       1 2 3 4 5 6 7 8

       let user = {     firstName: 'Paige',     lastName: 'Kim' };   for (var item in user) {     console.log(item, user[item]); } // firstName Paige, lastName Kim

       cs

     • Object.keys()
       • Make an array with key only
     • Object.values()
       
       • Make an array with values only
     • Object.entries()
       • Make an array inside array with key and value

         1 2 3 4 5 6 7 8 9

         let list = {   name: 'Paige',   age: 24,   hobby: 'pilates' }; Object.values(list); // ["Paige", 24, "pilates"] Object.keys(list); // ["name", "age", "hobby"] Object.entries(list) // [["name", "Paige"], ["age", 24], ["hobby", "pilates"]]   Colored by Color Scripter

         cs

CONSOLE.TABLE: