21.01.28

💡

Javascript Koans(const, hoisting, closure, this, Shallow Copying&Deep Copying)

• 더하기(+) 연산자는 숫자보다 문자열이 우선시 되기 때문에, 숫자형이 문자형을 만나면 문자형으로 변환하여 연산된다. (문자 > 숫자) (ex. 123 - '1' = 122지만, '1' + true = '1true'다.) 이처럼 자바스크립트에는 별난 부분들이 존재한다. 최대한 같은 타입끼리 연산하고(엄격한 동치 연산 === 사용), 조건문에 비교 연산을 명시하자.
  
  

• const를 사용하는 이유

  • const 변수의 타입이 객체인 경우, 객체에 대한 참조 변경을 막을 뿐이기 때문에 할당된 객체의 내용(프로퍼티 추가, 삭제, 프로퍼티 값 변경)은 가능하다.
  • 값을 변경하는 변수를 사용하는 일은 생각보다 많지 않다. const는 의도하지 않은 재할당을 막아주고, 선언한 값의 타입을 유지하여 실수를 막는 데 큰 도움이 된다. (ex. 재할당으로 객체 -> 문자열로 변경되는 걸 막음)
  • 단, 반복문처럼 재할당이 필요할 때는 let을 쓴다. 변수의 스코프는 최대한 좁게 만든다.
  • 구글 스타일 가이드 / let, const와 블록 레벨 스코프
    
    

• 자바스크립트에서는 함수도 객체다. 따라서 다른 객체와 마찬가지로 넘기거나 할당할 수 있다. 함수를 객체 프로퍼티에 할당할 수도 있다. 객체의 속성 값으로 담겨진 함수를 메소드(method)라고 부른다.
  
  

• 함수표현식: 변수값에 함수 표현을 담아 놓은 형태. 클로저 혹은 콜백(다른 함수의 인자로 넘김)으로 사용할 수 있다.
  
  

• 호이스팅(Hoisting)

  • 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모아서 유효 범위(함수 블록 {} 내부)의 최상단에 선언한다.
  • 자바스크립트 Parser가 함수 실행 전 해당 함수를 한번 훑어 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다. 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다.
  • 함수선언문은 호이스팅에 영향을 받지만, 함수표현식은 호이스팅에 영향을 받지 않는다. var 변수 선언과 함수선언문에서만 호이스팅이 일어난다. var 변수 선언만 위로 끌어올려지며, 할당은 끌어올려지지 않는다. 함수는 전체가 끌어올려진다. 하지만, 혼동을 방지하는 명시적인 코드를 위해 호이스팅에 대해서는 개념만 숙지하고 실행 순서대로 코드를 짜자.
    
    

• 팩토리 함수(factory function)

  • 함수가 객체를 반환할 때, 그 함수를 팩토리 함수라고 부른다. 객체 자체가 부품인 공장. 비슷한 객체 프로퍼티와 값을 여러 번 생성할 수 있다.
  • new 또는 this없이 임의로 복잡한 객체를 생성하기 위해 팩토리 함수를 조합할 수 있다.
  • 자세한 쓰임새는 더 공부해 볼 것!
    
    

• namespace pattern

  • 네임스페이스는 이름이 존재하는 공간이다. 객체나 변수의 이름이 겹칠 경우 값이 바뀌거나 에러가 날 수 있기 때문에, 이름 공간을 선언하여 안전한 코드를 만들 수 있게 한다. 자바스크립트에서는 네임스페이스 기능이 없기 때문에 주로 객체를 사용해 네임스페이스를 구축한다.
  • 객체 리터럴 네임스페이싱(Object Literal Namespacing): 가장 기본적인 네임스페이싱 방식. 하나의 전역 객체를 만든 후, 모든 함수, 객체, 변수를 여기에 추가하여 구현한다.
  • 범용 네임스페이스 함수: 프로그램이 복잡해지면, 코드의 각 부분들이 별개의 파일로 분리되어 선택적으로 문서에 포함되는 경우가 많다. 그렇게 되면 이미 있는 것을 재정의하는 일도 생길 수 있다. 따라서 객체를 선언하기 전에, 전역 객체의 존재여부를 확인하는 재사용 가능한 함수를 만들어 사용한다. (코드는 아직 잘 이해하지 못하겠음. 추후 복습 필요) 참고
    
    

• private variables: 변수를 아무나 수정할 수 없게 함수 안에 둔 것. 외부에서 변수를 직접 수정할 수 없고, 함수 호출을 통해서만 접근이 가능하다.
  
  

• 전역객체

  • 자바스크립트에서는 모든 객체는 전역객체의 프로퍼티다.
  • 전역객체의 이름은 호스트환경에 따라서 다르다. (웹브라우저: window, node.js: global)
    
    

• 생성자와 new

  • 생성자(constructor)는 객체를 만드는 역할을 하는 함수다. 자바스크립트에서 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자라고 할 수 있다.
  • new funName()으로 사용하며, 비어 있는 객체(이름은 함수명과 동일)를 만들고 반환한다.
  • 생성자 내에서 객체의 프로퍼티를 정의하면(초기화), 코드의 재사용성이 높아진다.

  function Person(name){
    this.name = name;
    this.introduce = function(){
      return 'My name is '+this.name; 
    }   
  }
  const p1 = new Person('egoing');
  const p2 = new Person('leezche');

  
  

• this

  • 자바스크립트의 함수 안에서 사용할 수 있는 일종의 변수, 약속되어 있는 변수.
  • 메소드의 this는 메소드가 소속되어 있는 객체를 가리킨다. 전역에서 함수를 호출할 경우에는 사실 (window.)funcName 이므로 window를 가리킨다.
  • 생성자 안의 this는 새로 생성된 객체다.
    
    

• 객체의 깊은 복사와 얕은 복사

  • 얕은 복사(Shallow Copying)

    • 아래 방법들로 객체를 복사할 때, 객체 내부에 중첩된 부분이 있다면 완벽하게 복사되지 않는다. (ex. 배열 [1, 2, [3, 4]] 를 복사하였을 때, 1, 2는 새로운 데이터값으로 복사되나 3, 4는 참조값이 복사되어 원본과 데이터값을 공유한다. 1 depth만 복사함.)
      
    • arr.slice([begin[, end]])
    • Object.assign()

  • 깊은 복사(Deep Copying)

    • 중첩 구조도 복사할 수 있는 방법이 있다. JSON.stringify는 입력 값으로 넘어온 데이터를 문자로 변형시켜주는 메소드이며, JSON.parse는 이렇게 변형된 문자를 다시 원래 객체로 되돌려주는 역할을 한다.
    • JSON.parse(JSON.stringify(obj))

  • 참고

    • Copying Objects in JavaScript
    • 깊은 복사와 얕은 복사에 대한 심도있는 이야기

CSS Selector

• HTML 요소의 특정 부분에 스타일을 적용하고자 할 때 셀렉터가 사용된다.

• 전체 셀렉터

  • HTML 페이지 내부의 모든 태그를 선택.
  • * { }

• Tag 셀렉터

  • 태그명이 (name)인 태그를 선택.
  • h1 { }
  • div { }
  • section, h1 { } : 쉼표는 다중으로 선택한다.

• ID 셀렉터

  • id 속성값이 name으로 지정된 요소를 선택
  • #only { }

• class 셀렉터

  • class 속성값이 name 으로 지정된 요소를 선택
  • .widget { }
  • .center { }

• attribute 셀렉터(외울 필요 없음)

  • a[href] { } : a 요소 중 herf 속성을 갖는 요소 선택
  • p[id="only"] { } : p 요소 중 id 속성 값에 "only"를 갖는 요소 선택
  • p[class~="out"] { } : p 요소 중 class 속성 값에 "out"을 단어로 포함하는 요소(공백으로 분리되어야 함)
  • p[class|="out"] { } : p 요소 중 class 속성 값이 "out"과 일치하거나 "out"으로 시작하는 요소 선택
  • section[id^="sect]" { } : section 요소 중 id 속성 값이 "sect"로 시작하는 요소 선택
  • div[class$="2"] : div 요소 중 class 속성 값이 "2"로 끝나는 요소 선택
  • div[class*="w"] { } : div 요소 중 class 속성 값에 "w"를 포함하는 요소 선택

• 후손 셀렉터

  • header h1 { } : header 아래 있는 h1 태그를 모두 선택 (h1 아래 요소 포함)

• 자손 셀렉터

  • header > p { } : header 바로 아래 있는 p 태그만을 선택 (p 아래 요소 미포함)

• 인접 형제 셀렉터

  • section + p { } : 같은 부모를 가지고, section 바로 뒤에 오는 p만 선택

• 형제 셀렉터

  • section ~ p { } : 같은 부모를 가지고, section 뒤에 오는 p를 모두 선택 (인접하지 않아도 선택함)

• 가상 클래스

  • a:link { } : 방문 전 링크
  • a:visited { } : 방문 후 링크
  • a:hover { } : 마우스 오버했을 때
  • a:active { } : 마우스를 클릭할 때
  • a:focus { } : 요소에 초점이 맞춰질 때

• 요소 상태 셀렉터

  • input:checked + span { }
  • input:enabled + span { }
  • input:disabled + span { }

• 구조 가상 클래스 셀렉터(외울 필요 없음)

  • p:first-child { }
  • ul > li:last-child { }
  • ul > li:nth-child(2n) { }
  • section > p:nth-child(2n+1) { }
  • ul > li:first-child { }
  • li:last-child { }
  • div > div:nth-child(4) { }
  • div:nth-last-child(2) { }
  • section > p:nth-last-child(2n + 1) { }
  • p:first-of-type { }
  • div:last-of-type { }
  • ul:nth-of-type(2) { }
  • p:nth-last-of-type(1) { }

• 부정 셀렉터

  • input:not([type="password"]) { }
  • div:not(:nth-of-type(2)) { }

• 정합성 확인 셀렉터

  • input[type="text"]:valid { }
  • input[type="text"]:invalid { }

---

　

📝

영어 실력의 부족함을 뼈저리게 느끼는 중. 정말 어렵다... 파고 들어갈수록 어렵다... 실제로 내가 구현을 해본 것도 아니니 개념은 알겠는데 어떻게 쓰이는지 감이 전혀 안 잡힌다. 특히 네임스페이싱은 어떻게 쓰이는지 모르겠는 건 물론이며 예시 코드를 봐도 모르겠고, 팩토리 함수는 쓰는 법은 알겠는데 어떤 때 쓰이는지 잘 감이 안 온다. 조금 막막한 밤이다. 혼자 하다보니 엄청 빈둥거리기도 했고. 정신 차리자. 😤