js quiz 5 (101~131)

2025. 6. 12.·🎨 프론트엔드 공부/JS & TS

📌102. promise와 async await 차이

const myPromise = () => Promise.resolve('I have resolved!');

function firstFunction() {
  myPromise().then(res => console.log(res));
  console.log('second');
}

async function secondFunction() {
  console.log(await myPromise());
  console.log('second');
}

firstFunction();
// second
// I have resolved!
secondFunction();
// I have resolved!
// second

 

- firstFunction에서 promise는 call stack이 비었을 때 실행된다

- 따라서 'second' 가 먼저 출력되고나서 promise가 resolve되고 'I have resolved!'가 출력된다

- 'second'를 promise 이후에 출력하고 싶으면 then chain으로 연결하면 된다

 

📌104. Promise.resolve()

Promise.resolve(5); // Promise {<fulfilled>: 5}

 

Promise.resolve() 메서드

- <fullfilled> 타입의 resolved value를 가진 Promise를 반환 (아직은 Promise)

- 값을 꺼내려면 .then() 사용해야 한다

 

📌108. 배열 고차함수 정리

// 아래 메서드들 중에 실제로 배열을 수정하는 것은?
const emojis = ['✨', '🥑', '😍'];

emojis.map(x => x + '✨');
emojis.filter(x => x !== '🥑');
emojis.find(x => x !== '🥑');
emojis.reduce((acc, cur) => acc + '✨');
emojis.slice(1, 2, '✨');
emojis.splice(1, 2, '✨');

// ✅ splice

 

- 새로운 배열을 반환: map, filter, slice

- 특정 조건을 만족하는 원소 반환: find

- 특정 값 반환: reduce

 

111. TDZ

let name = 'Lydia';

function getName() {
  console.log(name);
  let name = 'Sarah'; // 이 라인이 없으면 "Lydia" 정상 출력됨
}

getName(); // ReferenceError

 

let, const

- var와 마찬가지로 호이스팅되지만

- var와 다르게 값이 초기화되지는 않는다

- 따라서 선언 전에 참조하려고 하면 ReferenceError가 발생하고 이 구간을 TDZ라고 부른다

 

112. 제네레이터 함수와 yield*

function* generatorOne() {
  yield ['a', 'b', 'c'];
}

function* generatorTwo() {
  yield* ['a', 'b', 'c'];
}

const one = generatorOne();
const two = generatorTwo();

console.log(one.next().value); // ['a', 'b', 'c']
console.log(two.next().value); // a

 

- yield* 키워드를 사용하면 이터레이터의 원소들을 yield 할 수 있다

 

📌114. 호출되지 않은 setInterval()

let config = {
  alert: setInterval(() => {
    console.log('Alert!');
  }, 1000),
};

config = null; // 이 라인이 없어도 setInterval 동작

// setInterval 이 동작

 

- setInterval() 은 즉시실행되고, timer id를 반환한다

- 따라서 실제로 config.alert 프로퍼티에는 setInterval 이 실행된 후 timer id 가 등록된다

 

📌122. typeof 반환값

const name = 'Lydia Hallie';

console.log(!typeof name === 'object'); // false
console.log(!typeof name === 'string'); // false

 

- typeof 반환값은 항상 문자열

- 예 "string", "object"

 

124. isNaN

const name = 'Lydia Hallie';
const age = 21;

console.log(Number.isNaN(name)); // false
console.log(Number.isNaN(age)); // false

console.log(isNaN(name)); // true
console.log(isNaN(age)); // false

 

Number.isNaN 메서드와 isNaN 메서드는 다르다

- isNaN 메서드는 숫자가 아닌 값을 받으면 true를 반환해버린다

 

 

참고

https://javascript-questions.vercel.app/

'🎨 프론트엔드 공부/JS & TS' 카테고리의 다른 글
  • js quiz 6 (132~155 끝)
  • js quiz 4 (71~100)
  • js quiz 3 (46~70)
  • js quiz 2 (18~45)
지식물원
지식물원
지식이 자라는 식물원!
  • 지식물원
    지식물원
    지식물원
  • 전체
    오늘
    어제
    • 분류 전체보기 (517) N
      • 🎨 프론트엔드 공부 (242)
        • JS & TS (92)
        • HTML & CSS (22)
        • React & Next (49)
        • Vue & Nuxt (22)
        • 기타 (57)
      • 🤓 기술 학습 & 공부 기록 (116)
        • Node.js (0)
        • Python (37)
        • 백엔드 (0)
        • 딥러닝 (1)
        • 컴퓨터 일반 (72)
        • 개발 인프라 (6)
      • 👨‍💻 프로젝트 경험 (16)
        • Work (0)
        • Toy (16)
      • ⚙️ 개발 팁 & 노하우 (1) N
        • 프론트엔드 (6)
        • 기타 (16) N
      • ☕️ 커리어 & 인터뷰 준비 (88)
        • 코딩 테스트 (88)
      • 📰 기술 트렌드 & 생각 정리 (4)
      • 📚 기타 (25)
        • 마케팅 (15)
        • 비개발서적 (10)
  • 블로그 메뉴

    • 태그
  • 링크

  • 공지사항

    • 모바일 접속 시 코드 하이라이팅 깨질 때
  • 인기 글

  • hELLO· Designed By정상우.v4.10.3
지식물원
js quiz 5 (101~131)
상단으로

티스토리툴바