정보실

웹학교

정보실

javascript 설명과 함께 7 빠른 JavaScript 팝 퀴즈

본문

소개 


나는 새로운 것을 배우고 우리가 알고 있는 것을 평가하는 것이 우리를 계속 추적하는 데 유용하므로 구식이라고 느끼는 상황을 피합니다. 이 기사에서는 JavaScript의 몇 가지 기본 사항을 살펴 봅니다.


https://devinduct.com/blogpost/49/7-quick-javascript-pop-quizzes-with-explanations 


1. 선언 


다음 코드를 생각하고 아래 설명을 읽지 않고 기록되는 내용 (및 이유)에 답하십시오.


// situation 1
console.log(person);
var person = 'John';

// situation 2
console.log(person);
let person = 'Phill';

// situation 3
console.log(person);
const person = 'Frank';

// situation 4
const person = 'Vanessa';
console.log(person);
person = 'Mike';
console.log(person);

// situation 5
var person = 'John';
let person = 'Mike';
console.log(person);

// situation 6
var person = 'John';
if (person) {
  let person = 'Mike';
  console.log(person);
}
console.log(person);

설명 : 


상황 1 : 여기에 예상되는 결과는 콘솔에 John이라는 텍스트가 쓰여진 것이지만 놀랍게도 undefined가 대신 기록됩니다. 


자, 여기서 우리는 고전적인 JavaScript가 실제로 작동하는 것을 볼 수 있습니다. 이 동작을 게양이라고 합니다. 기본적으로 언어는 변수 선언과 값 할당을 두 부분으로 나눕니다. 변수는 맨 처음으로 이동하고 개발자가 처음 선언한 위치에 관계없이 값이 정의되지 않은 (게양 된) 값으로 선언되어 선언됩니다. 다음과 같이 보입니다 :


var person;
console.log(person);
person = 'John';

상황 2 : 여기에 참조 오류가 발생합니다. 


잡히지 않은 ReferenceError : 초기화하기 전에 'person'에 액세스 할 수 없습니다.


오류 텍스트 자체를 나타냅니다. 키워드 let을 사용했기 때문에 변수가 호이스트 되었지만 초기화되지 않은 상태로 남아 있으며 초기화되지 않은 변수에 액세스 하려고 한다는 오류가 발생합니다. let 키워드는 ES6에 도입되어 블록 범위 변수를 사용하여 의도하지 않은 동작을 방지 할 수 있습니다.


상황 3 : 여기, 상황 2에서와 같은 오류가 있습니다. 


차이점은 키워드 const를 사용했기 때문에 초기화 후 변수를 다시 할당 할 수 없다는 것입니다. 이 키워드는 ES6에도 도입되었습니다.


상황 4 :이 경우 키워드 const가 어떻게 유용한 지, 그리고 실수로 변수를 재 할당하는 방법을 알 수 있습니다. 이 예에서는 먼저 콘솔에 Vanessa가 작성된 다음 유형 오류가 표시됩니다. 


잡히지 않은 TypeError : 상수 변수에 할당


const 변수의 유용성은 코드베이스와 함께 기하급수적으로 증가합니다.


상황 5 : 키워드 var를 사용하여 특정 범위 내에서 변수가 이미 정의 된 경우 동일한 범위 내에서 let 키워드를 사용하여 변수를 다시 선언하면 오류가 발생합니다. 


따라서 이 예에서는 아무것도 기록되지 않으며 구문 오류가 표시됩니다.


Uncaught SyntaxError : 식별자 'person'이 이미 선언되었습니다


상황 6 : 함수 범위 변수가 첫 번째이고 블록 범위 변수가 두 번째입니다. 이 경우 이름 / 식별자가 동일한 지 여부는 중요하지 않습니다. 


콘솔에서 Mike와 John이 순서대로 기록되는 것을 볼 수 있습니다. 왜?


키워드 let은 블록 범위 변수를 제공하기 때문에 변수가 작성된 범위 (이 경우 if ... else 문) 내에만 존재한다는 의미입니다. 내부 변수는 외부 변수보다 영장류이므로 동일한 식별자를 사용할 수 있습니다.


2. 상속 (Inheritance) 


다음 classes을 고려하여 기록되는 내용과 이유에 답변하십시오.

class Person {
  constructor() {
    this.sayHello = () => {
      return 'Hello';
    }
  }

  sayBye() {
    return 'Bye';
  }
}

class Student extends Person {
  sayHello() {
    return 'Hello from Student';
  }
}

const student = new Student();
console.log(student.sayHello());

설명 :


If you said Hello you were right! 


이유 : 새 Student 인스턴스를 만들 때마다 sayHello 속성을 Hello 문자열을 반환하는 함수로 설정합니다. 이것은 부모 (Person) 클래스 생성자에서 발생합니다.


클래스는 JavaScript에서 구문적인 설탕이며 이 예에서는 Student 클래스의 sayHello 메소드가 프로토 타입 체인에 정의되어 있습니다. Student 클래스의 인스턴스를 만들 때마다 sayHello 속성을 해당 인스턴스로 설정하여 Hello 문자열을 반환하는 함수로 설정하면 프로토 타입 체인에 정의 된 함수를 사용할 수 없으므로 Hello from Student 메시지가 기록되지 않습니다.


3. 객체 변이 (Object Mutability) 


다음 상황을 고려하고 각 섹션 출력을 생각하십시오.


// situation 1
const user = {
  name: 'John',
  surname: 'Doe'
}

user = {
  name: 'Mike'
}

console.log(user);

// situation 2
const user = {
  name: 'John',
  surname: 'Doe'
}

user.name = 'Mike';
console.log(user.name);

// situation 3
const user = {
  name: 'John',
  surname: 'Doe'
}

const anotherUser = user;
anotherUser.name = 'Mike';
console.log(user.name);

// situation 4
const user = {
  name: 'John',
  surname: 'Doe',
  address: {
    street: 'My Street'
  }
}

Object.freeze(user);

user.name = 'Mike';
user.address.street = 'My Different Street';
console.log(user.name);
console.log(user.address.street);

상황 1 : 여기에서 이전 섹션에서 배웠 듯이 허용되지 않는 const 변수를 다시 할당하려고 시도하므로 유형 오류가 발생합니다. 


콘솔의 결과는 다음과 같습니다.


잡히지 않은 TypeError : 상수 변수에 할당


상황 2 :이 시나리오에서는 키워드 const로 선언 된 변수를 수정하더라도 동작이 다릅니다. 차이점은 참조가 아닌 객체 속성을 변경하고 있으며 const 객체 변수에서 허용된다는 것입니다. 


콘솔의 결과는 Mike라는 단어여야 합니다.


상황 3 : 사용자를 anotherUser 변수에 지정하여 원하는 경우 참조 또는 메모리 위치를 공유합니다. 즉, 둘 다 메모리에서 동일한 객체를 가리 키므로 한 객체의 속성을 변경하면 다른 객체의 변경 사항이 반영됩니다. 


콘솔의 결과는 Mike 여야 합니다.


상황 4 : 여기서는 이전 시나리오에서 부족했던 기능을 제공하기 위해 Object.freeze 메소드를 사용하고 있습니다 (상황 3). 이 방법을 사용하면 객체를 고정하여 속성 값을 변경할 수 없습니다. 그러나 캐치가 있습니다. 얕은 고정 만 수행하므로 깊은 속성 업데이트를 보호하지 않습니다. 이것이 이름 속성이 변경되지 않고 거리 속성을 변경할 수 있는 이유입니다. 


콘솔의 출력은 John 및 My Different Street라는 단어 순서대로 표시되어야 합니다.


4. 화살표 함수 (Arrow Function) 


다음 스니펫을 실행 한 후 기록되는 것 및 이유 :

const student = {
  school: 'My School',
  fullName: 'John Doe',
  printName: () => {
    console.log(this.fullName);
  },
  printSchool: function () {
    console.log(this.school);
  }
};

student.printName();
student.printSchool();

콘솔의 출력은 undefined이며 My School은이 순서대로 나타납니다.


구식 학교에서 오는 경우 다음 구문에 익숙 할 것입니다.

var me = this;
// or
var self = this;

// ...
// ...
// somewhere deep...
// me.doSomething();

me 또는 self 변수를 생성 된 모든 중첩 함수에 액세스 할 수 있는 부모 범위로 생각할 수 있습니다.


화살표 함수를 사용할 때 이것은 우리를 위해 수행되며 코드의 더 깊은 곳에서 액세스하기 위해 이 참조를 더 이상 저장할 필요가 없습니다. 화살표 함수는 이것을 바인딩 하지 않고 대신 부모 범위에서 상속합니다. 이것이 printName 함수를 호출 한 후 정의되지 않은 로그를 기록한 이유입니다.


5. 구조분해(Destructuring) 


아래의 구조를 확인하고 무엇이 기록 될지 생각하십시오. 주어진 구문이 허용됩니까? 아니면 오류가 발생합니까?


const rawUser = {
   name: 'John',
   surname: 'Doe',
   email: 'john@doe.com',
   displayName: 'SuperCoolJohn',
   joined: '2016-05-05',
   image: 'path-to-the-image',
   followers: 45
}

let user = {}, userDetails = {};
({ name: user.name, surname: user.surname, ...userDetails } = rawUser);

console.log(user);
console.log(userDetails); 

상자에서 약간 벗어 났지만 위의 구문이 허용되며 오류가 발생하지 않습니다! 꽤 깔끔 하지요?


우리 대부분은 그런 식으로 표현의 오른쪽에 익숙하지 않습니다 ... 내 말은, 왼쪽에만 도트 구문이 포함되어 있어야 합니까? :)


측면의 모든 농담, 위의 구문은 강력하며 위의 예와 같이 모든 객체를 두 개의 더 구체적인 객체로 쉽게 나눌 수 있습니다.


콘솔 출력은 다음과 같습니다.

// {name: "John", surname: "Doe"}
// {email: "john@doe.com", displayName: "SuperCoolJohn", joined: "2016-05-05", image: "path-to-the-image", followers: 45}


6. 비동기/대기 (Async/Await) 


다음과 같은 즉시 함수가 호출 된 후 무엇이 기록됩니까?


(async () => {
  let result = 'Some Data';

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Some data retrieved from the server'), 2000);
  });

  result = await promise;
  console.log(result);
})();

설명 :

2 초 후에 'Some data retrieved from the server'했다고 말하면 맞습니다! 


promise이 해결 될 때까지 코드가 일시 중지됩니다. 2 초 후, 계속 진행하고 주어진 텍스트를 기록합니다. 이것은 자바 스크립트 엔진이 문자 그대로 async 작업이 완료 될 때까지 await한다는 것을 의미합니다. async/await 접근 방식은 promise 결과를 얻는 구문 설탕입니다. 어떤 사람들은 promise보다 더 읽기 쉬운 방법을 말할 수 있습니다.


7. 반환 진술 (The Return Statement) 

const multiplyByTwo = (x) => {
    return
    {
        result: x * 2
    };
}
console.log(multiplyByTwo(2));  

설명 : 


{result : 4}라고 말하면 틀린 것입니다. 출력이 undefined입니다. 그러나 나 자신에게 너무 가혹하지 마십시오 .C#도 작성한다는 점을 고려할 때 저도 버그가 있었으며 문제는 없습니다.


위의 코드는 자동 세미콜론 삽입으로 인해 undefined로 반환 됩니다. 즉, return 키워드와 표현식 사이에 줄 종결자가 허용되지 않습니다.


해결책은 함수를 수정하고 다음 방법 중 하나로 작성하는 것입니다.


const multiplyByTwo = (x) => {
    return {
        result: x * 2
    };
}

또는 


const multiplyByTwo = (x) => {
  return (
    {
      result: x * 2
    }
  );
}



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

페이지 정보

조회 15회 ]  작성일19-10-30 10:40

웹학교