JavaScript Day6 ~ Day10

Day 6

반복문 (⭐️)

while(condition) { ... }
do{ ... } while(condition) // 본문이 최소 1회 무조건 실행됨

• break 반복문 종료
• continue 해당 항목만 건너뛰기

• for..in 객체의 프로퍼티 존재 여부 확인 (prototype의 프로퍼티도 확인하여 반환함)
  • enumerable 열거 가능한 속성 : true여야 hasOwnProperty로 조회 가능
  • immutable 변하지 않는
  • iterable 반복 가능한

• for..of 유사배열, 배열에서 사용
  • 반복 가능한(iterable) 요소에서 사용 가능
  • 개발자도구에서 Symbol(Symbol.iterator)가 있다면 iterable한 요소

• 객체에 반복문 사용하기
  • Object.keys()
  • Object.values()
  • Object.entries()

• 배열에서만 사용 가능한 메서드
  • forEach, map, filter, reduce 등
  • 유사 배열에는 사용하지 못함 !!

defer, async

• defer
  • 백그라운드에서 다운로드하여 다운로드 중에도 HTML 파싱이 멈추지 않음
  • 페이지 구성이 완료되면 스크립트가 실행됨
• async
  • 백그라운드에서 다운로드하여 다운로드 중에는 HTML 파싱이 멈추지 않음
  • 실행 시 HTML 파싱이 멈춤
  • 실행 순서가 제각각으로 먼저 다운로드가 종료된 순으로 실행됨

함수

• 함수는 새로운 실행 컨텍스트가 생성되기 때문에, 함수 내부에서 선언된 지역 변수는 함수 내부에서만 유효함
• 함수 내부에서 함수 밖의 내용을 건들이지 않는 것이 좋음(전역 오염)
• 매개변수에 값이 전달되지 않을 경우 기본값 설정 가능

  function func(var1, var2 = 'default값'){ ... }

  • 기본값으로 함수 실행문도 설정할 수 있음 (함수에서 반환된 값이 들어감)

• return 함수 어디서든 사용 가능하고 사용 즉시 함수 실행 종료
  • return 안쓰거나 return 지시자만 작성시 undefined 반환

---

Day 7

함수 표현식 (⭐️)

• 함수는 특별한 값으로 취급되기 때문에 변수에 값으로 할당이 가능
• 함수가 값으로 취급되기 때문에 실행하지 않은 함수 본문도 값으로 할당 가능
  • 함수 본문이 값으로 넘겨질 수 있는 내용은, 콜백/클로저에서 중요한 베이스 !

• 콜백 함수 : 함수 본문을 함수의 인자로 전달하여, 함수 내부에서 나중에 호출된 함수

• 함수 표현식 vs 함수 선언문
  • 문법 차이 : 선언문은 값을 반환하지 않지만, 표현식은 값을 반환하여 변수 할당 가능
  • 함수 생성 시기 : 선언문은 함수 호이스팅으로 정의 전에 호출이 가능하지만, 표현식은 변수의 값으로 평가되기 때문에 런타임에 함수를 생성하여 정의 전에 호출이 불가능
  • 스코프 : 선언문은 함수가 선언된 코드 블록 안에서만 유효하지만, 표현식은 코드 블록 밖에서 미리 변수를 선언하여 다른 코드 블록에서도 사용 가능 (많이 사용되는 방법은 아님)

• 즉시 실행 함수 IIFE
  • 함수 생성 즉시 1회 호출하는 방식
  • 바로 실행시킨 후에는 실행이 불가능하기 때문에 보통 익명 함수로 작성됨
  • var 키워드로 선언된 변수의 블록 스코프의 제한을 극복하려 사용되었으나 클로저에서 자주 사용됨
  • 캡슐화 변수를 보호하기 위한 용도

화살표 함수 (⭐️)

• 매개변수가 없는 경우, 괄호를 생략하기 위해 관례적으로 const func = _ => {..} 사용 가능
• 한줄 실행문의 리턴값이 객체라면 소괄호로 그룹핑 필요

  const createUser = (name,age) => ({name: name, age: age})

• 주의점
  • arguments 사용 불가 : rest parameter 대체 사용
  • this가 바인딩되지 않음 : 화살표 함수에서 사용된 this는 상위 실행 컨텍스트의 this값을 참조
  • constructor 없음 생성자 함수로 사용될 수 없고 그만큼 가벼움

---

Day 8

재귀와 스택

• 재귀 어떤 문제를 해결하기 위해서 나 자신이 필요할 때 사용
• 재귀함수가 실행되면, 새로운 함수 실행 컨텍스트가 생성됨 -> 기존 함수 실행 컨텍스트는 멈춰! ✋
• 중지된 함수와 연관된 실행 컨텍스트는 실행 컨텍스트 스택 자료 구조에 저장됨

• 실행 컨텍스트 스택(call stack)은 Last in First out 방식으로 작동
• call stack에 실행 컨텍스트를 쌓아놓고 마지막에 쌓인 것부터 일처리
  • 재귀 호출로 새로운 함수의 실행 컨텍스트가 생성되면 기존 실행 컨텍스트 위에 쌓임
  • 새롭게 생긴 함수(재귀)의 실행 컨텍스트 먼저 작동 후 종료되면 기존 실행 컨텍스트 실행

객체 (⭐️)

• 프로퍼티 키는 문자열/심볼, 값은 어떤 자료형도 가능
• 대괄호 표기법
  • 유효한 이름이 아닌 식별자에 사용 : 'like-birds'
  • 변수를 키로 사용했을 때 사용 : 매개변수로 전달받았다면 꼭 대괄호 표기법으로 접근해야 함
  • 변수를 키로 동적으로 받아와 사용/결합 가능

참조에 의한 객체 복사 (⭐️)

• 원시값 : 복사하면 새로운 값이 할당 (복사본 수정하면 원본 그대로)
• 객체 : 복사하면 객체가 저장되어 있는 메모리 주소인 참조값이 할당 (복사본 수정하면 원본 훼손)

• 얕은 복사 방법

  let user = { name: 'sozzang' }
  
  // for .. in
  let clone = {}
  for(let key in user) { clone[key] = user[key] }
  
  // Object.assign()
  let permission01 = { canView: true }
  let permission02 = { canEdit: true } 
  Object.assign(user, permission01, permission02)
  
  let clone = Object.assign({}, user)
  
  // 전개 연산자 ...
  const spreadObj = { ...user }
  const spreadObj2 = {...user, ...permission01, ...permission02}

구조 분해 할당 (⭐️)

• 배열 구조 분해 할당

  const [a, b, c] = [10, 20, 30] // a = 10, b = 20, c = 30

  • 배열은 순서가 중요하기 때문에 작성 순서에 맞춰 할당됨
  • 유사 배열도 사용 가능

• 객체 구조 분해 할당

  const {짜장면:짜장, 짬뽕, 탕수육} = {탕수육: 20000, 짜장면: 5000, 짬뽕: 6000} // 짜장 = 5000, 짬뽕 = 6000, 탕수육 = 20000

  • 객체는 키와 동일한 변수명에 값을 할당함
  • 변수명 변경 가능, 기본값 설정 가능

---

Day 9

가비지 컬렉션

• 루트가 참조하는 값이나 체이닝으로 루트에서 참조할 수 있는 값은 수거 대상에서 제외
• 가비지 컬렉션을 개발자가 억지로 막거나 실행할 수 없음
  • 클로저로 폐쇄는 가능함

메서드와 this (⭐️)

• 일반 함수와 메서드 축약형의 차이 : construcotr 프로퍼티의 존재 여부
• this는 런타임에 결정되어 호출한 대상을 가리킴
• 메서드에서 사용된 this
  • 일반 함수

    const user = {
      totalGrades: function(){ console.log(this) } // user
    }
    user.totalGrades()

  • 메서드 축약형

    const user = {
      totalGrades(){ console.log(this) } // user
    }
    user.totalGrades()

  • 화살표 함수

    const user = {
      totalGrades = () => console.log(this) // window
    }
    user.totalGrades()

• 메서드 내부에서 중첩 함수를 사용할 땐 화살표 함수 사용 권장 : 중첩 함수의 this가 메서드의 this를 참고함

프로토타입 (⭐️)

• [[Prototype]] : 값 = 참조하는 다른 객체(프로토타입) 또는 null
• __proto__ (던더 프로토) : 프로토타입의 getter, setter
  • 표준이 아니라 Object.getPrototypeOf, Object.setPrototypeOf 사용이 권장되지만 사실 아직도 많이 사용함

함수의 prototype 프로퍼티 (⭐️)

• 생성자 함수로 객체를 만든 경우의 프로토타입이 작동하는 원리
  • F.prototype : constructor가 소유 | 사용 주체는 생성자 함수 | 인스턴스의 프로토타입을 할당하기 위해 사용
  • __proto__ : 모든 객체가 소유 | 사용 주체도 모든 객체 | 객체가 자신의 프로토타입에 접근/교체 하기 위해 사용

• 생성자 함수가 선언되면 prototype 프로퍼티가 더불어 생성됨

  function Rabbit() {}
  // Rabbit.prototype = { constructor: Rabbit }
  alert( Rabbit.prototype.constructor == Rabbit ); // true

  • 생성되었을 때 유일한 값 : constructor

• constructor는 생성자 함수 자신을 가리키고 알맞은 값을 보장하지 않음

  Rabbit.prototype = { jumps: true }; // X
  Rabbit.prototype.jumps = true; // O

  • F.prototype을 { } 이렇게 전체를 덮어쓰지 말고 원하는 프로퍼티만 추가해야 함

call, apply, bind (⭐️)

함수.call('a', a, b) // a를 this로 전달하여 대신 함수 실행 (매개변수는 낱개)
함수.apply('a', [a, b]) // a를 this로 전달하여 대신 함수 실행 (매개변수가 배열)
함수.bind('a', a, b) // a를 this로 전달하여 함수 본문 전달

클래스 (⭐️)

• new 키워드와 함께 인스턴스 생성시, 넘겨받은 인수와 함께 constructor가 자동으로 실행됨
• 객체 메서드도 당근 사용 가능
• 클래스에 정의된 메서드는 열거 불가능 `enumerable: false``
• getter, setter 사용 가능

• extends 클래스 상속

  class Child extends Parent

• super 상속 클래스의 생성자에선 반드시 호출해야 함
  • super를 통해 부모 생성자를 실행해줘야 this가 될 객체가 만들어져서 상속이 가능함

---

Day 10

변수의 유효범위와 클로저 (⭐️)

• 기존 상식
  • 함수는 특별한 값으로 변수에 할당도 가능하고 함수 본문도 값으로 넘길 수 있음
  • 함수는 정의되었을 때의 환경(스코프 체인, 식별자)을 기억하는데 이것은 렉시컬 환경(자세히는 환경 레코드)에 저장되어 있음
  • 함수 실행이 종료되면 함수 실행 컨텍스트는 스택에서 제거되고 가비지 컬렉션의 수집 대상이 됨(메모리 제거)
    • 함수 안에서 사용된 변수는 함수 실행이 종료되면 모두 제거됨

• 클로저란?
  • 중첩 함수 본문을 리턴하여 전역 변수에 할당하면 외부 함수보다 중첩 함수의 생명 주기가 더 길어짐
  • 함수 밖에서 외부 함수의 스코프 체인 및 식별자 등을 참조할 수 있음
  • 즉 실행이 종료된 함수의 변수를 가비지 컬렉터가 수집하지 못하게 폐쇄!하는 것이 클로저

옵셔널 체이닝 ?.

• 프로퍼티가 없는 중첩 객체에 에러 없이 접근 가능
• 필수값이라면 사용하면 안됨 (사용하면 어디서 에러 발생했는지 찾기 어려움)
• 앞의 평가 대상이 null, undefined라면 뒤의 코드 실행 안되고 종료됨

obj?.prop
obj?.[prop]
obj?.method()
obj.method()?.

동기와 비동기 (⭐️)

• Call Stack 코드가 실행되면 기본적으로 동기적으로 작업됨
• Web APIs setTimeout과 같은 비동기적인 작업이 요청되면, 해당 작업은 Web APIs로 이동하여 타이머 실행
  • 타이머 실행이 모두 완료되면 Event Loop로 내려가고, Call Stack의 현재 작업이 종료될 때까지 기다림

---

휴 ~ 10일차까지 한번 복습을 마쳤다.
확실히 실행 컨텍스트에 대한 이해가 깊어져서 초반에 마주했던 실행 컨텍스트 설명이 쉽게 납득되었고
클로저도 더 확실히 정리가 되었다. (뿌야 ~)

오늘 지금 15분 더 채우면 순공 6시간째인데 ... !
아직 10일차라는게 초큼 놀랍지만 !! 그래도 확실히 도움이 되었다 !