자바스크립트 퀘스쳔 풀기

A → D 틀림 (undefined , Reference Error)


function sayHi() {
  console.log(name);
  console.log(age);
  var name = 'Lydia';
  let age = 21;
}

sayHi();

해설 :

함수 안에서, 우선 var 키워드를 사용해 name 변수를 선언해요. 이것은 변수를 정의한 줄에 실제로 도달할 때까지, 기본값 undefined으로 호이스팅 되는 것(생성단계에 메모리 공간이 설정)을 의미해요. name 변수를 출력하려는 줄에서 아직 변수를 정의하지 않았기 때문에, undefined 값을 유지해요.

var와는 다르게 let 키워드(그리고 const)를 가진 변수는 호이스팅 되지만, 초기화 되지 않아요. 변수를 선언(초기화)하는 줄 전에는 접근할 수 없어요. 이건 "일시적 사각지대"라고 불려요. 변수가 선언되기 전 변수에 접근하려고 하면, JavaScript는 ReferenceError를 던져요.

내해석 :

var name 호이스팅 먼저 선언, undefined로 값할당, let age 호이스팅 but, 선언되지않음, (undefined할당 X) 그래서 접근할수없다. Refrerence Error

C ([3,3,3] , [1,2,3])


for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1);
}

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1);
}

해설 :

JavaScript의 이벤트 큐 때문에, setTimeout의 콜백 함수는 루프가 실행된 후에 호출돼요. 첫 번째의 루프의 변수 i는 var 키워드를 사용해 선언되어 전역 값이 돼요. 루프 동안, 단항 연산자 ++를 사용해 매번 i의 값을 1씩 증가시켰어요. setTimeout콜백 함수가 호출되기까지, 첫 번째 예시에서의 i는 3이에요.

두 번째 루프에서, 변수 i는 let 키워드를 사용해 선언되었어요: let(그리고 const) 키워드로 선언된 변수는 블록-스코프예요(블록은 { } 사이의 모든 것). 각각을 반복하는 동안, i는 새로운 값을 갖게 되고, 각각의 값은 루프 스코프 안에 있어요.

내해석: 이건 잘 모르겠음.

B (20, NaN)


const shape = {
  radius: 10,
  diameter() {
    return this.radius * 2;
  },
  perimeter: () => 2 * Math.PI * this.radius,
};

console.log(shape.diameter());
console.log(shape.perimeter());

diameter의 값은 일반 함수지만, perimeter의 값은 화살표 함수라는 점을 유의하세요.

화살표 함수에서 this 키워드는 일반 함수와는 다르게 현재 주변 스코프를 참조해요! 이것은 perimeter를 부를 때 shape 객체가 아닌 그것을 둘러싼 스코프(예를 들면 window)를 참조하는 것을 의미해요.

그 객체에는 radius라는 값은 없기 때문에 undefined를 반환해요.

내 해석:

화살표함수 안의 this는 현재 주변 스코프를 참조한다. 그래서 window와 같은 global 스코프를 참조한다.

A → A


+true;
!'Lydia';

단항 더하기는 피연산자를 숫자로 변환하려 해요. true는 1이고, false는 0이에요.

문자열 'Lydia'는 참 같은 값이에요. 사실 우리가 물어본 건 "참 같은 이 값은 거짓인가?"예요. 이건 false를 반환해요.

내해석 :

+는 number로 만들어준다. true의 숫자형은 1이고 false는 0,

!는 반대를 반환한다. 'Lydia'는 true이므로 !true 는 false이다

A → A


const bird = {
  size: 'small',
};

const mouse = {
  name: 'Mickey',
  small: true,
};

JavaScript에서 모든 객체의 키는 문자열이에요(심볼이 아닌 한). 객체의 키를 문자열 형 으로 입력하지 않더라도, 항상 내부적으로 문자열로 변환돼요.

JavaScript는 문장을 해석(또는 분)해요. 대괄호 표기를 사용하면 첫 번째 열린 대괄호 [를 보고 닫힌 대괄호 ]를 찾을 때까지 진행해요. 다 찾은 후에만 문장을 평가할 거예요.

mouse[bird.size]: 먼저 'small'인 bird.size를 평가해요. mouse['small'] 은 true를 반환해요.

그러나 이것은 점 표기법에서 발생하지 않아요. mouse가 bird라고 불리는 키를 가지고 있지 않기 때문에, mouse.bird는 undefined임을 의미해요. 그다음에, 점 표기법을 사용해 size를 물어봐요: mouse.bird.size. mouse.bird는 undefined이기 때문에, 사실 우리가 물어보는 건 undefined.size에요. 이건 유효하지 않아요, 그리고 Cannot read property 'size' of undefined와 비슷한 오류를 던질 거예요.

내해석:

mouse의 key는 name과 small 뿐이다. mouse.bird는 undefined이다.

A→A


let c = { greeting: 'Hey!' };
let d;

d = c;
c.greeting = 'Hello';
console.log(d.greeting);

JavaScript에서 모든 객체는 서로를 동일하게 설정하면 _참조_로 상호작용해요.

우선, 변수 c는 객체에 대한 값을 갖고 있어요. 그 후 c가 객체에 가지고 있는 것과 동일한 참조를 d에 할당해요.

하나의 객체를 변경하면, 모든 객체가 변해요.

내해석:

→ 같은 주소값을 공유하기때문에. 바뀌면 바뀐값을 참조한다.

A → C (true, false, false)


let a = 3;
let b = new Number(3);
let c = 3;

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

new Number()는, 내장 함수 생성자예요. 숫자처럼 보이지만, 사실 숫자가 아니에요: 많은 추가 특성이 있고 그것은 객체예요.

==연산자를 사용할 때는, 같은 값 을 가졌는지 여부만 확인해요. 모두3의 값을 가지고 있음으로 true를 반환해요.

그러나, ===연산자를 사용할 때는, 값 그리고 형 둘 다 같아야 해요. 이건 아니에요: new Number()는 숫자가 아니에요. 객체에요. 그래서 둘 다 false를 반환해요.

내해석 :

new Number()는 함수이기때문에, 객체이다. (원시형태를 제외하면 모두 객체)

따라서 ===는 형태도 같아야하므로 값은 같지만 다른거다.

==는 형태가 달라도 같다고 인정해준다.

A → D


class Chameleon {
  static colorChange(newColor) {
    this.newColor = newColor;
    return this.newColor;
  }

  constructor({ newColor = 'green' } = {}) {
    this.newColor = newColor;
  }
}

const freddie = new Chameleon({ newColor: 'purple' });
console.log(freddie.colorChange('orange'));

colorChange함수는 정적이에요. 정적 메소드는 그것이 만들어지는 생성자에서만 살아있도록 설계되어, 어떤 자식들도 상속받을 수 없어요. freddie는 자식이기 때문에, 이 함수는 상속되지 않아 freddie인스턴스에서는 이용할 수 없어요: TypeError가 던져져요.

내해석 :

static은 부모에서 사용되고 상속해주지않으면 자식에서 사용할수없다.

보통 상속은 super 로 상속해줌.

freddie는 자식이므로 상속해주지않은 colorChange함수를 사용할수없다.

B → A


let greeting;
greetign = {}; // Typo!
console.log(greetign);

방금 전역 객체에 빈 객체를 만들었기 때문에, 객체는 출력돼요. greeting을 greettign으로 잘못 입력했을 때, JS 인터프리터는 global.greettign = {} (또는 브라우저의 window.greetign = {})라고 간주해요.

이것을 피하려면, "use strict"를 사용해요. 이렇게 하면 변수를 어떤 것과 동일하게 설정하기 전에 변수를 선언했는지 확인할 수 있어요.

내해석 :

let greeting은 undefined이다.

greetign = {} 은 greeting의 오타인데, 선언해주지 않으면,

window객체의 window.greetign에 {} 이 할당된다.

따라서 console.log(greetign)은 console.log(window.greetign)이 된다.

D → A


function bark() {
  console.log('Woof!');
}

bark.animal = 'dog';

JavaScript에서는 가능한데, 함수는 객체이기 때문이에요! (원시형 이외는 모두 객체)

함수는 특별한 종류의 객체예요. 당신이 쓴 코드는 실제 함수가 아니에요. 함수는 속성을 가진 객체예요. 이 속성은 호출이 가능해요.

내해석 :

function bark는 객체이다. 함수의 객체의 속성에 접근할수있고, 할당도 가능하다.