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

1. index.html에서 main.js를 로드하기 위한 코드를 완성하라. 단 index.html은 프로젝트 루트에 위치하고 main.js는 src/js디렉터리에 위치한다.

 

<script src="src/js/main.js></sciprt>

주로 파일을 로드하기위해서는 header에 선언하는 경우가 있지만, javascript코드를 작성하기 위해서는 </body>태그 바로 앞에 <scrip>t태그와 더불어 내용을 넣는다. (만약, 귀찮다면 <header>에 defer라는 속성을 추가하면된다.>

 

2. 변수란 무엇인가?

 

 메모리 공간에 붙여준 이름.

 

let sunhwi;

sunhwi라는 변수를 선언한 변수 선언문 이다.

 

3. JavaScript의 자료형을 모두 나열하라.

 

원시타입과 객체타입 2가지로 분류가되며

원시타입에는 String, Number, boolean, null, undefined, symbol 총 6가지

객체 타입에는 Object 나 함수 배열 등이 포함됩니다.

 

4. 다음의 결과는?

var foo = 42 / -0;
console.log(foo)

정답은?

-Infinity

 

infinity역시 무한대를 전역객체의 속성으로 어떤숫자를 0으로 나눴을때 infinity가됩니다.

0이 아닌 -0으로 나눴으므로 정답은 -infinity가 됩니다.

 

+ 추가적으로 javascipt에는 NaN이라는 Not a Number 전역객체의 속성이 있습니다.

isNaN('hello world'); // true
Number.isNaN('hello world'); // false

위에 isNaN은 현재 값이 NaN이거나, 숫자로 변환했을 때 NaN이 되면 참을 반환합니다.

하지만, Number.isNaN은 현재 값이 NaN이어야만 참을 반환합니다.

 

5. 리터럴이란?

리터럴은 쉽게 얘기하면 사람이 이해할 수 있는 표기법으로 값의 생성을 자바스크립트 엔진한테 명령하는 것입니다. 

자바스크립트 엔진이 그 사람이 이해할 수 있는 표기법으로 만들어진 것을 해석해서 값으로 평가되게끔 만드는 것이죠.

100, 200 // 숫자 리터럴
'hello' //  문자 리터럴 
[1,2,3] // 배열 리터럴
{ id:4, content:'html'} // 객체 리터럴

+ 값과 리터럴의 관계는? 값은 리터럴의 상위 개념이다. 즉 모든 리터럴이 값이 될 수 없다. 
(값은 더 이상 평가될 수 있는 하나의 표현식)

 1) 

var x = 100;

여기서 100은 숫자 리터럴입니다. 여기서 리터럴은 값이 되는것이죠. 여기서 값은 입니다.

 2)

var x = 50 + 50 ;

숫자리터럴이 2개가 있습니다. 50 과 50 이 2가지가 숫자리터럴인 것이죠. 하지만 여기서 값은 50+50이 더해져서 생긴 100이 값이 됩니다.  

 

이것이 값과 리터럴의 관계 입니다.

 

6. 표현식이란 무엇인가?

 

값을 생성하는 다양한 방법

 

보통 표현식은 해석되어서 하나의 값을 만든다.

(리터럴, 변수명, 함수명, 연산자, 함수 호출 등의 조합으로 하나의 값을 만들게 됩니다.)

 

**자바스크립트의 모든 코드는 문 또는 표현식이다.

사실 따지고 보면, 표현식은 문에 포함되는 개념입니다. 조금 더 구분을 하자면, 표현식은 평가되어서 하나의 값을 만드는것에 그치지만, 문은 선언문처럼 선언키워드를 사용해서 변수나 함수 등을 생성하기도 하고, 제어문은 프로그램의 흐름을 제어하기도 하죠. 

 

 **표현식인 문과 아닌문은 어떻게 구별하나요?

 변수에 할당해보기! 변수에 표현식을 할당해보면 표현식인 문인지 아닌지 알 수 있는데요. 예를들어 var x 라고만 선언한다면 이것은 선언문이기에 표현식이 아닌 문입니다. 여기서 x=100 이라고 한다면 x에 100이란 값을 할당하는 문이자 표현식인 문인것입니다.

 

7. 다음의 결과는?

var x=5;
console.log(x != '5'); // false
console.log(x !== '5'); // true

false 

숫자 5와 문자 5는 5라는 값은 같지만, 타입과 값까지 같지는 않다.

 

8. 다음의 결과는?

var foo = false && 'Cat'; 

foo의 값은?

false

 

9. 다음의 결과는?

console.log(!!null);

false

 

10. 0에서 10미만까지 홀수만을 쿤수부터 출력하는 코드를 for문을 사용하여 작성

for ( let i = 10; i > 0; i-- ) {
	if ( i%2 !== 0 ) {
    	console.log(i);
    }
}

 

 

11. 0에서 10미만까지 3의 배수를 큰수부터 출력하는 코드를 while문을 사용하여 작성하라. 단, 0은 출력하지 않음.

let i=9;
while(i > 0){
	if( i % 3 === 0 ){
    	console.log(i);
    }
    i--;
}

 

12. 문자열을 값으로 갖는 name 프로퍼티와 name프로퍼티를 출력하는 sayName메소드를 갖는 객체 obj를 생성하라. 

단, 객체 리터럴 방식을 사용한다.

 

const obj = {
	name: '',
    sayName: funtion() {
    	return this.name;
    }
}

 

13. var키워드 문제점에 대해서 기술

 

1) 변수의 중복 선언입니다. 예를 들어 제가 코드위쪽에서 var x=1이라고 선언하고 아래에서 var x=100이라고 선언했습니다. 그럼 var키워드 같은 경우는 변수 중복선언이 가능하기 때문에 x를 찍어보게되면 100이라는 숫자가 나오게됩니다. 이것이 가능하다는 것은 내가 나도모르게 같은 변수명으로 선언을 하게되어서 코딩을 하는 경우 원하는 결과가 나오지 않을 수도 있다는 것이죠.

 

2) 함수레벨 스코프만 지원하는 점입니다. 그냥 블록문이나 제어문에서 var키워드를 사용하면, 의도치않게 그 값이 변경될 수 있다는 문제점이 존재하게됩니다. 

 

3) 마지막으로 var키워드는 변수 호이스팅이 된다라는 점입니다. 내가 출력을 먼저 하고 아래에 var키워드로 선언한 선언문이 아래쪽에 존재한다고 쳤을 때 위에 출력값은 그 변수명을 못찾겠다라는 표시가아니라 변수호이스팅이 발생하여서 undefined로 값이 나오게됩니다. 이러한 변수 호이스팅 현상은 변수 선언문이 마치 위에 끌어올려진것처럼 동작하게되는 현상입니다. 이것이 에러를 발생시키는 것은 아니지만, 오류를 발생시킬 여지를 가지고 있고, 가독성을 떨어뜨리는 문제를 가지게됩니다. 

 

이러한 문제점들을 가지고 있기 때문에 ES6이후부터는 let과const라는 키워드를 만들어서 문제점을 해결.

 

14. var person = { 'my-name': 'Lee}; 일때, my-name 프로퍼티의 값을 'Kim'으로 변경하고 

console.log()를 사용하여 출력하는 코드를 작성하라.

 

person['my-name'] = 'Kim';
console.log(person['my-name']);

+ 대괄호 표기법이다.

 

15. 참조의 의한 전달 vs 값에 의한 전달 ( pass by ref vs pass by val)

 

pass by reference는 참조하고 있는 주소 값의 값을 전달. (객체)

pass by value는 할당되어 있는 값 자체를 전달. (원시값)