자바스크립트 문제 풀이 (1)

자바 스크립트 헷갈리는 개념 정리 (Beginner)

 

1) 아래 코드의 결과값은?

const list = [1, 2, 3];
const result = list[3];

 

내가 생각한 값 = thriow a Syntax Error => 정답 = undefined

• 지정된 배열의 인덱스를 넘어가는 인덱스를 참조하고자 한다면 에러가 발생한다고 생각했지만 자바스크립트에서는 이 대신에 undefined를 반환해준다는 것을 알 수 있었다.

 

2) 아래 코드의 결과값은?

const object = Object.assign({
    name: 'JavaScript'
}, {
    name: 'ECMAScript'
}, {
    name: 'LiveScript'
});

const result = object.name;

 

정답 = LiveScript

• Object.assign()메소드는 하나 이상의 객체에서 해당 객체로 열거 가능한 모든 속성값을 복사할 때 사용된다.
• 위 코드는 제시된 세 종류의 문자열이 같은 이름의 키를 가지고 있기 때문에 매 assign메소드가 실행될때마다 이전 값은 덮어씌워지게 된다. 그렇기 때문에 가장 마지막에 병합하고자 호출한 값만이 object객체에 남게 된다.

 

3) 아래 코드의 결과값은?

const o = {
    name: 'Brendan'
};
const s = JSON.parse(JSON.stringify(o));
const result = s === o;

 

정답 = false

• JSON.stringify()메소드는 문자열을 JSONstring형태로 변환시키는 역할을 한다.
• JSON.parse()메소드는 JSONstring형태의 값을 구문 분석해 문자열의 형태를 띄는 자바스크립트 값이나 객체를 생성하게 만들어주는 역할을 한다.
• 이 결과로 나온 값은 기존에 존재하던 값 또는 객체와는 별개의 새로운 객체취급을 하기 때문에 위 코드가 다른 객체로 취급받아 거짓의 결과가 나타나게 된 것이다.
• 추가적으로 이 방식은 깊은 복사를 가능하게 만들어주는 코드이며 성능은 조금 안좋은 편이다. 또한 프로토타입은 복사할 수 없다는 단점도 존재한다.

 

4) 아래 코드의 결과값은?

const result = "2009" - "1995";

 

내가 생각한 값 = throw a TypeError => 정답 = 14

• 자바스크립트는 기본적으로 자료형을 선언하지 않고 자동으로 판단하기 때문에 틀린 자료형이 있을 경우 변환을 시도한다는 사실을 잠시 잊고 있었다.
• 이를 통해 알 수 있었던 사실은 문자열 형태를 띄더라도 number형으로 형 변환 후 계산을 시도한다는 것을 알 수 있었으며 변환에 실패할 경우 NaN을 반환한다는 것 또한 알 수 있었다.

 

5) 아래 코드의 결과값은?

const re = /java/i;
const str = 'JavaScript';
const result = re.test(str);

 

정답 = true

• test()메소드는 자바스크립트의 정규식으로 //사이에 있는 문자가 기준 문자열에 들어있다면 true, 없다면 false를 반환하도록 만들어준다.
• i태그는 추가적인 옵션을 부여해주는 플래그로 대소문자를 구별하지 않고 해당 문자가 기준 문자열에 들어있는지 찾아주도록 만들어준다.
• 추가적으로 g태그는 검색 범위를 전역으로 확대한다는 것으로 해당하는 모든 문자를 치환한다는 뜻이다. 해당 플래그가 존재하지 않다면 가장 조건에 맞은 것을 확인한 문자만 치환 후 검색을 종료하게 된다.

 

6) 아래 코드의 결과값은?  ★

const value = 20.0;
const result = NUmber.isInteger(value);

 

내가 생각한 값 = false => 정답 = true

• 처음 생각했을 때는 20.0이 자연수가 아닌 실수이기 때문에 integer가 아니고 false가 반환될 것이라 생각했다.
• .0이 들어있기 때문에 어찌 본다면 실수라고 볼 수도 있겠지만 사실상 20과 같은 의미기 때문에 integer라고 간주된 것으로 보인다. 만일 20.1이었다면 결과값은 false가 나왔을 것이다.

 

7) 다음 중 변수명으로 부적절한 것은?

_result // 2result // $result // r1e2s3u4l5t // _2result

내가 생각한 값 = $result => 정답 = 2result

• 아직 변수의 조건을 정확하게 인식하고 있지 않아 발생한 오류였다. 가장 앞에 숫자가 들어간 변수명은 오류가 발생한다는 것을 정확하게 인지하게 되었다.

 

8) 아래 코드의 결과값은?

const func = function (a, b) {
    return arguments.length;
}
const result = func(1, 2, 3, 4);

 

정답 = 4

• 별달리 어려운 상황은 아니었지만 순간적으로 arguments에 대한 것이 헷갈려 a와 b가 함수 내에 사용되지 않았는데 arguments는 어디에서 나온 것인가에 대한 고민을 했다.
• 결론적으로는 함수에 매개변수로 주어진 것들의 양을 반환하는 것이라는 것을 판단할 수 있어서 주어진 문제를 해결할 수 있었다.

 

9) 자바스크립트는 "case sensitive"입니까?

내가 생각한 답 = false => 정답 = true

• 사실상 정확하게 영어의 의미를 몰라 틀린것도 있었지만 또한 자바스크립트의 특성을 제대로 파악하지 못해서도 발생한 오류였다.
• 자바스크립트는 대소문자를 구분한다는 것을 알 수 있다. 가령 변수명을 보더라도 result와 Result, 심지어 ReSuLT도 각기 다른 변수로 취급하고 있다는 것을 알 수 있었다.

 

10) 아래 코드의 결과값은?

const func = function () {
    return 2009;
}
const result = 262 && func();

 

정답 = 2009

• 일반적으로 알고 있었던 논리 연산자와는 다르게 값에 대한 and연산이였기 때문에 엄청나게 헷갈렸다.
• 자바스크립트에서의 ||와 &&연산자는 boolean값을 반환하지 않고 비교하고자했던 값 자체를 반환하게 된다. 이에 따라 값의 성질 (true, false)에 따라 앞의 값이 반환될 것인지 뒤의 값이 반환될 것인지가 결정된다.
• or는 둘 중 하나만 true여도 true가 반환되기 때문에 앞의 값이 true라면 곧장 앞의 값을 반환하며 앞의 값이 false일 경우에야 뒤의 값을 반환하게 된다.
• and는 둘 다 true여만 true가 반환된다는 것을 이미 알고 있다. 이에 따라 앞의 값이 true라면 뒤의 값을 반환하며, 앞의 값이 false일 때 앞의 값을 반환하게 된다.
• 뒤의 값의 참 거짓 여부는 별로 중요하게 보지 않고 앞의 값에 대한 참 거짓 관계만 면밀하게 따진다면 쉽게 판단할 수 있다.
• 위의 코드와 같이 무엇인가 값이 존재하기만 해도 true라 간주할 수 있으며 undefined, null, NaN등 값이 비어있을 때만 false를 반환하게 된다.

 

11) 아래 코드의 결과값은?

const new Set([1, 2, 3]);
value.add(1);
const result = value.size;

 

내가 생각한 답 = 2 => 정답 = 3

• 처음 생각했던 개념은 배열 자체를 한 개의 객체로 두고 [1, 2, 3], 1과 같이 새로운 값이 추가되어 2의 크기를 가진다 생각했다. 완전히 잘못된 접근이었다.
• 자바의 컬렉션에서와 같이 set은 중복을 허용하지 않는 자료구조이다. 그렇기 때문에 1을 value에 추가하려 해도 이미 저장되어 있는 요소이기 때문에 무시되며 3의 크기가 유지되는 것이 결과값이었다.

 

12) 아래 코드의 결과값은?

const result = ~~(12.34);

 

내가 생각한 답 = 12.34 => 정답 = 12

• ~가 not으로서 값을 반전시킨다는 것은 이미 알고 있었다. 하지만 예전부터 꾸준히 비트 연산자에 대한 것은 약했었기 때문에 이번에도 비트 연산자를 사용하게 되면 암시적으로 부호가 있는 32비트의 정수로 변환하며 소수점 뒤의 모든 값을 제거한다는 것을 알지 못해 틀린 생각을 하게 되었다.
• 위 예시를 통해 비트 연산자를 사용하게 되면 무조건 소수점 뒤의 숫자들은 전부 제거된다는 사실을 머리 속에 기억할 수 있었다.

 

13) 아래 코드의 결과값은?  ★

const f = (r, v) => r + v;
const result = [1, 2, 3].reduce(f, 0);

 

내가 생각한 답 = 5 => 정답 = 6

• reduce()메소드의 정확한 사용법을 몰라 생겨난 오류였다. 해당 메소드를 뒤 인덱스에 해당하는 값을 지운 상태로 f함수를 실행한다고 판단 후 코드를 진행했었다. 
• reduce()메소드의 기본 사용법은 아래와 같다.
  배열.reduce((누적값, 현재값, 인덱스, 요소) => {return 결과}, 초기값);
• 이전 값이 아닌 누적값이기 때문에 다양하게 사용이 가능하다.
• 위 코드의 경우 인덱스 0에서부터 시작해 f함수를 진행한다는 것을 뜻하며 이에 따라 배열의 요소인 1, 2, 3을 차례로 더해야 하는 것이 정답이었다.

 

14) 아래 코드의 결과값은?

const list = [1, 2, 3];
list.shift();
const result = list;

 

내가 생각한 답 = [undefined, 1, 2, 3] => 정답 = [2, 3]

• shift()메소드에 대한 정확한 이해를 하지 못한 상태여서 발생한 오답이었다.
• shift 자체가 옆으로 이동하는 메소드라는 것 자체는 인지하고 있었던 상태였으나, 정확하게 왼쪽인지 오른쪽인지를 알지 못한 상태였다.
• 해당 메소드는 왼쪽으로 모든 요소를 옮기며 이 과정에서 0번 인덱스의 요소를 삭제시키고 또한 배열의 길이도 줄인다는 사실을 알게 되었다.

 

 

15) 아래 코드의 결과값은?

const result = !!null;

 

정답 = false

• !자체가 false를 true로 전환한다는 것으로 알고 있었다. 하지만 null과 같이 존재하지 않는 값에 not연산을 한다면 어떤 결과가 반환되는지에 대한 지식이 존재하지 않았다.
• 하지만 오래 생각해본 후 undefined나 null, "" 등 값이 존재하지 않는 것은 false로 취급한다는 것을 기억해냈다. 이를 토대로 위 코드를 분석해본다면 false에 대한 not연산을 두 번 진행해 결국 false가 반환되는 것을 알 수 있었다.

 

16) 아래 코드의 결과값은?

const result = Math.round(19.95);

 

정답 = 20

• Math클래스에 대한 메소드들에 대한 이해를 묻는 문제였다. 정확하게 round가 올림인지 반올림인지에 대한 확신이 없어 고민을 했던 코드였다.
• round는 반올림, floor는 내림, ceil은 올림이라는 사실을 다시 기억하도록 해준 문제였다.