🪴 성장일지

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?<br/> 성장하고 있는 것이 살아 있는 것이다.<br/> 생명의 유일한 증거는 성장이다!

🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명

참조형 타입이 불변형과 다른 부분

• 참조형에서도 마찬가지로 데이터 영역 자체는 불변이지만, 객체 내의 프로퍼티에 해당하는 변수 영역에서는 데이터를 가리키는 주소값이 바뀜. 이런 점을 가변성이라고 함.

얕은 복사와 깊은 복사의 차이

• 얕은 복사 : 객체의 바로 아래 단계의 값만 복사
• 깊은 복사 : 내부의 모든 값들을 하나하나 찾아서 전부 복사

  var copyDeep = function (target) {
  	var result = {};
  	if (typeof target === 'object' && target !== null) {
  		for (var prop in target) {
  			result[prop] = copyDeep(target[prop];
  			}
  		} else {
  			result = target;
  		}
  		return result;
  	};

environmentRecord

• 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장됨(처음부터 끝가지 순서대로 훑음)
• 컨텍스트를 구성하는 함수에 지정된 매개변수 식별자, 선언함 함수 자체, var로 선언된 변수의 식별자

호이스팅(feat.environmentRecord)

• 코드가 실행되기 전에 environmentRecord에 환경에 속한 코드의 변수명을 모두 알고 있음
• ‘이 덕분에 식별자들을 최상단으로 끌어올려놓은 다음 실제 코드를 실행한다’해도 문제가 없음
• 이런 추상화 개념이 호이스팅(자바스크립트 엔진이 진짜 끌어올리진 않지만, 끌어올린 것으로 간주)

이벤트 루프

• 단일 스레드를 사용하는 자바스크립트 엔진과 구동 환경에서 제공하는 스레드를 상호 연동하기 위한 장치
• 콜스택이 비었을 때, 테스크 큐에 있는 콜백 함수를 넘겨주는 역할

이벤트 루프와 실행컨텍스트의 연관성

• 실행 컨텍스트(콜스텍)이 비어있을 때, 테스크 큐에 있는 콜백 함수들이 호출 스택에 추가될 수 있음

클로저 현상에서 스코프의 관계

• 클로저는 외부 스코프의 변수를 참조하는 그 내부 함수를 외부로 전달할 때 생기는 현상

async/await -> promise -> setTimeout의 변천사

// 1-0. setTimeout으로 비동기 제어(실패)
function findUser(id) {
  let user;
  setTimeout(function () {
    console.log("waited 0.1 sec.");
    user = {
      id: id,
      name: "User" + id,
      email: id + "@test.com",
    };
  }, 100);
  return user;
}

const user = findUser(1);
console.log("user:", user); // user: undefined

// 1-1. setTimeout으로 비동기 제어(성공)
function findUserAndCallBack(id, cb) {
  setTimeout(function () {
    console.log("waited 0.1 sec.");
    const user = {
      id: id,
      name: "User" + id,
      email: id + "@test.com",
    };
    cb(user);
  }, 100);
}

findUserAndCallBack(1, function (user) {
  console.log("user:", user);
});

// 1-2. Promise로 비동기 제어
findUser(1).then((user) => console.log('user:', user))
function findUser(id) {
	return new Promise((resolve, reject) => {
		setTimeout(function () {
    console.log("waited 0.1 sec.");
    const user = {
      id: id,
      name: "User" + id,
      email: id + "@test.com",
    };
    resolve(user)
  }, 100);

// 2-1. Promise로 비동기 제어
function fetchAuthorName(postId) {
  return fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`)
    .then((response) => response.json())
    .then((post) => post.userId)
    .then((userId) => {
      return fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
        .then((response) => response.json())
        .then((user) => user.name);
    });
}

fetchAuthorName(1).then((name) => console.log("name:", name));

// 2-2. async/await로 비동기 제어
async function fetchAuthorName(postId) {
  const postResponse = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${postId}`
  );
  const post = await postResponse.json();
  const userId = post.userId;
  const userResponse = await fetch(
    `https://jsonplaceholder.typicode.com/users/${userId}`
  );
  const user = await userResponse.json();
  return user.name;
}

fetchAuthorName(1).then((name) => console.log("name:", name));

1. setTimeout으로 비동기를 제어하다보니 익명 함수로 전달되는 콜백 함수가 너무 길어지고 많아져 코드의 가독성이 안좋아지는 문제 발생(콜백지옥)
2. Promise를 사용함으로써 Promise 객체를 생성하여 리턴하고 이 객체에 then() 메서드를 활용해 결과값을 활용하여 다음 작업을 수행 가능해짐. 또한 가독성이 떨어지는 들여쓰기에서 벗어남.
3. async/await를 통해 좀더 디버깅하기 용이해지고 더욱더 동기적인 코드처럼 다룰 수 있게 됨.

undefined