우리 앱의 샘플 JavaScript 플래시카드

App Store 또는 Google Play에서 저희 앱을 다운로드하여 더 많은 무료 플래시카드를 받거나, 모든 플래시카드에 액세스하려면 구독하세요.

자바스크립트에서 렉시컬 스코프란 무엇인가요?

JavaScript에서의 어휘적 범위(Lexical scope)는 변수의 가시성 범위가 코드 내의 위치에 의해 결정되는 원칙입니다. 이는 변수가 정의된 블록 내에서, 그리고 모든 중첩된 블록에서 액세스할 수 있음을 의미합니다. 이를 통해 클로저(기능 블록 내부에 있는 변수가 외부로부터 보호받는 것)및 변수 접근 제어가 가능해집니다. JavaScript 코드에서 어휘적 범위를 사용한 예시는 다음과 같습니다:

function outerFunction() {
  let outerVariable = `I'm outside!`;

  function innerFunction() {
    console.log(outerVariable); // 'outerVariable'에 접근할 수 있습니다.
  }

  innerFunction();
}
outerFunction(); // `I'm outside!`를 출력합니다.

어휘적 범위는 내부 함수가 외부 함수에서 정의된 변수에 액세스할 수 있게 하며, 이는 외부 함수가 완료된 후에도 마찬가지입니다. 이는 JavaScript에서 클로저를 생성하는 데 있어 핵심 요소로, 애플리케이션에서 더 유연한 상태 관리를 가능하게 합니다.

호이스팅이란 무엇인가요?

Hoisting은 JavaScript 언어에서 변수와 함수를 코드가 실행되기 전에 범위 상단으로 이동시키는 메커니즘입니다. 실제로 이는 함수나 변수를 실제 선언되기 전에 사용할 수 있음을 의미합니다.

하지만 hoisting은 변수와 함수에 대해 약간 다르게 작동한다는 점을 명심해야 합니다.

var 키워드로 선언된 변수의 경우, 선언만 올려집니다, 초기화는 아닙니다. 선언 전에 초기화된 변수는 undefined로 반환됩니다.

변수에 대한 호이스팅 코드 예시:

console.log(myVar); // undefined
var myVar = 5;
console.log(myVar); // 5

함수의 경우, 호이스팅은 함수의 선언과 정의를 모두 상단으로 이동시켜 함수가 선언되기 전에 함수를 사용할 수 있게 합니다.

함수에 대한 호이스팅 코드 예시:

console.log(myFunction()); // "Hello World"

function myFunction() {
  return "Hello World";
}

Hoisting은 let와 const로 선언된 변수에는 발생하지 않습니다.

화살표 함수란 무엇이며 장점은 무엇인가요?

화살표 함수, 또는 화살표 함수는 ECMAScript 6 (ES6)에서 도입된 함수의 한 종류입니다. 화살표( => )를 사용하는 특별한 문법 때문에 화살표 함수라고 불립니다.

비교를 위해, 전통적인 함수는 다음과 같이 보일 수 있습니다:

function sum(a, b) {
  return a + b;
}

화살표 함수로 변경하면 다음과 같습니다:

const sum = (a, b) => a + b;

화살표 함수의 주요한 장점은 자체 실행 컨텍스트( this에 바인딩)를 만들지 않는 것이며, 이는 자바스크립트에서 오류의 주 원인 중 하나입니다. 화살표 함수에서는 this가 surrounding context에서 상속됩니다. 또 다른 장점은 문법의 간결성으로, 함수를 다른 함수의 인자로 사용할 때 특히 유용하며, 예를 들어 고차 함수에서 그렇습니다.

다른 한편으로, 자체 this가 없기 때문에, 화살표 함수는 생성자(창조적) 객체를 정의하거나 프로토타입 객체에서 메서드를 생성하는 데 적합하지 않습니다.

Promise 객체란 무엇이며 어떻게 사용할 수 있나요?

JavaScript에서 Promise 객체는 비동기 작업을 처리하는 데 사용됩니다. Promise는 Promise가 생성될 때는 사용할 수 없을 수 있지만 미래에 사용할 수 있거나 전혀 사용할 수 없는 값을 나타냅니다.

Promise 객체는 세 가지 상태 중 하나에 있을 수 있습니다:
1. Pending - 작업이 아직 진행 중이며, 성공적으로 완료되지 않았거나 오류가 발생하지 않았습니다.
2. Fulfilled - 작업이 성공적으로 완료되었으며, Promise는 값을 반환했습니다.
3. Rejected - 작업이 오류와 함께 완료되었으며, Promise는 오류의 이유를 반환했습니다.

이행되거나 거부된 Promise는 "정착된" 것으로 간주되고 그 상태는 절대 변하지 않습니다.

Promise 객체 생성:

const promise = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve('Operation successful.');
  } else {
    reject('Operation failed.');
  }
});

Promise 객체 사용:

promise
  .then(result => {
    console.log(result); // Will print: 'Operation successful.'
  })
  .catch(error => {
    console.log(error);
  });

.then() 메서드는 Promise가 이행될 때 실행되며, .catch()는 그것이 거부될 때 실행됩니다. 두 경우 모두 작업의 결과 또는 Promise 거부의 이유가 인수로 전달됩니다.

콜백이란 무엇인가요?

콜백, 콜백 함수라고도 불리는 이것은 인수로서 다른 함수에 전달되고 해당 함수의 완료 후에 실행 (되돌아 호출)되는 함수입니다. 콜백 함수는 AJAX 요청 또는 이벤트 처리와 같은 비동기 작업에서 특히 자바스크립트에서 자주 사용됩니다.

콜백 함수는 특정 작업의 결과를 인수로 받아들여 그 결과를 처리하거나 분석하는데 사용됩니다.

실제로 이러한 함수의 사용은 다음과 같이 보일 수 있습니다:

function executeAfterTimeout(callback, timeout) {
  setTimeout(() => {
    console.log('Time passed!');
    callback();
  }, timeout);
}

executeAfterTimeout(() => {
  console.log('This is a callback!');
}, 2000);

이 경우, `executeAfterTimeout` 함수는 파라미터로 `callback` 함수를 받아들여 지정된 시간이 지나면 실행됩니다. 콜백 함수는 자바스크립트에서 비동기 제어 흐름을 관리하는데 매우 유용합니다.

null 병합 연산자는 무엇이며 어떻게 작동하나요?

Nullish Coalescing Operator (??)는 왼쪽 수식이 null 또는 undefined 일 때 연산의 오른쪽 수식을 반환하는 논리 연산자입니다. 다른말로, 변수가 비어있으면, nullish coalescing operator는 결과값으로 정의된 값을 반환합니다.

기본적인 표기법은 다음과 같습니다:

let value = null ?? 'default value';

이 경우, 왼쪽 수식 (value)가 null이므로 결과는 'default value'입니다. 또한, 이 연산자는 OR 연산자 (||)와 다르게 왼쪽 수식이 (false, 0, '', null, undefined, NaN)과 같이 거짓 값 일 때 OR 함수는 오른쪽 수식을 반환하되, nullish coalescing operator는 왼쪽 수식이 null 또는 undefined인 경우에만 오른쪽 수식을 반환합니다.

OR로 예를 든다면:

let value1 = 0 || 'default';
console.log(value1); // output: 'default' because 0 is a false value

Nullish Coalescing로 예를 든다면:

let value2 = 0 ?? 'default';
console.log(value2); // output: 0 because 0 is not null or undefined

따라서, OR와 달리, nullish coalescing operator는 0, '' 그리고 NaN을 "비어있는" 값으로써 간주하지 않습니다.

Symbol은 무엇이며 언제 사용해야 하나요?

JavaScript에서 심볼은 종종 객체의 고유한 속성을 식별하는 데 사용되는 고유하고 변경 불가능한 데이터 타입입니다.

Symbol() 생성자를 호출하여 심볼을 생성할 수 있으며, 이는 호출될 때마다 고유한 심볼을 생성합니다. 동일한 인수로 Symbol() 생성자를 호출하더라도 생성된 각 심볼은 모두 다릅니다.

const symbol1 = Symbol('mySymbol');
const symbol2 = Symbol('mySymbol');
console.log(symbol1 === symbol2); // false를 반환

심볼은 종종 객체의 (고유한) 속성을 정의하는 데 사용되며, 특히 이 속성을 숨기거나 비공개로 만들고 싶을 때입니다. 또한 for...in 또는 for...of를 사용하여 객체를 반복 처리할 때 고려되지 않는 속성을 커버하며, Object.keys() 메서드로 반환되지 않습니다. 게다가 심볼은 "의사" 개인 속성을 만드는 데 사용할 수 있습니다.

let obj = {};
let privateProperty = Symbol('private');

obj[privateProperty] = 'This is private';

console.log(obj[privateProperty]); // 'This is private'
console.log(Object.keys(obj)); // []

심볼을 언제 사용해야 할지에 대한 명확한 규칙은 없습니다. 일반적으로 쉽게 볼 수 없거나 변경할 수 없는 객체의 고유 속성을 생성하거나, 객체의 동작에 영향을 미치는 메소드를 정의하고 싶을 때 사용됩니다.

WeakMap과 WeakSet은 무엇인가요?

WeakMap과 WeakSet은 JavaScript의 Map 및 Set 객체의 특수한 버전으로, 가비지 컬렉터에 의한 자동 메모리 해제를 방지하지 않습니다.

WeakMap은 키가 객체이고 값은 어떤 것이든 될 수 있는 키-값 쌍의 컬렉션입니다. Map과 WeakMap의 가장 큰 차이점은 WeakMap에서의 키가 "약하게" 유지된다는 것입니다. 즉, 키 객체에 다른 참조가 없으면 가비지 수집되고, WeakMap에서의 항목이 자동으로 제거됩니다.

WeakMap 사용 예시:

let john = { name: "John" };

let weakMap = new WeakMap();
weakMap.set(john, "...");

john = null; // 참조를 덮어씀

// john은 메모리에서 제거됩니다!

WeakSet은 WeakMap이 Map에 대한 것처럼 비슷합니다. 객체의 집합이지만, 객체가 다른 곳에서 보이지 않으면 가비지 수집을 방지하지 않습니다. 일반적인 Set 방법론인 `size`와 `clear`를 갖지 않으며, `add` 메소드는 오직 객체만을 취합니다.

WeakSet 사용 예시:

let john = { name: "John" };

let weakSet = new WeakSet();
weakSet.add(john);

john = null; // 참조를 덮어씀

// john은 메모리에서 제거됩니다!

WeakMap과 WeakSet은 주로, 객체에 대한 추가 정보를 저장하려고 할 때 사용되며, 객체 자체가 제거될 때 제거되어야 합니다.

JavaScript 플래시카드