프로그래밍 「 자바스크립트 편」12가지 유용한 JavaScript 인터뷰 팁

 

1. ''객체란 무엇이며 어떻게 작동합니까?Set

Set Object를 사용하면 기본 값이든 개체 참조이든 관계없이 모든 형식의 고유한 값을 저장할 수 있습니다.

생성자를 사용하여 인스턴스를 만들 수 있습니다.SetSet

const set1 = new Set();
const set2 = new Set(["a","b","c","d","d","e"]);

이 방법을 사용하여 인스턴스에 새 값을 추가할 수 있습니다. 메서드가 객체를 반환하기 때문에 여러 호출을 함께 연결할 수 있습니다. 개체에 값이 이미 있는 경우 다시 추가되지 않습니다.addSetaddSetaddSet

set2.add("f");
set2.add("g").add("h").add("i").add("j").add("k").add("k");

이 방법을 사용하여 인스턴스에 특정 값이 있는지 확인할 수 있습니다.hasSet

set2.has("a") // true
set2.has("z") // true

속성을 사용하여 인스턴스의 길이를 가져올 수 있습니다.sizeSet

set2.size // returns 10

이 메서드를 사용하여 .clearSet

set2.clear();

객체를 사용하여 배열에서 중복 요소를 제거할 수 있습니다.Set

const numbers = [1, 2, 3, 4, 5, 6, 6, 7, 8, 8, 5];
const uniqueNums = [...new Set(numbers)]; // [1,2,3,4,5,6,7,8]

2.콜백 함수란 무엇인가요?

콜백 함수는 다른 코드에 인수로 전달되는 실행 가능한 코드 조각입니다. 그 목적은 필요할 때 수신 코드에 의해 편리한 시간에 호출되는 것입니다.

JavaScript에서 함수는 객체의 한 유형입니다. 객체와 마찬가지로 함수는 다른 함수에 인수로 전달될 수 있습니다. 따라서 다른 함수에 인수로 전달되는 함수를 콜백 함수라고 합니다.

const btnAdd = document.getElementById('btnAdd');

btnAdd.addEventListener('click', function clickCallback(e) {
    // do something useless
});

이 예에서는 id 가 있는 요소에 대한 click 이벤트를 기다리고 있습니다. 클릭하면 함수가 실행됩니다. 콜백 함수는 특정 데이터 또는 이벤트에 몇 가지 기능을 추가합니다.btnAddclickCallback

배열의 , , 및 메서드에는 매개 변수로 콜백이 필요합니다. 콜백에 대한 좋은 비유는 누군가에게 전화를 걸고 응답하지 않으면 메시지를 남기고 다시 전화를 걸기를 기대하는 것입니다. 누군가에게 전화를 걸거나 메시지를 남기는 행위는 이벤트 또는 데이터이고 콜백은 나중에 발생할 것으로 예상되는 작업입니다.reducefiltermap

3. ES6 모듈이란 무엇입니까?

모듈을 사용하면 코드베이스를 여러 파일로 분할하여 유지 관리를 개선하고 모든 코드가 하나의 큰 파일에 포함되지 않도록 할 수 있습니다. ES6가 모듈에 대한 지원을 도입하기 전에 두 가지 인기 있는 모듈 시스템이 있었습니다.

• CommonJS-Node.js
• AMD (Asynchronous Module Definition) — 브라우저

기본적으로 모듈을 사용하는 것은 매우 간단합니다. 는 다른 파일에서 기능 또는 여러 기능 또는 값을 검색하는 데 사용되며 파일에서 기능 또는 여러 기능 또는 값을 노출하는 데 사용됩니다.import export

수출

ES5 (CommonJS) 사용

// useing ES5 CommonJS - helpers.js
exports.isNull = function (val) {
  return val === null;
}

exports.isUndefined = function (val) {
  return val === undefined;
}
exports.isNullOrUndefined = function (val) {
  return exports.isNull(val) || exports.isUndefined(val);
}

ES6 모듈 사용

// Using ES6 Modules - helpers.js
export function isNull(val){
  return val === null;
}

export function isUndefined(val) {
  return val === undefined;
}
export function isNullOrUndefined(val) {
  return isNull(val) || isUndefined(val);
}

다른 파일에서 함수 가져오기

//ES5 (CommonJS) - index.js
const helpers = require('./helpers.js'); // helpers is an object
const isNull = helpers.isNull;
const isUndefined = helpers.isUndefined;
const isNullOrUndefined = helpers.isNullOrUndefined;
// or if your environment supports Destructuring
const { isNull, isUndefined, isNullOrUndefined } = require('./helpers.js');
-------------------------------------------------------
// ES6 Modules - index.js
import * as helpers from './helpers.js'; // helpers is an object
// or 
import { isNull, isUndefined, isNullOrUndefined as isValid } from './helpers.js';
// using "as" for renaming named exports

파일에서 단일 함수 또는 기본 내보내기 내보내기

ES5 (커먼JS)

// ES5 (CommonJS) - index.js
class Helpers {
  static isNull(val) {
    return val === null;
  }

static isUndefined(val) {
    return val === undefined;
  }
  static isNullOrUndefined(val) {
    return this.isNull(val) || this.isUndefined(val);
  }
}
module.exports = Helpers;

ES6 모듈 사용

// using ES6 Modules - helpers.js
class Helpers {
  static isNull(val) {
    return val === null;
  }

static isUndefined(val) {
    return val === undefined;
  }
  static isNullOrUndefined(val) {
    return this.isNull(val) || this.isUndefined(val);
  }
}
export default Helpers

다른 파일에서 단일 함수 가져오기

ES5 (CommonJS) 사용

//ES5 (CommonJS) - index.js
const Helpers = require('./helpers.js'); 
console.log(Helpers.isNull(null));

ES6 모듈 사용

import Helpers from '.helpers.js'
console.log(Helpers.isNull(null));

4. 약속이란 무엇입니까?

Promise는 비동기 프로그래밍을 위한 솔루션입니다. 구문 측면에서는 비동기 작업의 결과를 얻을 수 있는 개체입니다. 개념적으로 일정 기간 후에 결과를 제공하겠다는 약속을 나타냅니다. 에는 세 가지 상태가 있습니다: , 및 . 상태가 변경되면 변경되지 않은 상태로 유지됩니다. 인스턴스를 생성하면 즉시 실행됩니다.promise promise pending fulfilled rejected Promise

fs.readFile('somefile.txt', function (e, data) {
  if (e) {
    console.log(e);
  }
  console.log(data);
});

콜백 내에 다른 비동기 작업이 있으면 문제가 발생합니다. 우리는 지저분하고 읽을 수 없는 코드로 끝납니다. 이 코드를 '콜백 지옥'이라고 합니다.

// callback hell
fs.readFile('somefile.txt', function (e, data) {
  //your code here
  fs.readdir('directory', function (e, files) {
    //your code here
    fs.mkdir('directory', function (e) {
      //your code here
    })
  })
})

이 코드에서 사용하면 더 읽기 쉽고, 이해하기 쉽고, 유지 관리하기 쉽습니다.promise

promReadFile('file/path')
  .then(data => {
    return promReaddir('directory');
  })
  .then(data => {
    return promMkdir('directory');
  })
  .catch(e => {
    console.log(e);
  })

promise 에는 세 가지 고유한 상태가 있습니다.

• pending: 초기 상태, 이행 또는 거부 전의 상태입니다.
• fulfilled:작업이 성공적으로 완료되었습니다.
• rejected: 작업이 실패했습니다.

pending 상태의 개체는 /state를 트리거하여 해당 상태 처리 메서드에 해결된 값/오류 메시지를 전달합니다. 작업이 성공적으로 완료되면 Promise 개체의 메서드가 호출됩니다. 그렇지 않으면 메서드가 트리거됩니다. 예를 들어:pendingfulfilledrejected thencatch

const myFirstPromise = new Promise((resolve, reject) => {
    setTimeout(function(){
        resolve("Success!"); 
    }, 250);
});

myFirstPromise.then((data) => {
    console.log("Yay! " + data);
}).catch((e) => {...});

5. 무엇이며 어떻게 작동합니까?async/await

async/await 는 비동기 또는 비차단 코드를 작성하기 위한 JavaScript의 새로운 메서드입니다. Promises를 기반으로 구축되었으며 비동기 코드에 대해 더 높은 가독성과 간결성을 제공합니다.

async/await 는 비동기 또는 비차단 코드를 작성하기 위한 JavaScript의 새로운 메서드입니다. Promises를 기반으로 구축되었으며 Promise 및 콜백에 비해 더 높은 가독성과 간결성을 제공합니다. 그러나 이 기능을 사용하기 전에 앞서 언급했듯이 Promises를 기반으로 구축되어 여전히 Promises를 배후에서 활용하기 때문에 Promises의 기본 사항을 배워야 합니다.async/await

약속

function callApi() {
  return fetch("url/to/api/endpoint")
    .then(resp => resp.json())
    .then(data => {
      //do something with "data"
    }).catch(err => {
      //do something with "err"
    });
}

비동기/대기

에서는 구문을 사용하여 예외를 catch합니다.async/awaittry/catch

async function callApi() {
  try {
    const resp = await fetch("url/to/api/endpoint");
    const data = await resp.json();
    //do something with "data"
  } catch (e) {
    //do something with "err"
  }
}

참고: 'async' 키워드를 사용하여 함수를 선언하면 암시적으로 Promise가 반환됩니다.

const giveMeOne = async () => 1;

giveMeOne()
  .then((num) => {
    console.log(num); // logs 1
  });

참고: 키워드는 . 비동기식 함수에서 키워드를 사용하면 오류가 발생합니다. 키워드는 다음 코드 줄을 실행하기 전에 오른쪽 표현식(Promise일 수 있음)이 반환될 때까지 기다립니다.awaitasync functionawaitawait

const giveMeOne = async () => 1;

function getOne() {
  try {
    const num = await giveMeOne();
    console.log(num);
  } catch (e) {
    console.log(e);
  }
}
// Uncaught SyntaxError: await is only valid in async function
async function getTwo() {
  try {
    const num1 = await giveMeOne(); 
    const num2 = await giveMeOne(); 
    return num1 + num2;
  } catch (e) {
    console.log(e);
  }
}
await getTwo(); // 2

6. 스프레드 연산자와 나머지 연산자의 차이점은 무엇입니까?

스프레드 연산자는 세 개의 점으로 표시되며 배열을 쉼표로 구분된 인수 시퀀스로 변환할 수 있습니다. 간단히 말해서 손바닥 타격이 단단한 물체를 분산시키는 것과 같이 큰 요소를 개별적인 작은 요소로 분해하는 것과 유사합니다.…

세 개의 점으로 표시되는 rest 연산자는 spread 연산자와 비슷해 보일 수 있지만 배열 및 객체를 구조화하는 데 사용됩니다. 어떤 면에서 나머지 연산자는 스프레드 연산자의 반대입니다. spread 연산자는 배열을 여러 요소로 '확산'하는 반면, 나머지 연산자는 여러 요소를 '수집'하고 단일 요소로 '압축'합니다.…

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

const nums = [5, 6];
const sum = add(...nums);
console.log(sum);

이 예에서는 배열을 확장하는 함수를 호출할 때 spread 연산자를 사용했습니다. 따라서 parameter의 값은 5이고 parameter의 값은 입니다.add numsab6sum 11

function add(...rest) {
  return rest.reduce((total,current) => total + current);
};

console.log(add(1, 2)); // 3
console.log(add(1, 2, 3, 4, 5)); // 15

이 예에는 임의의 수의 매개변수를 받아들이고 모두 더한 다음 총 합계를 반환하는 함수가 있습니다.add

const [first, ...others] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(others); // [2,3,4,5]

여기서는 rest 연산자를 사용하여 나머지 배열 값을 모두 추출하고 첫 번째 항목을 제외한 다른 배열에 넣습니다.

7. 기본 매개변수는 무엇입니까?

기본 매개 변수는 ES6 또는 ECMAScript 2015에서 사용할 수 있는 JavaScript에서 기본 변수를 정의하는 새로운 방법입니다.

//ES5 Version
function add(a,b){
  a = a || 0;
  b = b || 0;
  return a + b;
}

//ES6 Version
function add(a = 0, b = 0){
  return a + b;
}
add(1); // returns 1

기본 매개변수에서 구조화를 사용할 수도 있습니다.

function getFirst([first, ...rest] = [0, 1]) {
  return first;
}

getFirst();  // 0
getFirst([10,20,30]);  // 10
function getArr({ nums } = { nums: [1, 2, 3, 4] }){
    return nums;
}
getArr(); // [1, 2, 3, 4]
getArr({nums:[5,4,3,2,1]}); // [5,4,3,2,1]

후속 매개변수를 정의하기 전에 이전에 정의된 매개변수를 사용할 수도 있습니다.

function doSomethingWithValue(value = "Hello World", callback = () => { console.log(value) }) {
  callback();
}
doSomethingWithValue(); //"Hello World"

8. 래퍼 객체란 무엇입니까?

이제 JavaScript의 데이터 유형을 검토해 보겠습니다. JavaScript 데이터 형식은 기본 형식과 참조 형식의 두 가지 주요 범주로 나뉩니다.

기본 유형: ,,,,,,UndefinedNullBooleanNumberStringSymbolBigInt

참조 유형: ,,,,등. 간단히 말해서, 그들은 대상입니다.ObjectArrayDateRegExp

참조 형식 중에는 기본 형식에서 사용할 수 없는 메서드와 속성이 있습니다. 그러나 우리는 종종 다음 코드를 접하게 됩니다.

let name = "maxwell";

console.log(typeof name); // "string"
console.log(name.toUpperCase()); // "MAXWELL"

형식은 기본 형식에 속하므로 속성이나 메서드가 없습니다. 그러나 이 예제에서는 오류를 throw하지 않고 문자열의 대문자 값을 반환하는 메서드를 호출합니다.namestring toUpperCase()

그 이유는 기본 형식의 값이 일시적으로 객체로 변환되거나 강제 변환되기 때문에 변수의 동작이 객체의 동작과 유사하기 때문입니다. 및 를 제외한 모든 기본 형식에는 고유한 래퍼 객체인 , , , , 및 가 있습니다. 이 경우 비하인드 스토리는 다음과 같습니다.namenull undefinedStringNumberBooleanSymbolBigIntname.toUpperCase()

console.log(new String(name).toUpperCase()); // "MAXWELL"

속성에 액세스하거나 메서드를 호출한 후 새로 만든 개체는 즉시 삭제됩니다.

9. 암시적 형식 변환과 명시적 형식 변환의 차이점은 무엇입니까?

암시적 형식 변환은 값을 다른 형식으로 변환하는 방법으로, 수동 개입 없이 자동으로 수행됩니다.

아래에 다음 예가 있다고 가정해 보겠습니다.

console.log(1 + '6'); // 16
console.log(false + true); // 1
console.log(6 * '2'); // 12

첫 번째 문의 결과는 16입니다. 다른 언어에서는 컴파일 오류가 발생하지만 JavaScript에서는 문자열로 변환된 다음 연산자와 연결됩니다. 우리는 아무것도하지 않았습니다. JavaScript에 의해 자동으로 수행됩니다.console.log1 +

두 번째 문의 결과는 입니다. JavaScript에서는 가 의 값으로 변환되고 는 로 변환됩니다. 따라서 결과는 입니다.console.log1false boolean 0true 11

세 번째 문의 결과는 입니다. '2'를 숫자로 변환한 다음 곱하면 .console.log126 * 212

반면에 명시적 유형 강제 변환은 수동으로 변환을 수행해야 하는 다른 유형으로 값을 변환하는 방법입니다.

console.log(1 + parseInt('6'));

이 예에서는 parseInt 함수를 사용하여 '6'을 숫자로 변환한 다음 + 연산자를 사용하여 1과 6을 더합니다.

10. NaN이란 무엇입니까? 그리고 값이 NaN인지 어떻게 확인합니까?

NaN"Not a Number"의 줄임말인 JavaScript의 값은 의미 있는 숫자 값을 생성할 수 없는 숫자 연산 또는 변환의 결과로 발생하는 값입니다. 따라서 숫자 연산 또는 변환이 숫자가 아닌 값을 생성하면 결과는 입니다.NaN

let a;

console.log(parseInt('abc')); // NaN
console.log(parseInt(null)); // NaN
console.log(parseInt(undefined)); // NaN
console.log(parseInt(++a)); // NaN
console.log(parseInt({} * 10)); // NaN
console.log(parseInt('abc' - 2)); // NaN
console.log(parseInt(0 / 0)); // NaN
console.log(parseInt('10a' * 10)); // NaN

JavaScript에는 값이 . 그러나 이 함수는 특이한 동작을 나타냅니다.isNaN NaN

console.log(isNaN()); // true
console.log(isNaN(undefined)); // true
console.log(isNaN({})); // true
console.log(isNaN(String('a'))); // true
console.log(isNaN(() => { })); // true

이 모든 문은 우리가 전달하는 값이 .console.logtrueNaN

ES6에서는 값이 . 또는 JavaScript에서와 같이 이 문제가 자신과 같지 않은 유일한 값인지 확인하기 위해 자체 도우미 함수를 만들 수 있습니다.Number.isNaNNaNNaN

function checkIfNaN(value) {
  return value !== value;
}

11. 값이 배열인지 어떻게 알 수 있습니까?

이 방법을 사용하여 값이 배열인지 확인할 수 있습니다. 배열인 인수를 전달하면 ; 그렇지 않으면 .Array.isArraytruefalse

console.log(Array.isArray(5));  // false
console.log(Array.isArray("")); // false
console.log(Array.isArray()); // false
console.log(Array.isArray(null)); // false
console.log(Array.isArray({ length: 5 })); // false

console.log(Array.isArray([])); // true

환경에서 이 메서드를 지원하지 않는 경우 .polyfill

function isArray(value){
 return Object.prototype.toString.call(value) === "[object Array]"
}

물론 전통적인 방법을 사용할 수도 있습니다.

let a = []
if (a instanceof Array) {
  console.log('is an array')
} else {
  console.log('Non-Arrays')
}

12. 객체에 속성이 있는지 어떻게 확인할 수 있습니까?

개체에 속성이 있는지 확인하는 방법에는 세 가지가 있습니다.

첫 번째 방법은 연산자를 사용하는 것입니다.in

const o = { 
  "prop" : "rabbit",
  "prop2" : "tiger"
};

console.log("prop" in o); // true
console.log("prop1" in o); // false

두 번째 방법은 방법을 사용하는 것입니다. 이 메서드는 개체가 지정된 속성을 직접 속성(상속되지 않음)으로 가지고 있는지 여부를 나타내는 값을 반환합니다.hasOwnProperty hasOwnProperty()boolean

console.log(o.hasOwnProperty("prop2")); // true
console.log(o.hasOwnProperty("prop1")); // false

세 번째 방법은 대괄호 표기법을 사용하는 것입니다. 속성이 있으면 해당 속성의 값을 반환합니다. 그렇지 않으면 .obj[‘prop’]undefined

console.log(o["prop"]); // "rabbit"
console.log(o["prop1"]); // undefined