Paige's Journey🎈

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/

• A tool that you can find specific word in String
• comfile

  1 2

  var pattern = /p/ var pattern = new RegExp('p');

  c

• exec

  1 2

  console.log(pattern.exec('paige')); // ["p"] console.log(pattern.exec('aige')); // null

  cs

• test
  • returns as Boolean

    1 2

    console.log(pattern.test('paige')); // true console.log(pattern.test('aige')); // false

    cs

• STRING METHOD
  • match

    1 2

    console.log('paige'.match(pattern)); // ["p"] console.log('aige'.match(pattern)); // null

    cs

  • replace

    1

    console.log('paige'.replace(pattern, 'P'));  // Paige

    cs

• OPTION
  • i : does not care whether uppercase or lowercase

    1 2 3 4

    var xi = /p/; console.log("Paige".match(xi)); // null var oi = /p/i; console.log("Paige".match(oi)); // ["P"];

    cs

  • g: returns all the result

    1 2 3 4

    var xg = /p/; console.log("Paige".match(xg)); // null var og = /p/g; console.log("Paige".match(og)); // ["P"];

    cs

  • ig : can find all result whether uppercase or lowercase

    1 2

    var ig = /p/ig; "Paigepaige".match(ig); // ["P", "p"]

    cs

• CAPTURE
  • \w : you are getting words from A~Z, a~z, 0~9
  • + : more than one value 
  • \s : represents space
    

    1 2 3

    var pattern = /(\w+)\s(\w+)/; var str = "Paige Kim"; var result = str.replace(pattern, "$2, $1"); // "Kim, Paige"

    cs

• REPLACE

  1 2 3 4 5 6

  var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim; var content = 'github : https://github.com/paigekim29 입니다.  tistory : https://paigekim29.tistory.com/ 입니다. '; var result = content.replace(urlPattern, function(url){     return '<a href="'+url+'">'+url+'</a>'; }); console.log(result); // github : <a href="https://github.com/paigekim29"> https://github.com/paigekim29</a> 입니다. tistory : <a href="https://paigekim29.tistory.com/"> https://paigekim29.tistory.com/</a> 입니다.

  cs

reference: https://opentutorials.org/course/743/6580

reference: https://www.w3schools.com/js/js_arithmetic.asp

• refresh : command + r
• command + d : to select same items continuously
• command + control + space : emoji 😜

VSC

• option + click : to click line you want
• option + ↑/↓ : move items up and down
• option + shift + ↑/↓: to copy up and down
• command + / : to remark
• option + shift + i : can put cursor with all selection
• option + shift+ drag : can put cursor where your mouse is at so it is helpful when you want to select lines with different lengths of codes
• command + ↑/↓ : to go to top and bottom
• command + b: to remove sidebar

1. -infinity / - infinity = NaN
2. 0 / 0 =NaN

티스토리 업데이트 이후, 소스 코드 이용 방법

reference: https://gabii.tistory.com/entry/Tistory-Blog-%EB%B0%94%EB%80%90-Color-Scripter-%EB%B3%B5%EC%82%AC-%EB%B0%A9%EB%B2%95-%EC%82%AC%EC%9A%A9