Paige's Journey🎈

Arguments

• an Array-like object accessible inside functions that contains the values of the arguments passed to that function.
• In order to change it to array
  • Array.from(arguments)
• has length property that can count from index #0 but does not have other methods like array
• 내장객체 함수에 전달 된 인수에 해당하는 배열 형태의 객체
• 함수를 선언한 순간, arguments 객체를 가지고 있음
• 함수가 호출되는 시점에, 그 때 전달 된 파라미터를 저장한 곳
• 파라미터 숫자를 정해놓더라도, 제한하지는 않기에, 적게 넣게 되면 undefined가 되고 갯수가 상관없음
• 내장 메서드를 포함하고 있지 않음

CSS Selector

• Grandchildren Selector(후손 셀렉터)

  • header h1 {}

• Child Selector(자식 셀렉터)

  • header > p { }

• Adjacent Sibiling Selector(인접 형제 셀렉터)

  • section + p { }

• Sibiling Selector(형제 셀렉터)

  • section ~ p { }

• ul > li:nth-child(2n) { }
  • Inside unordered list and list, choose child who is even
• section > p:nth-child(2n+1) { }
  • Among child elements of section, choose child element p who is odd
• section > p:nth-last-child(2n + 1) { }
  • Among child elements of section, choose child element p who is odd from the back
• p:first-of-type { }
  • Choose first p element among its sibiling elements of p
• div:last-of-type { }
  • choose last div element among its sibiling elements of div
•  p:nth-of-type(2) { }
  • choose second p element from sibiling elements of p
• p:nth-last-of-type(2) { }
  • choose second last p element from sibiling elemetns of p

• p:not(#only) {}
  • choose all except id is only from p elements

Shallow Copying Objects:

• Will duplicate the top-level properties but nested object is shared between original and the copy
• Array.prototype.slice()

  1 2 3 4 5 6 7 8 9 10

  const arr = ['peanut', 'butter', 'and', 'jelly'];   arr.slice(1); // ['butter', 'and', 'jelly'] arr.slice(0, 1); // ['peanut'] arr.slice(0, 2); // ['peanut', 'butter'] arr.slice(2, 2); // [] arr.slice(2, 20); // ['and', 'jelly'] arr.slice(3, 0);// [] arr.slice(3, 100);// ['jelly'] arr.slice(5, 1); // []

  cs

• Object.assgin()
  • Object.assign({}, arr)
• will affect 'array inside array' if it modifies since it is shallow copying objects
• Pitfall: 계속 순환 참조

Deep Copying Objects:

• JSON.parse(JSON.stringify(object))
• Pitafall: if you put user's method, it will cause an error.
• 서버 통신에서는 딮카피가 맞음
• 자바스크립트는 객체나 배열이 아니라 그냥 글자임

reference:

https://scotch.io/bar-talk/copying-objects-in-javascript

https://medium.com/watcha/깊은-복사와-얕은-복사에-대한-심도있는-이야기-2f7d797e008a

From 모각코...

Scope는 체인으로 연결이 되어 있음

전역 실행 컨텍스트가 있으면, 그것은 lexical environment를 바라보고 참조하고 있고, 그것이 죽지 않는 한 lexical environment를 참조할 수 있다.

Lexical enviornment한테는 진짜 자기 환경을 연결한 속성이 있고 outer lexical environment (상위 스코프)를 기억하고 있음.

결국, 자기 상위가 누군지 기억하고 참조해야할 환경을 참조하고 있음.

실행 context scope은 스택 구조로 쌓아져 나가고, 맨 밑 실행 컨텍스트 위에 함수의 실행 컨텍스트가 쌓이게 된다.

전역 실행 컨텍스트가 렉시컬 환경을 가지고 있음 전역 실행 컨텍스트 밑에 올라오면 outer lexical reference environment가 실제 식별자가 있는 공간을 저장함

안에 변수가 없을 때 상위에 변수가 호출이 될 때, 상위 스코프를 참조하게 됨

자바스크립트는 함수가 생성이 될 때 상위 스코프가 누구인 지 확인함 그래서 lexical scope로 정해놓음

From 모각코...

프로그래밍 언어는 interpreter language and compile language로 나누어짐.

JavaScript는 interpreter language이기에, 위에서부터 한 줄씩 읽게 됨(런타임). 그리고, 런타임 이전에 문서를 한 번 읽어서 선언문이 있으면 공간을 먼저 만들어 줌.

선언문을 앞으로 끌어서 호이스팅 하는 것은 lexical environment임

윈도우 객체에 전역변수가 저장이 되고, 먼저 메모리 공간이 만들어 짐. 메모리 주소를 만들고, 할당이 당했을 때 저장이 됨.

할당문을 만나야만 우변이 생성되며 우변의 값이 평가가 되고, 오른쪽에서 평가해서 왼쪽으로 넣음.

선언문은 런타임이전에 선언된 모든 것을 앞쪽에서 선언되는 호이스팅이 일어남.

표현식은 할당문이기 때문에 런타임에 생성이 되며 호이스팅이 안일어나니깐 쓰기 더 나음

변수에 값이 들어가는 거에서 함수가 변수에 들어가는 것도 할당이기에 런타임에 생김. 예를 들어, const a= function()

순서에 맞게 적어라! 밑에 할당한 것을 위에서 쓰지 마라. 호이스팅을 악용하지 말자.

more details:

joshua1988.github.io/web-development/javascript/function-expressions-vs-declarations/

• Closure
  
  • closure function can access
    • innver variable
    • outer variable
    • global variable

      1 2 3 4 5 6 7 8 9

      function outerFn() {     let outerVar = 'outer';          function innerFn(){              let innerVar = 'inner';              console.log(outerVar);         console.log(globalVar);     }return innerFn; } let globalVar='global';

      cs

  • Currying
    
    • a process of taking function with multiple arguments into a sequence of nesting function
    • parameter will be fixed

      1 2 3 4 5 6 7 8

      function multiply(x) {     return function(y) {         return x * y;     } } multiply(3)(4); // 12 let multiply10 = multiply(10); multiply(7); // 70

      cs

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

      function htmlMaker(tag) {     let startTag = '<' + tag + '>';     let endTag = '</' + tag + '>';     return function(content) {         return startTag + content + endTag;     }     }   let divMaker = htmlMaker('div'); divMaker('Paige'); // <div>Paige</div>   let spanMaker = htmlMaker('span'); spanMaker('Paige'); // <span>Paige</span>

      cs

  • Module Pattern
    • assign variable inside closure not to be changed
    • each function will not affect each other 

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

      function calculate() {     let insideCalculate = 0;       let obj = {         increment: function() {             insideCalculate ++;         },         decrement: function() {         },         getValue: function() {             return insideCalculate;         }     };     return obj; } let one = calculate(); one.increment(); one.increment()l one.getValue(); // 2 insideCalculate; // reference error let two = calculate(); two.increment(); two.increment(); two.increment(); two.increment(); two.increment(); two.decrement(); two.getValue(); // 5

      cs

COMMAND LINE INTERFACE(CLI)

• Pros
  • fast and powerful
  • good for accesibility
• command

• What you do @ GUI === What you do @ CLI

GIT

Version control system

• Strong versions
• Restoring prvious versions
• Understanding what happened
• Collaboration
• Backup

Features

• Branching and merging
• Distributed

• Data assurance

• Staging area

DISTRIBUTED

• Local Repository: in my own computer
  • fork: copy from Git remote repository
  • clone: bring into local repository
  • if something changes at local repository,
    • use 'git push origin master'(my repository)
  • if something changes at origin or remote repository
    • origin: use 'git pull origin master'
    • upstream: use 'git pull upstream master'
  • Staging Area
    • working directory --(git add index.html)-->staging area--(git commit)-->repository
  • Commit
    
    • use 'git commit -m "Add headline to index page"'
      • always need to add message to identify what has been chaged
  • Branching & Merging
    • Branching: allow each developers to work seperately
    • Merging: allow each developers to merge what they make
    • Master branch: code that will released to users(no bug)
    • Develop branch: includes codes that is middle of development and need to go through test and bug fix
    • feature branch: includes each function

     

     

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

For the first weekend, I had some rest and was able to sleep more. I lacked sleep because of the stress I got from the crash course. I thought I would be able to follow their timeline (Well, at least for the first week) but apparently I was already struggling from the beginning. Though, there is no time to be frustrated! I went over all the topics I learned for this week and finished reading one third of the book: 'JavaScript for Web Developers'. I read this book before but I did not understand fully. Though, after hearing code states lectures, I was able to understand it more. I made a goal to finish this book while taking the bootcamp. I think I would be able to do it since reading this book actually reminds me of what I have learned; and, it provides detailed information that I never thought about.

Websites for CSS:

https://flukeout.github.io/

https://lubna.dev/colouring-with-code/

https://codepen.io/Lubna/pen/zYYzOxN

https://codepen.io/Lubna/pen/dyoqzwP

https://flexboxfroggy.com/#ko

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