JS 개념 정리

1 분 소요

JS 메소드에 대한 명확한 개념과 사용법을 쉽게 참고할 수 있도록 구성한 가이드.

반복문

map / forEach / for…of / for…in

map: 배열의 각 요소를 순회하고, 그 결과로 새로운 배열을 반환한다. 주로 값을 변환하여 새로운 배열을 만들 때 사용된다.
forEach: 배열의 각 요소를 순회하며, 반환값이 없고 새 배열을 생성하지 않는다. 요소에 대한 작업은 가능하지만, 주로 부수 효과를 줄 때 유용하다.
부수 효과: 외부 상태나 변수에 영향을 주는 작업을 의미
for…of: 배열, 문자열, Set, Map 등 이터러블 객체를 순회하며, 각 요소 값을 직접 사용할 수 있다. 주로 배열과 이터러블 객체에서 요소를 순회할 때 적합하다.
이터러블: 자료를 반복할 수 있는, Symbol.iterator가 구현된 객체를 말한다. Symbol.iterator는 객체를 반복 가능한(iterable) 객체로 만들어주는 특수한 심볼 프로퍼티이다. 간혹 ‘undefined’ is not iterable 에러가 나는데, 이터러블 타입의 인자를 받아야 하는 메소드가 다른 타입의 값을 받았기 때문이다.
for…in: 객체의 모든 열거 가능한 속성 키를 순회한다. 주로 객체의 속성 키에 접근할 때 사용된다.
배열에는 비추천 (인덱스와 순서가 달라질 수 있음)

Promise 객체는 비동기 작업의 완료나 실패를 나타내는 독자적인 객체다 (ex. Array, Object). 비동기 작업이 끝날 때까지 결과를 기다리는 것이 아닌, 결과를 제공하겠다는 ‘약속’을 반환한다는 의미로 Promise라 불리게 되었다.

Promise는 함수로 감싸 사용하는 것이 일반적이다.

function promiseFunction() {
  return new Promise((resolve, reject) => {
    if () {
      resolve();
    } else {
      reject();
    }
  });
}

위처럼 프로미스 객체를 반환하는 함수를 생성하고 호출하면 프로미스 생성자를 반환한다. (생성된 프로미스 객체를 함수 반환값으로 사용하는 기법). 이처럼 프로미스 객체를 함수로 만드는 이유는 3가지가 있다.

재사용성 : 필요할 때마다 호출하여, 반복되는 비동기 작업을 효율적으로 처리할 수 있다.
가독성 : 코드의 구조가 명확해져, 비동기 작업의 정의와 사용을 분리해 코드의 가독성을 높일 수 있다.
확장성 : 인자를 전달하여 동적으로 비동기 작업을 수행할 수 있다. 또한 여러 개의 프로미스 객체를 반환하는 함수들을 연결하여 복잡한 비동기 로직을 구현할 수 있다.