지금까지 자바스크립트는 '대충 파이썬이랑 비슷하게 간단한거구만' + '모르는 건 클로드 코드가 알아서 해 주겠지ㅇㅇ' 정도로 생각해서 공부를 별로 안 했지만

정글 최종프로젝트를 하면서, 자바스크립트에 헷갈리는 게 많다보니 타입스크립트든 리액트든 Next.js도 점점 어려워지는 걸 씨게 느꼈다...

그래서 복습하면서 특히나 헷갈리는 개념 위주로 정리를 해보기로 했다.

참고: 인프런 <한입크기로 잡아먹는 리액트>

(cf. 마음같아선 하루종일 인강 들으면서 빨리 끝내고싶지만, 이력서 / 포트폴리오 준비랑 병행하느라 그러진 못할것같다)

(??) null 병합 연산자

• 왼쪽 값이 null 또는 undefined일 때만 오른쪽 값을 반환한다.

// 존재하는 값을 추려내는 기능 (null, undefined 제외)
// e.g., 회원가입
let userName = "코딩왕 송상록";
let displayName = userName ?? "익명의 두루미"; // 회원이름이 없으면 익명의 두루미로 표시
console.log(displayName); // 코딩왕 송상록

||과의 비교

• || (논리 OR 연산자) 같은 경우는 왼쪽 값이 null, undefined가 아닌 다른 falsy 값(0, "" - 빈 문자열, false)일 때도 체크한다.
• 하지만 ??은 오직 null, undefined 둘만 체크한다.

let userName = "";
let displayName = userName || "익명의 두루미"; 
console.log(displayName); // "익명의 두루미" -> ''(빈 문자열)도 falsy라서 OR에서는 오른쪽 값 반환

let displayName2 = userName ?? "익명의 두루미";
console.log(displayName2); // "" -> null이나 undefined일 때만 오른쪽 값 반환

호이스팅

• Javascript 특유의 함수 호출법으로, 함수를 선언되기 전에 호출하는 방식이다.
• function 함수이름(){} 꼴의 함수 선언식으로 선언된 함수에서만 적용 가능하다.
• 변수에 익명 함수를 할당한 함수 표현식에는 적용 불가능하다.
  • 이건 let, const 따위로 선언한 변수를 선언 전에 사용할 수 없는 거랑 동일한 이유라고 생각하심 된다.
  • 이걸 복잡한 말로 Temporal Dead Zone(TDZ)이라 부른다. 실제로는 선언 전에도 변수 확인은 가능하지만, 초기화되어 있지 않아 정상적인 접근이 불가능하다.

// 호이스팅: '끌어올린다'는 뜻. 함수가 선언되기 전에 호출해도 문제 없음.

console.log(getArea(10, 5));

// 매개변수와 인수
function getArea(width, height) {
  const area = width * height;
  console.log(`가로 ${width}, 세로 ${height}인 사각형의 넓이는 ${area}입니다.`);
  return area;
}

// 단, 함수 표현식을 사용하는 경우... 변수에 함수를 할당하는 방식이므로, 호이스팅 불가능.
console.log(mandu());	// ReferenceError 발생
let mandu = function () {
  console.log("만두먹고싶다");
};

Python에선 됐었나?

print(mandu())  # NameError: name "mandu" is not defined

def mandu():
    return "만두먹고싶다"

안 되니까 코테 볼 때 헷갈리지 말자.

콜백 함수

• 자신이 아닌 다른 함수에, 인수로써 전달된 함수를 의미한다.
• 자바스크립트 특유의 비동기 처리에 흔히 사용되는데, 이건 내일 들을 강의 내용이라서 그때 더 정리해 보려고 한다.
  • 일단은 '작업이 완료된 뒤 실행될 함수'를 콜백 함수로 흔히 전달한다고만 알아두면 된다.

// 자신이 아닌 다른 함수에, 인수로써 전달된 함수를 의미함

function repeat(count, callback) {
  for (let idx = 0; idx < count; idx++) {
    callback(idx);
  }
}
// 0, 1, 2, 3, 4 순으로 출력.
repeat(5, (idx) => {
  console.log(idx);
});

// 0, 2, 4, 6, 8 순으로 출력.
repeat(5, (idx) => {
  console.log(idx * 2);
});

// 0, 3, 6, 9, 12 순으로 출력.
repeat(5, (idx) => {
  console.log(idx * 3);
});

콜백 지옥

• 콜백이 여러 단계로 중첩돼서 코드 가독성이 쓰레기가 되는 현상을 뜻한다.
• 만약에 로그인하고 사용자 프로필 구하고 친구들 정보 구하고 게시글 정보 구하는 비동기 과정을 콜백 함수로 작성하면 아래처럼 되는데... 이렇게 쓰면 여러모로 나중에 유지보수가 어려워진다.
• 이런 걸 해결하려고 async/await, Promises 같은 게 생겼다는 데, 내일 범위라서 내일 글에서 다룰 예정이다.

loginUser(id, password, (user) => {
  getUserProfile(user, (profile) => {
    getFriends(profile, (friends) => {
      getPosts(friends, (posts) => {
        console.log(posts);
      });
    });
  });
});