패스트캠퍼스 Javascirpt 퀴즈 정리 4)

1. 아래 코드의 실행결과는?

var num = 8;
var num = 10;

console.log(num);

var키워드의 문제점이 드러난다.

중복선언이 가능하기 때문에 num 은 10이 출력된다.

 

2. 아래 코드의 실행결과는?

const obj = {a:'one', b: 'two', a:'three'};
console.log(obj);

{a:'three', b:'two'} 가 된다.

a는 뒤에 쓰여진 three가 덮어쓰여진다.

 

3. 아래 코드의 실행결과는?

for(let i = 1 ; i < 5; i++) {
    if ( i === 3 ) continue
    console.log(i);
}

1, 2가 일단 3전이니까 먼저 찍힌다.

그리고 3일때 continue는 해야할 명령문을 실행하지 않고 그 다음 명령문을 실행하는 명령문이다.

그래서 다음으로 가서 4를 찍고 마무리.

 

** forEach에서 중간에 빠지기 위해서는 return;을 쓴다. 

하지만, for문을 쓰느것이 좋다. break나 continue를 사용해서.

 

 

4. 아래 코드의 실행결과는?

String.prototype.getPizza = () => {
    return 'pizza already!';
}

const name = 'Lee';

console.log(name.getPizza());

string으로 wrap해서 pizza already가 잘 출력된다.

console.log('Lee'.getPizza());

이것 역시 같은 방식으로 출력이 된다.

하지만, built in(자바스크립트가 내장하고 있는)에서는 쓰면 안된다.

 

 

5. 아래 코드의 실행결과는?

const a = {};
const b = {key: 'b'};
const c = {key: 'c'};

a[b] = 123;
a[c] = 456;

console.log(a[b]);
console.log(a[c]);

아래 둘다 콘솔은 456 이 찍힌다.

a[b], a[c] 둘다 a["[object Object]"] 이 뜻이다. 그래서 같은 것을 가르키고 있는것이고 마지막에 할당한 456이 들어간다.

 

 

6. 아래 코드의 실행결과는?

const foo = () => console.log('First');
const bar = () => setTimeout(()=>console.log('Second'), 0);
const baz = () => console.log('Third');

bar();
foo();
baz();

bar는 0초후에 틱 이벤트가 발생하므로 settimeout은 비동기함수이므로 제일 나중에 찍힌다.

그리고 나머지는 순서대로!

즉

First Third second 순으로 찍힌다.

 

 

7. 버튼을 클릭했을때 이벤트 타깃은??

<div onclick="console.log('first div')">
    <div onclick="console.log('second div')">
    <button onclick="console.log('button')">
    Click!!
    </button>
    </div>
</div>

 

console에는 button second div first div 순서대로 찍힌다.

즉 타깃은 button이다.

**캡처링은 오로지 addEventLister 2번째 인자가 true일때만 동작하고 나머지는 버블링이다.

 

 

8. p요소를 클릭했을때 출력결과는?

<div onclick="console.log('div')">
    <p onclick="console.log('p')">
    click here!
    </p>
</div>

p div 가 출력

버블링에 의해서 타깃인 p가 출력되고 div가 그다음 출력된다.

 

 

9. 아래 코드의 실행결과는?

const person = {name:'Lee'};

function sayHi(age) {
    return `${this.name} is ${age}`;
}

console.log(sayHi.call(person, 20));
console.log(sayHi.bind(person, 20));

call, apply는 함수를 호출한다는 의미

call은 가변인자함수( 인수의 개수가 변한다.)

apply는 2개

 

첫번째 콘솔에서 person객체를 가지고 호출하여 this.name은 Lee가되고 age역시 20이 되어

Lee is 20 이 출력

두번째 콘솔에서 함수를 호출하는 것이 아니고 this만 연결해주는 것이기 때문에

function이 찍힌다.

 

 

10. 아래 코드의 실행결과는?

function foo() {
  return (() =>0)();
}

console.log(typeof foo());

 

답은 number이다.

 

위에 화살표 함수를 풀어쓴다면 return이 0인 함수가 된다. 즉 0을 리턴해서 0의 타입은 number이다.