Paige's Journey🎈

First-class citizen(일급 객체)

• Function (함수)
  1. can assign into variable
  2. can refer to argument(인자) of other function
  3. can return as the result of other function
• function expression(함수 표현식)
  • can not use before assignment(할당)
  • hoisting is not happening unlike 'function declaration'(함수 선언식)

Higher order function(고차 함수)

함수 = 값을 전달 받아 값을 리턴한다 = 값에 대한 복잡한 로직은 감추어져 있다 = 값 수준에서의 추상화

값 수준의 추상화: 단순히 값(value)을 전달 받아 처리하는 수준

사고의 추상화: 함수(사고의 묶음)를 전달 받아 처리하는 수준

고차함수 = 함수를 전달 받거나 함수를 리턴한다 = 사고(함수)에 대한 복잡한 로직은 감추어져 있다 = 사고 수준에서의 추상화

• a function that takes as a argument or returns a function
• Callback function
  • a function passed into caller(another function) as an argument, which is then invoked(호출)
  • depends on caller's condition, can decide callback function to be executed or executed even several times
  • mostly invoked when certain work is done so called as callback
• Curry function
  • specifically for a function that returns function
  • part of higher order function

1. When it takes caller(other function) as an argument

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   function triple(num) {   return num * 3; }   function doubleNum(func, num) {   return func(num); }   // 함수 doubleNum은 다른 함수를 인자로 받는 고차 함수입니다. // 함수 doubleNum의 첫 번째 인자 func에 함수가 들어올 경우 // 함수 func는 함수 doubleNum의 콜백 함수입니다. // 아래와 같은 경우, 함수 double은 함수 doubleNum의 콜백 함수입니다. let output = doubleNum(triple, 4); console.log(output); // -> 12

   cs

2. When it returns function

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

   function adder(added) {   return function (num) {     return num + added;   }; }   // 함수 adder는 다른 함수를 리턴하는 고차 함수입니다. // adder는 인자 한 개를 입력받아서 함수(익명 함수)를 리턴합니다. // 리턴되는 익명 함수는 인자 한 개를 받아서 added와 더한 값을 리턴합니다.   // adder(5)는 함수이므로 함수 호출 연산자 '()'를 사용할 수 있습니다. let output = adder(5)(3); // -> 8 console.log(output); // -> 8   // adder가 리턴하는 함수를 변수에 저장할 수 있습니다. // javascript에서 함수는 일급 객체이기 때문입니다. const add3 = adder(3); output = add3(2); console.log(output); // -> 5

   cs

3. When it takes function as argument and returns function

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

   function double(num) {   return num * 2; }   function doubleAdder(added, func) {   const doubled = func(added);   return function (num) {     return num + doubled;   }; }   // 함수 doubleAdder는 고차 함수입니다. // 함수 doubleAdder의 인자 func는 함수 doubleAdder의 콜백 함수 입니다. // 함수 double은 함수 doubleAdder의 콜백으로 전달되었습니다.   // doubleAdder(5, double)는 함수이므로 함수 호출 기호 '()'를 사용할 수 있습니다. doubleAdder(5, double)(3); // -> 13   // doubleAdder가 리턴하는 함수를 변수에 저장할 수 있습니다. (일급 객체) const addTwice3 = doubleAdder(3, double); addTwice3(2); // --> 8 Colored by Color Scripter

   cs

Built-in higher order functions(내장 고차 함수)

• Array.prototype.filter() 분류해서 거르기!!
  • filter out with elements that satisfy certain condition from array
  • condition has to be delivered in function form as an argument of filter method
  • part of higher order function since function takes as an argument
  • returns back as an 'ARRAY' to callback function that takes argument
  • 'CALLBACK' function will return a Boolean value
    • If result is 'TRUE', it will create an array with that element, if not, NO

  • 1 2 3 4 5 6 7 8 9 10 11

    function getIndex(arr, num) {   return arr.filter(function (el) {     return el < num;   }).length; // make an array with true value and get the length of that array }   function filterOddLengthWords(words) {   return words.filter(function (word) {     return word.length % 2 !== 0; // create an array that is true    }); }  Colored by Color Scripter

    cs

• Array.prototype.map() 대응, 갯수를 맞춰줘야 됨 배열자체의 수정용!!
  • creates a 'NEW ARRAY' populated with result of calling a provided function on every element in the calling array
  • can extract values from list of objects

    1 2 3 4 5

    function getOnlyNames(arr) {   return arr.map(function (el){     return el.name; // extract value of name through map filter   }) } Colored by Color Scripter

    cs

• Array.protoype.reduce() 변환이 되어 응축, 연산용!!
  •  executes a reducer function(that you provide) on each element of the array, resulting in 'SINGLE OUTPUT VALUE'
  • can make various type
  • arr.reduce(callback[, initialValue])
    • 초기값 설정 중요!
      • if they want empty array, put [] like this
    • if there is initial value, it becomes first value to calculate(A value to use as the first argument to the first call of the callback. If no initialValue is supplied, the first element in the array will be used as the initial accumulator value and skipped as currentValue.)

      1 2 3 4 5

      function computeProductOfAllElements(arr) {   return arr.reduce(function(acc, cur){     return acc * cur   }, 1) //1 is initial value } Colored by Color Scripter

      cs

  • use when you want to merge arrays by using concat

    • 1 2 3 4 5

      function joinArrayOfArrays(arr){   return arr.reduce(function(acc, cur){     return acc.concat(cur)   }) } Colored by Color Scripter

      cs

  • If array is empty and there is no initial value, it will return 'typeerror'
  • If array is empty and there is inital value, it will return initial value

• Array.prototype.sort()
  
  • sorts the elements of an array in place and returns the 'SORTED ARRAY'
  • default sort order is ascending, built upon converting elements into string then comparing their sequences of UTF-16  code units values
  • a[key] > b[key]=> a-b=positive(3-1=2)
    • if it is true, return 1 which makes A to go to back
  • a[key] < b[key] => a-b=negative(1-3=-2)
    • if it is true, return -1, which makes B to go to back
  • a[key] = b[key] 
    • return 0, leave as it is

      1 2 3 4 5 6 7 8 9 10

      items.sort(function (a, b) {   if (a.value > b.value) {     return 1;   }   if (a.value < b.value) {     return -1;   }   // a must be equal to b   return 0; });

      cs

• Array.prototype.some()
  • tests whether 'AT LEAST ONE ELEMENT' in the array 'PASSES' the test implemented by the provided function
  • returns a Boolean Value
• Array.prototype.every()
  
  • tests whether 'ALL ELEMENTS' in the array 'PASS' the test implemented by the provided function
  • returns a Boolean value

• Array.prototype.forEach()
  • executes a provided function 'ONCE FOR EACH ARRAY ELEMENT'
• Array.prototype.find()
  • returns the value of the 'FIRST ELEMENT' in the provided array that satisfies the provided testing function

Spread syntax

• if you want to add array inside middle of array

  1 2

  const spread = [1, 2, 3]; const arr = [0, ...spread, 4]; // [0, 1, 2, 3, 4])

  cs

• if it is empty array, it will return nothing

  1 2

  const spread = []; const arr = [0, ...spread, 4]; // [0, 4]

  cs

• can merge arrays same as concat method

  1 2 3 4

  const arr1 =[1, 2, 3]; const arr2 = [3, 4, 5]; const concatenated = [...arr1, ...arr2]; // [0, 1, 2, 3, 4, 5] arr1.concat(arr2); // [0, 1, 2, 3, 4, 5]

  cs

• can merge objects as well

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

  const paige = {     firstName: 'Paige',     LastName: 'Kim', }; const me = {     hobby: 'piltaes',     todos: ['coplit', 'koans'], };   const merged = {...paige, ...me}; /* const merged = {     firstName: 'Paige',     LastName: 'Kim',     hobby: 'piltaes',     todos: ['coplit', 'koans'], }; */ Colored by Color Scripter

  cs

• if spread syntax goes inside parameter, it become 'rest parameter(rest syntax)'
  • useful when numbers of parameters were not set
  • returns arguments with 'ARRAY'

    1 2 3 4

    function pintMaxNums(...args) {      console.log(args); //[10, 30, 40] } pintMaxNums(10, 30, 40);

    cs

Object

• === 
  • To compare 'REFERENCE' only in object!!
    

    1 2 3 4 5 6 7 8 9 10 11 12

    const person = {       son: {         age: 9,       },     };      const boy = person.son; boy.age = 20; expect(person.son.age).toBe(20); expect(person.son === boy).toBe(true); expect(person.son === { age: 9 }).toBe(false); expect(person.son === { age: 20 }).toBe(false);

    cs

Today, I reviewed all of the pair programming questions and the making of the calculator app with html, css, and JavaScript. My understanding is better compared to before when I first did it. I now have a better understanding of how I should write codes. And, also, with the help of my peers from last night, my terminal set up is done and super pretty!! 🥰

It has already been two weeks since I started the program with Code States. When I first found out about this course, I wondered whether I would be able to get in. And if I ever do, will I even be able to finish the course? With determination and the willingness to change my career path, I decided to apply to the course and let fate pave the way. In order to apply, there were several essays I needed to write. The essays discussed who I am as a person and how much I am willing to learn. Maybe it has been more than 10 years since I last wrote an essay in Korean. It was definitely a good experience for me to try and at least considering the factor that I recently decided to settle down in Korea for the meantime. After hours and days of revising my essays and recording a video introduction about myself, I felt like I went back to senior year in high school and I was once again preparing essays for college. So, when I got an acceptance from code states, I felt like I was floating in the clouds. I was so happy that my effort and hard work paid off. Ever since I got the result, I set my mission and goal to be focused and work even harder than I ever did before. So that, at least, I can get some idea about how programming works. Truly, I will not take this opportunity for granted. I will work hard and not give up.

Code States provides recorded videos for us to first to learn the concepts and the foundation. They group us into pairs so that we can do pair programming to be able to review and learn what we watched from the recorded videos. I never had remote classes and online courses before so I was a bit worried whether I could follow the course well. But, it actually works for me because they give a detailed schedule on what to do. Moreover, I can post questions on git hub and they reply back as soon as they could (in less than thirty minutes). They are really helpful and they really guide us to become future programmers.

Working in pairs is really an eye-opening experience for me. At first, I did not fully understand what the driver does nor the functions of a navigator; so, in the beginning,  my partner and I worked without assigning a role for each other. But, on my third pairing, my pair gave me an idea about how each should operate. On a daily basis, after office hours, some of us joins zoom voluntarily in order to study more. This is another helpful practice because it really helps me out a lot. This is when I can see how working in a team and having roles assigned to each person works in the programming world. Different people have different learning styles and strengths, so gathering in a group and working together really brings out the value of teamwork and I can see how this will work out once we start being part of a team of different programmers. And, during the study group after official sessions, I was able to ask questions whenever I would get stuck at any point and all of them are willing to help each other out. I never thought of having a supportive and cheerful group who can study and communicate with each other for this course. I cannot wait to learn more and get to know more people. 🤞🏻

HTML & CSS

1. To RESET html

2. FLEX: grow(팽창 지수), shrink(수축 지수), basis(기본 크기) 🤯

• apply to children but does not give any property
• decide how much you want to expand the children
• flexbox can extend with need

  1

  flex: 0 1 auto;

  cs

• grow
  • represents ratio
  • grow 1: expands equally
  • grow 0: only upto its content's size

    1 2 3

    .left {   flex: 0 1 70px; }

• shrink
  
  • leave as 1 most of times
  • need to study more how to count 🤯
• basis
  • if you give exact px, it will not grow more than that
  • if you put as '0%' over 'auto', each div will get exact same width regardless of length of each contents in div
• if you put width and flex-basis together, flex-basis gets priority. If contents inside box overload, width does not guarantee exact size. In order to prevent that, it is better to use 'max-width' over 'width' if you do not use flex-basis.
• In order to apply vertically, need to use as below,
  • put display:flex and flex-direction:column to parent and put flex on child

    1 2 3 4 5

    <div htmlclhtmlass="col w20">     <div class="row h40">영역1</div>     <div class="row h40">영역2</div>     <div class="row h20">영역3</div> </div>

    cs

    1 2 3 4 5 6 7 8

    .col{     display: flex;     flex-direction: column; }   .h40{     flex: 4 1 auto; }

    c

reference:

https://heropy.blog/2018/11/24/css-flexible-box/

https://studiomeal.com/archives/197

3. WIREFRAME

• design layout to show how the final will be
• first time making wireframe in order to start twittler with pair but not sure whether I did it correctly or not but it definitely helps me to brainstorm first before I write codes

• Result with HTML & CSS:

1. Primitive Type(원시 타입)
   • string
   • number
   • biginit
   • boolean
   • undefined
   • symboll
   • null
   • 재할당 하더라도, 처음 할당했던 값이 바뀌지 않음
2. Reference Type(참조 타입)
   • function
   • array
   • object
   • 재할당하면, 모든 것이 자동적으로 다 바꿔버림
   • save inside 'heap'

     1 2

     console.log([1,2,3] === [1,2,3]; // false  console.log({ foo: 'ba' } === { foo: 'ba' }); // false

     cs

3. SCOPE(범위)
   • determines the accessibility of variables
   • JS receive own scope once function was created, which is lexical scope
     • check who is its outer scope
   • can put function inside function
     
     1.  Local Scope vs. Global Scope
        
        • Local Scope 
          • 'Local Variable'(지역변수) has higher priority than global variable and cannot use it outside function

            1 2 3 4 5 6 7 8

            let greeting = 'Hi'; function greet() {     let greeting = 'Hello';     console.log(greeting); // 'Hello' } console.log(greeting); // 'Hi' greet(); console.log(greeting); // 'Hi'

            cs

            1 2 3 4

            function greetSomeone() { let firstName = 'Paige'; return greeting + ' ' + firstName; } Colored by Color Scripter

            cs

        • Global Scope
          • 'Global Variable'(전역변수) can access everywhere

            1 2 3 4 5 6 7 8

            let greeting = 'Hi'; function greetSomeone() { let firstName = 'Paige'; return greeting + ' ' + firstName; }   greetSomeone(); // => Hi Paige' firstName; // => ReferenceError

            cs

     2. Function Scope vs. Block Scope
        
        • Block
          • starts and end with curly bracket { }
          • var vs. let
            
            • var: gets its own scope (old way)
              • connects with window object
            • let: only works inside block scope

              	let	const	var
              scope	block scope	block scope	function scope
              reassignment(재할당)	⭕️	❌	❌
              redeclaration(재선언)	❌	❌	❌

     3. Global Variable(전역변수) and Window object(윈도우객체)
        
        • will connect to function that is assigned at global scope and var varible
        • do not declare too much in global scope!
          

          1 2 3 4 5 6 7 8

          var myName = "Paige"; console.log(window.myName); // Paige   function foo() { console.log('bar'); }   console.log(foo === window.foo); // true

          cs

     4. No Declaration(선언없이 초기화된 전역변수)
        • do not use variable without assignment
        • if it does, it becomes global variable(전역변수)
        • In order to avoid error, use 'use strict'
          

          1 2 3 4 5 6 7

          function showAge() { age = 24; console.log(age); } showAge(); // 24 console.log(age); // 24 age === window.age

          cs

• Spread Syntax(...variable)
  
  • if spread syntax goes inside parameter, it become 'rest parameter(rest syntax)'

    1 2 3 4

    function pintMaxNums(...args) {      console.log(args); //[10, 30, 40] } pintMaxNums(10, 30, 40);

    cs

     

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:

WHAT I LEARNED

This was the first project that I needed to work on to be able to make a base calculator using html, css, and JavaScript. I studied iteration continuously for the last two days so my head is just full of that. So, when I first started this project, I only thought about using iteration. But later, I realized that iteration wasn't needed and instead I should use an if statement, which was correct. It took awhile to apply my knowledge into a project but I made about 90%(?) before the "office hour". Then, I realized that I did not fully understand the concept of JavaScript. So,  I decided that I will read a book about JavaScript this weekend while reviewing what I learned. For this JavaScript project, I met a new partner. I worked as the "navigator" for most of the time. My partner felt embarrassed to keep asking questions but I felt like asking questions and talking about the project more really helps in understanding the concept and reviewing about it more. Moreover, I figured out the problem I was facing on my coding. Finally, first week is over🥳 19 weeks left and I am excited to learn more new concepts.

JavaScript Calculator

1. Toggle : can add and remove once clicked
2. parseFloat() : returns real number and can string into number
3. parseInt() : parses a string argument and returns an integer of the specified radix

WHAT I LEARNED

I spent most of the time reviewing iteration instead of focusing on html and css as scheduled. I could say that I got a little bit more familiar with iteration but I still need to practice continuosly in order to be fully understand it. During the office hour, I asked whether giving the height:100vh and flex:1 are the same because it gives how long each div should be. Apparently, those are totally different concepts that I should not mix together. Also, I thought that I was aware of most of the tags but the fact is I was wrong. lol Time to study more🤓

HTML & CSS

1. Most used tags in html but I didnt know about
   • <textarea> </textarea>: Multi-line Text Input
   • ul, li : ul can be under li again in order to be nested
   • <input type="radio" name="choice" value="a"> : assign name with other radio input to be connected
2. CSS
   
   • rem : 1rem is the standard set up.
     • If you put 2rem, text becomes twice bigger.
   • flex: determines how a flex item will grow or shrink to fit the space in its flex container.
     • reference: https://developer.mozilla.org/en-US/docs/Web/CSS/flex

• Difference among Block, Inline-block, and Inline 

ITERATION

1. Break & Continue
   • Break: terminates loop right away
   • Continue: only skips current look
   • reference: http://kbarker.dev/blog/the-difference-between-break-and-continue-in-javascript.html

WHAT I LEARNED

After submitting the pair review, I realized the fact that my pair and I did not choose who will be the driver or navigator. Even  though we did not assign tasks to each other, we communicated well for our pair programming. For this moment, I think it is quite unnecessary to decide who will be the driver or navigator since we are both novices. If one of us has more knowledge on the subject and can lead the coding, we could decide who can be a driver. Once we get to be more familiar with javascript or what we are doing, by then it would be better to decide. Today is the last day with my first pair and I will meet another one tomorrow and learn html and css. But the problem is I am still struggling with iteration at the moment..... I hope I get to finish iteration problem solving before bedtime. I still have 8 questions left until I go to sleep. I will probably sleep late or wake up early tmrw to finish this🤯 Iteration lecture seems super simple, but the reality is very different. Past topics can be done in the timeline, but this one takes up more time than what I originally thought. Also, I asked some questions through help desk today, so I probably need to review those tmrw...

1. ITERATION (반복문): when you want to repeat actions continuosly until I want from 0 to n
   
   • for statement
     • useful when you know the end at array and string
       

       1 2 3 4 5 6 7 8 9 10

       for (initialExpression(초기화); conditionExpression(조건식); incrementExpression(증감문)) {     statement }   let sum = 7;   for(let n = 0; n <= 2; n = n + 1) { sum = sum + n; } console.log(sum); // 10 Colored by Color Scripter

       cs

   • while statement
     • useful when you do not need either initialExpression and increment Expression
     • when you dont know for the end

       1 2 3 4 5 6 7 8 9 10 11 12 13 14

       initialExpression(초기화) while(conditionExpression(조건식)) {     statement     incrementExpression(증감문) }   let sum = 7; let n = 0;   while(n <= 2) { sum = sum + n; n = n + 1; } console.log(sum); // 10

       csS

2. String Methods
   • In order to return value as String using BACKTICK(``)
     • use $ sign and {} to get arguments and use `` sign around the value you want to print as String

       1 2 3

       function showTime(hour, min, sec) {   return `현재 시각은 ${hour}시 ${min}분 ${sec}초 입니다.` } Colored by Color Scripter

       cs