정보실

웹학교

정보실

javascript 자바 스크립트 퀴즈 질문 및 설명

본문

재미 있고 도전적인 퀴즈를 통해 JavaScript 기초를 배우십시오! 

Github에서 이 레포를 별표로 표시하여 새로운 질문이 추가 될 때 따라 오십시오!


https://quiz.typeofnan.dev/ 


1. 배열 정렬 비교 (Array Sort Comparison)


다음 배열을 고려하십시오. 다양한 분류 조건에 무엇이 기록됩니까?


const arr1 = ['a', 'b', 'c'];
const arr2 = ['b', 'c', 'a'];

console.log(
  arr1.sort() === arr1,
  arr2.sort() == arr2,
  arr1.sort() === arr2.sort()
);


정답 : true true false

설명 : 

몇 가지 개념이 있습니다. 먼저 배열 정렬 방법은 원래 배열을 정렬하고 해당 배열에 대한 참조를 반환합니다. 이것은 arr2.sort()를 작성할 때 arr2 배열 오브젝트가 정렬됨을 의미합니다.

그러나 객체를 비교할 때 배열의 정렬 순서는 중요하지 않습니다. arr1.sort() 및 arr1은 메모리에서 동일한 객체를 가리키므로 첫 번째 동등성 테스트는 true를 반환합니다. 이것은 두 번째 비교에서도 마찬가지입니다. arr2.sort() 및 arr2는 메모리에서 동일한 객체를 가리킵니다.

세 번째 테스트에서 arr1.sort()와 arr2.sort()의 정렬 순서는 동일합니다. 그러나 여전히 메모리의 다른 객체를 가리킵니다. 따라서 세 번째 테스트는 false으로 평가됩니다.


2. 객체 집합 (A Set of Objects)


다음과 같은 일련의 객체가 새로운 배열로 분산 된 것을 고려하십시오. 무엇이 기록됩니까?


const mySet = new Set([{ a: 1 }, { a: 1 }]);
const result = [...mySet];
console.log(result);


정답 : [{a: 1}, {a: 1}] 

설명 : 

Set 객체가 중복을 제거하는 것이 사실이지만, 우리가 Set을 생성하는 두 개의 값은 동일한 키-값 쌍을 가지더라도 메모리의 다른 객체에 대한 참조입니다. 이것은 {a : 1} === {a : 1}이 거짓 인 것과 같은 이유입니다.


3. 딥 객체 변이(Deep Object Mutability)


사용자 Joe와 그의 개인 Buttercup을 나타내는 다음 오브젝트를 고려하십시오. Object.freeze를 사용하여 객체를 보존 한 다음 Buttercup의 이름을 변경하려고 합니다. 무엇이 기록됩니까?


const user = {
  name: 'Joe',
  age: 25,
  pet: {
    type: 'dog',
    name: 'Buttercup'
  }
};

Object.freeze(user);

user.pet.name = 'Daffodil';

console.log(user.pet.name);


정답 : Daffodil

설명 : 

Object.freeze는 객체에 얕은 고정을 수행하지만 깊은 속성이 변경되는 것을 방지하지는 않습니다. 이 예에서는 user.age를 변경하지 못하지만 user.pet.name을 변경하는 데 아무런 문제가 없습니다. 객체가 "완벽하게"변경되지 않도록 보호해야 한다고 생각되면 Object.freeze를 재귀적으로 적용하거나 기존 "deep freeze" 라이브러리를 사용할 수 있습니다.


4. 프로토 타입 상속(Prototypal Inheritance)


이 질문에는 Dog 생성자 함수가 있습니다. 우리 개는 분명히 말하기 명령을 알고 있습니다. Pogo가 발언하도록 요청하면 다음 예에 무엇이 기록됩니까?


function Dog(name) {
  this.name = name;
  this.speak = function() {
    return 'woof';
  };
}

const dog = new Dog('Pogo');

Dog.prototype.speak = function() {
  return 'arf';
};

console.log(dog.speak());


정답 : woof

해설 : 

새 Dog 인스턴스를 만들 때마다 speak 속성을 해당 인스턴스로 설정하여 문자열 woof를 반환하는 함수가 되도록 합니다. 새 Dog 인스턴스를 만들 때마다 설정되므로 arf 문자열을 반환하는 Dog에서 prototypal speak 속성을 사용하지 않습니다.


5. 콘솔 로그 가져 오기 (Console Log Fetch)


가져 오기를 로그 하려고 하면 무엇이 기록됩니까?


console.log(fetch);


정답 : It depends

설명 : 

console.log (fetch) 때 실제로 발생하는 일은 현재 환경에 따라 다릅니다. window.fetch 메소드가 있는 브라우저 버전에서 console.log하는 경우 페치 기능을 로그 합니다. 이전 브라우저가 있거나 노드 환경을 사용 중인 경우 참조 오류가 발생할 수 있습니다.


6. Promise.all 해결 순서 (Promise.all Resolve Order)


이 질문에는 임의의 시간이 지나면 해결되는 Promise를 반환하는 타이머 함수가 있습니다. 

우리는 Promise.all을 사용하여 타이머 배열을 해결합니다. 무엇이 기록됩니까?


const timer = a => {
  return new Promise(res =>
    setTimeout(() => {
      res(a);
    }, Math.random() * 100)
  );
};

const all = Promise.all([
  timer('first'),
  timer('second')
]).then(data => console.log(data));


정답 : ["first", "second"] 

해설 : 

Promises이 해결되는 순서는 Promise.all에 중요하지 않습니다. 제공된 순서대로 배열을 반환하는 것을 신뢰할 수 있습니다.


7. Reduce Math


수학 시간! 무엇이 기록됩니까?


const arr = [
  x => x * 1,
  x => x * 2,
  x => x * 3,
  x => x * 4
];

console.log(arr.reduce((agg, el) => agg + el(agg), 1));


정답 : 120

해설 : 

array reduce 메소드에서 두 번째 인수에 초기 값이 제공됩니다. 이 경우 1입니다. 다음과 같이 함수를 반복 할 수 있습니다.

1 + 1 * 1 = 2 

2 + 2 * 2 = 6 

6 + 6 * 3 = 24 

24 + 24 * 4 = 120  

그래서, 120 !


8. 단락 알림 (Short-Circuit Notification(s))


사용자에게 알림을 표시하겠습니다! 다음 스니펫에 무엇이 기록됩니까?


const notifications = 1;

console.log(
  `You have ${notifications} notification${notifications !==
    1 && 's'}`
);


정답 : Something else

설명 : 불행히도 단락 평가는 여기서 의도 한대로 작동하지 않습니다. notifications! == 1 && 's'는 false로 평가됩니다. 즉, 실제로 기록합니다. 스니펫이 제대로 작동하기를 원하면 삼항 연산자를 고려할 수 있습니다.


9. Spread and Rename


다음과 같은 객체 배열을 고려하십시오. 배열을 펼치고 0 인덱스 개체의 firstName 속성을 변경하면 어떻게 됩니까?


const arr1 = [{ firstName: 'James' }];
const arr2 = [...arr1];
arr2[0].firstName = 'Jonah';

console.log(arr1);


정답 : [{ firstName: "Jonah" }]

설명 : 

Spread은 배열의 얕은 복사본을 수행합니다. 즉, arr2에 포함 된 개체는 여전히 arr1 개체가 가리키는 메모리의 동일한 개체를 가리킵니다. arr1 또는 arr2를 기록 할 때 메모리에 객체가 하나만 있고 firstName 속성을 변경하면 반영됩니다.


10. 배열 메소드 바인딩 (Array Method Binding)


다음 시나리오에서 무엇이 기록됩니까?


const map = ['a', 'b', 'c'].map.bind([1, 2, 3]);
map(el => console.log(el));


정답 : 1 2 3

설명 : Object.bind는 this 키워드를 제공된 값 (이 경우 [1, 2, 3])에 바인딩합니다.


11. 고유성 및 순서 설정 (Set Uniqueness and Ordering)


다음 문제에서는 Set 객체 및 spread 연산자를 사용하여 새 배열을 만듭니다. 

기록되는 항목 (고려할 사항 : 항목은 고유해야 합니까? 정렬 되었습니까?)


const arr = [...new Set([3, 1, 2, 3, 4])];
console.log(arr.length, arr[2]);


정답 : 4   2
해설 : 

Set 개체는 고유 한 요소를 강제하지만 순서는 변경하지 않습니다. 결과 arr 배열은 [3, 1, 2, 4]이며, arr.length는 4이고 arr[2] (배열의 세 번째 요소)는 2입니다.


12. IIFE, HOF, or Both


다음 스니펫은 IIFE (Immediately-Invoked Function Expression), HOF (Higher-Order Function) 또는 둘 다를 설명합니까?


((fn, val) => {
  return fn(val);
})(console.log, 5);


정답 : 둘 다

설명 : 

이 스니펫은 console.log와 5를 전달하여 함수를 즉시 호출 할 때 IIFE를 명확하게 나타냅니다. 또한 fn이 함수이므로 HOF임을 알 수 있으며 HOF는 다른 함수를 매개 변수로 사용하거나 함수를 반환하는 함수로 정의됩니다.


13. Array-to-Object Efficiency


a와 b는 모두 동일한 속성과 값을 가진 객체입니다. 어느 쪽이 더 효율적으로 만들어 집니까?


const arr = [1, 2, 3];

const a = arr.reduce(
  (acc, el, i) => ({ ...acc, [el]: i }),
  {}
);

const b = {};
for (let i = 0; i < arr.length; i++) {
  b[arr[i]] = i;
}


정답 : b

설명 : 

b가 설정되면 b[arr[i]] 속성이 각 루프의 현재 색인으로 설정됩니다. a를 설정하면 스프레드 연산자 (...)는 각 루프에 accumulator 객체 (acc)의 얕은 복사본을 만들고 추가로 새 속성을 설정합니다. 이 얕은 복사는 얕은 복사를 수행하지 않는 것보다 비쌉니다. 따라서 b는 보다 효율적으로 설정됩니다.


14. Batman v. Superman


다음 superheroMaker 함수을 고려하십시오. 다음 두 입력을 통과하면 무엇이 기록됩니까?


const superheroMaker = a => {
  return a instanceof Function ? a() : a;
};

console.log(superheroMaker(() => 'Batman'));
console.log(superheroMaker('Superman'));


정답 : "BatmanSuperman"

설명 : 

() => 'Batman'을 superheroMaker에 전달할 때 a는 Function의 인스턴스입니다. 따라서 함수는 Batman 문자열을 반환하여 호출됩니다. 'Superman'을 superheroMaker에 전달할 때 a는 Function의 인스턴스가 아니므로 문자열 'Superman'이 반환됩니다. 따라서 출력은 Batman과 Superman입니다.


15. 객체 키, 객체 값 (Object Keys, Object Values)


다음 객체를 고려하십시오.


const obj = { 1: 1, 2: 2, 3: 3 };


Object.keys가 Object.values와 같은가요?


console.log(Object.keys(obj) == Object.values(obj));


정답 : false

설명 : 

이 경우 Object.keys는 [1, 2, 3]이고 Object.values는 [1, 2, 3] ...이지만 메모리에서 서로 다른 객체이므로 등가 비교는 false를 반환합니다. 여기서 객체와 배열 비교의 개념을 살펴보면서 많은 퀴즈 질문을 볼 수 있습니다!


16. 기본 재귀 (Basic Recursion)


다음과 같은 재귀 함수를 고려하십시오. "Hello World"라는 문자열을 전달하면 무엇이 기록됩니까?


const myFunc = str => {
  if (str.length > 1) {
    return myFunc(str.slice(1));
  }

  return str;
};

console.log(myFunc('Hello world'));


정답 : d

설명 : 

함수를 처음 호출 할 때 str.length는 1보다 커서 ( "Hello World"는 11 자) str.slice (1)에서 호출 된 동일한 함수인 문자열 "ello World"를 반환합니다. 문자열이 한 문자만 될 때까지 이 프로세스를 반복합니다 (문자 "d"). 그런 다음 해당 문자를 기록합니다.


17. Function Equality


다음 평등 시나리오를 테스트 할 때 무엇이 ​​기록됩니까?


const a = c => c;
const b = c => c;

console.log(a == b);
console.log(a(7) === b(7));


정답 : false  true

설명 : 

첫 번째 테스트에서 a와 b는 메모리에서 다른 객체입니다. 각 함수 정의의 매개 변수와 반환 값이 동일한 것은 중요하지 않습니다. 따라서 a는 b와 같지 않습니다. 두 번째 테스트에서 a (7)은 숫자 7을 반환하고 b (7)은 숫자 7을 반환합니다. 이러한 기본 유형은 서로 완전히 동일합니다.


이 경우 등식 (==) 대 항등 (===) 비교 연산자는 중요하지 않습니다. 어떤 유형의 강제도 결과에 영향을 미치지 않습니다.


18. Object Property Equality


a와 b는 이름 속성이 동일한 다른 객체입니다. 이 속성들이 서로 엄격하게 동일합니까?


const a = {
  firstname: 'Bill'
};

const b = {
  firstname: 'Bill'
};

console.log(a.firstname === b.firstname);


정답 : true

설명 : 

대답은 'yes'입니다. a.firstname은 문자열 값 Bill이고 b.firstname은 문자열 값 Bill입니다. 두 개의 동일한 문자열은 항상 같습니다.


19. Function Function Syntax


myFunc가 함수이고 val1이 변수이고 val2가 변수라고 가정 해 봅시다. JavaScript에서 다음 구문이 허용됩니까?


myFunc(val1)(val2);


정답 : 예

설명 : 

이것은 고차 함수의 일반적인 패턴입니다. myFunc(val1)가 함수를 반환하면 해당 함수는 val2를 인수로 사용하여 호출됩니다. 다음은 시도해 볼 수 있는 동작의 예입니다.


const timesTable = num1 => {
  return num2 => {
    return num1 * num2;
  };
};

console.log(timesTable(4)(5));
// 20


20. Object Property Mutation


아래의 객체 a와 b를 고려하십시오. 무엇이 기록됩니까?


const a = { firstName: 'Joe' };
const b = a;
b.firstName = 'Pete';
console.log(a);


정답 : { firstName: "Pete" }

설명 : 

두 번째 줄에서 b = a를 설정하면 b와 a는 메모리에서 동일한 객체를 가리킵니다. 따라서 b에서 firstName 속성을 변경하면 메모리에 있는 유일한 객체의 firstName 속성이 변경되므로 a.firstName은 이 변경 사항을 반영합니다.


21. Greatest Number in an Array


다음 함수는 항상 배열에서 가장 큰 숫자를 반환합니까?


function greatestNumberInArray(arr) {
  let greatest = 0;
  for (let i = 0; i < arr.length; i++) {
    if (greatest < arr[i]) {
      greatest = arr[i];
    }
  }
  return greatest;
}


정답 : 아니오

설명 : 

이 함수는 하나 이상의 값이 0 이상인 배열에 적합합니다. 그러나 모든 숫자가 0 미만이면 실패합니다. 이는 0이 모든 배열 요소보다 큰 경우에도 가장 큰 변수가 0에서 시작하기 때문입니다.


22. Function Argument Mutation


객체를 함수의 인수로 전달할 때 원래 객체를 변경할 수 있습니까? 다음 예에서 somePerson.valid가 true이거나 정의되지 않습니까?


const somePerson = { username: 'Davey154' };

const personValidator = person => {
  person.valid = person.username.length > 5;
  return person.valid;
};

personValidator(somePerson);

console.log(somePerson.valid); // ??


정답 :  true

설명 : 

우리의 함수에서, 사람은 somePerson이 가리키는 것과 동일한 객체를 메모리에서 가리킬 것입니다. 이것은 우리의 함수 안에서 사람에게 하는 모든 변이가 어떤 사람에게도 일어난다는 것을 의미합니다!


23. Map letters to numbers


다음 매핑을 고려하십시오. 무엇이 기록됩니까?


const myArr = ['a', 'b', 'c'];
const myMap = { a: 1, b: 2, c: 3 };

const result = myArr.map(letter => myMap[letter]);
console.log(result);


정답 : [1, 2, 3]

설명 : 

map 메소드는 각 배열 항목에 대해 지정된 변환을 수행하여 기존 배열에서 새 배열을 작성합니다. 

이 예에서 각 문자는 해당 객체의 값으로 대체됩니다.


24. Pass by Value


변수를 서로 동일하게 설정 한 다음 하나를 변경할 때 다른 하나를 변경합니까? 다음 코드를 고려하십시오. 무엇이 기록됩니까?


let a1 = {
  name: 'Johnny',
  hobby: 'football'
};

let b1 = 'Lisa prefers Johnny';

let c1 = ['Denny', 'Michelle', 'Chris R'];

let a2 = a1;
let b2 = b1;
let c2 = c1;

a2.hobby = 'roofsitting';
b2 = 'Lisa prefers Mark';
c2[2] = 'Doggy';

console.log(a1.hobby);
console.log(b1);
console.log(c1[2]);


정답 : roofsitting, "Lisa prefers Johnny", Doggy

설명 : 

a2 및 c2는 메모리에서 a1 및 c1과 동일한 객체를 참조하므로 속성 취미 및 [2]가 변경되면 a1 및 c1을 통해 이러한 변경 사항을 볼 수도 있습니다. b2에 대한 변경은 속성을 변경하지 않고 b2 변수 자체를 대체했습니다. 변수를 새 값으로 바꾸더라도 원래 값에는 영향을 미치지 않으므로 b1은 변경되지 않았습니다.













  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 17회 ]  작성일19-10-10 11:14

웹학교