🦁_21.12.03 TIL

21년 12월 03일

📝 Javascript

📎 자료형(Data type)

• 자바스크립트의 모든 값은 데이터 타입을 갖는다.

원시 타입(Primitive Type)

• 원시 값은 변경 불가능한 값(immatable value)이다
• 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다.
• 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다.
  => 값에 의한 전달(pass by value)

숫자(Number)	숫자. 정수와 실구 구분 없이 하나의 숫자 타입만 존재
문자열(String)	문자열
불리언(Boolean)	논리적 참(true)과 거짓(false)
undefined	var 키워드로 선언된 변수에 암묵적으로 할당되는 값
null	값이 없다는 것을 의도적으로 명시할 때 사용하는 값
심벌(Symbol)	ES6에서 추가된 7번째 타입

객체 타입(Object/reference Type)

• 객체(참조) 타입의 값은 변경 가능한 값(mutable value)이다.
• 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장
• 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조값이 복사되어 전달
  => 참조에 의한 전달(pass by reference)
• 객체, 함수, 배열 등

📎 함수

• 실행할 수 있는 코드 꾸러미

function 라면끓이기() {
  냄비에넣기(물500cc, 건더시스프);
  끓인다();
  냄비에넣기(면, 분말스프)
  끓인다();
  불을끈다();
  그릇에담는다();
}

라면끓이기();

// 만약 면이 꼬들꼬들한 라면을 끓이고 싶다면?
// 새로운 함수 생성
function 라면꼬들꼬들끓이기() {
  냄비에넣기(물500cc, 건더시스프);
  끓인다();
  냄비에넣기(면, 분말스프)
  조금끓인다();
  불을끈다();
  그릇에담는다();
}

라면꼬들꼬들끓이기()

// 새로운 함수를 만들지 않고 기존 함수에 인자를 전달
function 라면끓이기(시간) {
  냄비에넣기(물500cc, 건더시스프);
  끓인다();
  냄비에넣기(면, 분말스프)
  끓인다(시간);
  불을끈다();
  그릇에담는다();
}

라면끓이기(시간);

📎 객체

• (객체지향 프로그래밍에서) 객체는 클래스의 인스턴스이다.

• 자바스크립트는 프로토타입 기반(prototype based) 객체지향 언어
  => 클래스가 필요없는(class free) 객체지향 프로그래밍 언어
  => ES6에서 클래스가 도입됨

• 자바스크립트를 구성하는 거의 "모든 것"이 객체
  => 원시 값을 제외한 나머지 값은 모두 객체

• 객체(object) : 0개 이상의 프로퍼티로 구성된 집합, 프로퍼티는 키(key)와 값(value)으로 구성

📎 리터럴(literal)

• 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법(notation)
• 종류 : 정수 리터럴, 부동소수점 리터럴, 문자열 리터럴, 불리언 리터럴, 객체 리터럴, 배열 리터럴, 함수 리터럴 등

📎 인스턴스(instance)

let myString = new String('hello');
// 여기서 myString은 String을 바라보고? 있는 인스턴스

=> myString은 다른 말로 무엇이라고 할까? 객체
객체를 인스턴스라고도 하고 인스턴스를 객체라고도 한다.

인스턴스는 객체로 봐도 무방하다. 생성자가 객체를 만들 때, 그 시점의 객체를 인스턴스라고 하기 때문이다.
- 자바스크립트의 생성자와 인스턴스

• 인스턴스 : 생성자 함수에 의해 생성된 객체/결과물

• 생성자 함수(constructor) : new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수

• hello 는 무엇인가요?
  => 객체 리터럴, 문자열, 원시 값, 유사배열객체, 인스턴스 라고 부를 수 있다.

📎 this

• 함수 또는 객체가 실행될 때 이 함수나 객체가 어디에서 실행되고 있는지를 가리킨다.
  => this는 현재 실행되는 코드의 실행 컨텍스트를 가리킨다.

실행 컨텍스트(execution context) : 인터프리터에 의해 현재 실행되는 자바스크립트 코드의 환경이나 스코프

• 일반 함수로서 호출
  

=> aboutThis() 함수는 window 객체(전역객체) 안에 있고 이 안에서 호출되었으므로 aboutThis() 함수 내에서 this는 window를 가리킨다.
=> Node.js 환경에서는 global을 가리킨다.

• 메서드로서 호출
  

=> myObj 안에 func()함수는 myObj 안에 있고 이 안에서 호출되었으므로 myObj.func() 함수 내에서 this는 myObj를 가리킨다.
=> 콘솔에 출력된 {val: 100, func: ƒ} 자체가 myObj의 내용이다.

함수 호출 방식	this가 가리키는 값
일반 함수로서 호출	전역객체
메서드로서 호출	메서드를 호출한 객체(마침표 앞의 객체)

=> this에 대한 내용은 일단 여기까지 정리!

참고

• 모던 자바스크립트 Deep Dive - 이웅모 저
• JavaScript 개발자라면 꼭 알아야 할 this - 지그재그
• JavaScript this binding 정리

📎 스코프(scope)

• 함수가 실행될 때, 함수 내에서 변수에 대한 접근이 어떻게 되는지를 나타내는 용어
• 변수에 접근할 수 있는 범위, 변수의 유효범위 또는 생존 범위

전역 스코프(Global scope)

• 코드 어디에서든지 참조할 수 있다.
• 전역 변수(Global variable) : 전역에서 선언된 변수미여 어디에든 참조할 수 있다.

지역 스코프(Local scope or Function-level scope)

• 함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 참조할 수 있다.
• 지역 변수(Local variable) : 지역(함수) 내에서 선언된 변수이며 그 지역과 그 지역의 하부 지역에서만 참조할 수 있다.

var x = "global x";
var y = "global y";

function outer() {
  var z = "outer's local z";

  console.log(x); // global x
  console.log(y); // global y
  console.log(z); // outer's local z

  function inner() {
    var x = "inner's local x";

    console.log(x); // inner's local x
    console.log(y); // global y
    console.log(z); // outer's local z
  }

  inner();
}

outer();

console.log(x); // global x
console.log(z); // ReferenceError: z is not defined

비 블록 레벨 스코프(Non block-level-scope)

if (true) {
  // 코드 블록 내에서 var x 선언
  // 자바스크립트는 블록 레벨 스코프를 사용하지 않으므로
  // 함수 밖에서 선언된 변수는 코드 블록 내에서 선언되었다 할지라도 모두 전역 스코프를 가짐
  var x = "global x";
}

console.log(x); // global x

블록 레벨 스코프(Block-level-scope)

• var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정하는 함수 레벨 스코프를 따름
• let의 등장으로 블록 레벨 스코프를 형성하는 것이 가능해짐
• let키워드로 선언한 변수는 모든 코드 블록(함수, if문, for문, while문, try/catch문 등)을 지역 스코프로 인정하는 블록 레

// 전역 스코프
let i = 10;

// 함수 레벨 스코프
function func() {
  let i = 100;

  // 블록 레벨 스코프
  for (let i = 1; i < 3; i++) {
    console.log(i); // 1 2
  }

  console.log(i); // 100
}

func();

console.log(i); //10

📎 클로저(closure)

// 클로져, closure : 폐쇄
// 클로져는 테크닉이다 => 폐쇄된 공간의 데이터에 접근하기 위한 테크닉
// 폐쇄된 공간에 접근할 수 있는 함수
function myFunction() {
  var val1 = "hello";
}

// myFunction안에 있는 val1을 함수 밖에서 쓸 수 없습니다.
// val1은 myFunction 함수 안에 폐쇄되어 있다.

function myFunction2() {
  var val2 = "hello";

  return {
    //리턴을 이용해서 함수 안의 값을 밖으로 뺄 수 있다.
    // 함수는 객체도 리턴할 수 있다
    getVal2: function () {
      // getVal1이라는 키에 연결된 함수가 있다.
      return val2; // 함수니까 리턴을 할 수 있잖아요 이때 val2을 리턴해줘요
    },
  };
}

let result = myFunction2();

console.log(result.getVal2()); // hello
// 원래대로라면 저 val2는 외부에서 접근하지 못하는건데, 클로저를 통해서  getVal2을 통해서만 val2에 접근할 수 있게 할 수 있습니다

클로저의 활용

• 클로저는 상태(state)를 안전하게 변경하고 유지하기 위해 사용
• 상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉(information hiding)하고 특정 함수에게만 상태 변경을 허용하기 위해 사용

📎 Math.random - 로또 번호 뽑기

function randomNum(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

// 내가 작성한 코드
// Set을 이용해 중복 제거
let lottoNum = new Set();

// randomNum을 lottoNum.size가 6이 될 때까지 뽑기
while (lottoNum.size < 6) {
  lottoNum.add(randomNum(1, 46));
}

// 오름차순으로 정렬
console.log([...lottoNum].sort((a, b) => a - b));

// 다른 방법 - forEach
let lottoArr = [];
function lottoGenerator() {
  while (lottoArr.length < 6) {
    let result = randomFunc(1, 46);
    let isGot = false;

    // 중복 판단
    lottoArr.forEach((el) => {
      if (el === result) {
        isGot = true;
      }
    });

    // 중복이 없다면 배열에 추가
    if (!isGot) {
      lottoArr.push(result);
    }
  }
  return lottoArr;
}

console.log(lottoGenerator());

// 다른 방법 - includes
let lottoArr = [];
function lottoGenerator() {
  while (lottoArr.length < 6) {
    let result = randomFunc(1, 46);
    let isGot = false;

    if (!lottoArr.includes(result)) {
      lottoArr.push(result);
    }
  }
  return lottoArr;
}

console.log(lottoGenerator());

📎 DOM(Document Object Model, 문서 객체 모델)

DOM

• HTML 문서의 내용을 트리형태로 구조화하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재
  => 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고, 객체를 부자 관계로 표현할 수 있는 트리구조로 구성한 것
  이때, 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 노드(node)라고 한다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .red  { color: #ff0000; }
      .blue { color: #0000ff; }
    </style>
  </head>
  <body>
    <div>
      <h1>Cities</h1>
      <ul>
        <li id="one" class="red">Seoul</li>
        <li id="two" class="red">London</li>
        <li id="three" class="red">Newyork</li>
        <li id="four">Tokyo</li>
      </ul>
    </div>
  </body>
</html>

[출처: Poiema Web - DOM tree]

DOM 트리에 접근하기

• document 객체를 통해 HTML 문서에 접근할 수 있다.
• document는 브라우저가 불러온 웹페이지를 나타내며, DOM tree의 진입점(Entry point) 역할을 수행
  => 최종점은 요소의 텍스트를 나타내는 객체

// 해당하는 Id를 가진 요소에 접근
document.getElementById();

// 해당하는 모든 요소에 접근
document.getElementsByTagName();

// 해당하는 클래스를 가진 모든 요소에 접근
document.getElementsByClassName();

// css 선택자로 단일 요소에 접근
document.querySelector("selector");

// css 선택자로 여러 요소에 접근
document.querySelectorAll("selector");

DOM 제어 명령어

• 이벤트 삽입
  target.addEventListener(type, listener)
  • type : click, mouseover mouseut, wheel 등 다양한 이벤트 감지
  • listener 함수의 인수에는 이벤트에 대한 정보가 담김

<button class="btn">Click me!</button>

const btn = document.querySelector("button");
//const btn = document.querySelector(".btn"); 위와 같은 요소 접근

btn.addEventListener("click", function() {
  console.log("hello world");
})

• 클래스 제어 : DOM API를 통해 요소의 class 속성을 제어할 수 있다.

<button class="btn-change">Change color, plz!</button>

const changeBtn = document.querySelector(".btn-change");

changeBtn.addEventListener("click", function() {
  // changeBtn에 "blue"라는 클래스 추가
  changeBtn.classList.add("blue");
  
  // changeBtn.classList.remove("blue"); "blue"라는 클래스 제거
  // changeBtn.classList.toggle("blue"); "blue"라는 클래스 토글. "blue" 클래스가 없다면 클래스를 추가하고, 있다면 클래스 제거
  // changeBtn.classList.contains("blue");  해당 클래스가 있는지 확인
})

---

📎 개발자 도구 콘솔창 로그 보존

1. 개발자도구에서 톱니바퀴(①) 모양 누르기
2. Preserve log 체크하기
3. clear()를 입력해도 차단되어 로그가 지워지지 않고 보존된다.
   => 오랫동안 디버깅할 때 유용

---

마무리

• '이거는 이거다!'라고 명확하게 이해하고 싶다.
  => 무엇을? 자바스크립트의 모든 것을 예에에에에
  => 하지만 먼저 찍먹으로 맛보기! 냅다 들이대지 말고
• 딥다이브 책을 사전처럼 모르는 거 있으면 찾아보고 내용을 작성하는 중이다.
  => 괜히 마음이 든든, 하지만 무거워서 카페 갈 때는 못 들고 가는게 아쉽다.
  => 그래도 실물 책이 좋다!