Paige's Journey🎈

• 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