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

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

 

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

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

 

정답 = 1,2,3

• join() 메소드를 잘 알고 있지 않아 세 요소를 전부 합한 값인 6인지 1,2,3인지 헷갈리는 문제였다.
• join() 메소드는 기준이 되는 배열의 모든 요소를 구분자를 기준으로 나누도록 만드는 역할을 하며 별다른 값을 입력하지 않는다면 ,이 기준이 된다.
• 가령 위 코드에서 join(' | ')으로 명령을 넣었다면 결과값은 1 | 2 | 3으로 달랐을 것이다.

 

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

const array = [1, 2, 3];
const result = array instanceof Array;

 

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

• instanceof에 대한 지식이 없어 틀린 생각을 하게 되었다. array변수와 Array에 대해 차이가 있냐는 물음이라 판단했고, 자바스크립트는 대소문자를 구별하기 때문에 false라고 생각을 했다.
• 결과적으로 instanceof은 해당 변수의 자료형에 대한 판단을 하도록 해주는 연산자로 array변수는 배열이기 때문에 Array가 참이라는 결과가 반환된다.

 

19) 아래 코드에 대한 결과값은?

let numbers = [262, 2009, 95];
let [first, second, third] = numbers;

const result = second;

 

정답 = 2009

• 앞뒤 관계를 보면 정확하게 알지는 못하더라도 결과값이 2009가 된다는 추측이 가능했지만 정확하게 왜 이러한 결과가 나타나게 되었는지에 대한 이해는 아직 이루어지지 못했다.
• 위 코드는 비구조화 할당에 대한 이해를 묻는 문제였다.
• 코드를 보면 numbers의 세 숫자 요소를 인덱스 순서대로 각각 first, second, third에 대입해준다는 뜻을 가지고 있다.
• https://velog.io/@public_danuel/destructuring-assignment 에서 필요할 경우 비구조화 할당에 대한 더 많은 정보를 찾을 수 있다.

 

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

const number = 12.3456;
const result = number.toPrecision(2);

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

• 나는 toPrecision()메소드를 소수점 뒤 몇번째 자리까지 보여줄 것인지 결정하는 역할을 할 것이라고 생각했다.
• 실제로 toPrecision()메소드는 number형을 string형으로 변환해주는 역할을 한다. 이와 유사한 역할을 하는 메소드로는 toString(), toExponential(), toFixed(), valueOf()이 있다.
• toPrecision(파라미터)메소드는 파라미터 길이만큼 숫자를 자른 후 반올림하게 된다. 만일 위 코드에서 toPrecision(3)이었다면 12.3이 결과로 나오게 된다.

 

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

const result = 'ECMAScript'.slice(1, -1);

 

정답 = CMAScrip

• slice()메소드의 시작 인덱스는 이해하고 있었으나 두 번째 매개변수가 무엇을 의미했는지 기억이 희미해 코드 분석에 어려움을 느꼈다.
• 결론적으로 두 번째 매개변수는 종료 인덱스값을 나타내는 것이였으며 -1인덱스는 곧 가장 마지막 인덱스를 뺀다는 소리와 같은 의미를 가지고 있다.
• -1이면 마지막인덱스를, -3이면 마지막 인덱스를 기준으로 앞 3번째 요소를 뜻한다.
• slice()메소드를 통해 도출되는 결과 문자열은 기존 문자열과는 별개의 새로운 문자열값이기 때문에 별도의 변수를 선언해 저장해야 한다.

 

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

const result = true + true;

 

정답 = 2

• true에 true를 더하면 당연히 true아닌가 하고 생각을 했으나 true는 1로 간주되며 false는 0으로 간주된다는 사실을 기억해냈다.
• 위 사실에 따라 boolean자료형이더라도 number형으로 형변환되어 더해지며 2의 값이 반환된다.

 

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

const str = 'JavaScript';
const substr = str.substr(1, 4);
const substring = str.substring(1, 4);
const result = substr.indexOf(substring);

 

내가 생각한 값 = 4 => 정답 = 0

• substr()과 substring()메소드에 대한 이해가 부족해 잘못된 생각을 통해 오답을 도출했다.
• 위 오답을 통해 아직도 문자열 함수에 대한 이해가 부족하다는 생각을 했다.
• substr()메소드는 두 매개변수에 해당하는 인덱스 사이에 존재하는 요소를 반환하는 역할을 한다. 이에 따라 위 코드에서는 'avaS'를 반환하게 된다.
• substring()메소드는 위와는 달리 첫 번째 매개변수 인덱스번호에서 시작해 두 번째 매개변수의 크기 - 1만큼을 뽑아 반환하는 역할을 한다. 이에 따라 위 코드에서는 'ava'를 반환하게 된다.
• 'avaS'문자열에서 'ava'의 인덱스값을 묻게 되면 0이 결과로 나오게 되는 것이다.

 

 

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

const a = [1, 2, 3, 4, 5];
const result = a.push(6) - a.pop();

 

정답 = 0

• push()메소드에서 잠시 혼동이 있었지만 그렇게까지 많이 어려운 코드는 아니었다.
• a.push(6)을 하며 6의 값을 지정하는 동시에 배열 끝에 6을 넣어주며 a.pop()을 통해 배열 마지막 인덱스 요소를 뽑아내는 과정을 통해 다시 6을 뽑아내 6 - 6 = 0의 값이 나오게 된다.

 

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

const User = function (name) {
    this.name = name;
}

const user1 = new User('Brendon');
const user2 = new User('Brendon');
const result = user1 === user2;

 

정답 = false

• 객체에 대한 이해를 묻는 문제다.
• 자바에서의 객체와 같은 개념이며 엄연히 user1과 user2는 별도의 객체로 취급해야 하기 때문에 false가 된다.

 

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

const check = (value) => value === 2;
const result = [1, 2, 3].every(check);

 

정답 = false

• every()메소드에 대한 지식이 없었다. 추측을 통해 위 check변수의 값이 2이니 아래 result배열의 1, 2, 3요소가 check에 전부 있는지 물어 false가 반환된다 생각을 진행했다.
• every()메소드는 특정 배열이 판별하고자 하는 함수를 전부 통과하는지 여부를 boolean형으로 반환하는 기능을 가지고 있다.
• 위 코드에서의 판별 함수는 값이 2라는 조건을 가지고 있으며 아래 result의 배열은 1번 인덱스만 이 조건을 만족하고 나머지 요소들은 만족하지 못하기 때문에 false를 반환하게 된다.

 

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

const list = [1, 2, 3];
list.concat(4, 5, 6);
const result = list;

 

내가 생각한 값 = [1,2, 3, 4, 5, 6] => 정답 = [1, 2, 3]

• concat()메소드 등과 같은 메소드들은 별도로 저장하지 않으면 반영되지 않는다는 것을 잠시 잊고 있었다.
• list에 요소를 넣었더라도 이미 한 번 배열에 저장되었던 값은 업데이트가 되지 않고 새로운 변수에 선언해주어야 변경이 반영된다.
• 만일 내가 생각했던 값이 나오도록 만들고자 한다면 const는 값의 변경을 허용하지 않기 때문에 list를 let이나 var을 통해 선언해준 후 list = list.concat(4, 5, 6);을 통해 list에 새 요소를 집어넣도록 만들어야 한다.

 

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

const value = '2009';
const result = Number.isFinite(value);

 

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

• isFinite()메소드를 알지 못해 오류가 발생했다. 느낌상 infinite와 다른 finite니 유한한 수를 찾는 것인가 했으며 2009는 무한이 아니니 true라 생각했지만 아니었다.
• 검색 결과 Number.isFinite()메소드는 형 변환 없이 있는 그대로 값을 불러와 유한한 수인지를 판단하는 메소드이며 무한하거나 숫자가 아니면 false를 반환하게 된다.
• 만일 처음에 생각한 것처럼 결과가 나오도록 만들고자 한다면 Number없이 isFinite()메소드만 호출하면 된다. 이렇게 하면 필요시 숫자로 자동 형변환을 하게 되어 true가 반환된다.

 

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

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

 

내가 생각한 값 = false => 결과값 = true

• reverse()메소드도 위의 concat()메소드 등과 같이 원래의 변수에 영향을 미치지 못한다고 생각해 오류가 발생했다.
• reverse()메소드는 원래의 변수값도 함께 반대로 뒤집어주는 역할을 하는데 이 때 const는 constant한 값이라 데이터에 변조가 있어서는 안된다 생각해 혼동이 발생했다.
• 여러 군데를 뒤져본 결과 const는 변수의 재할당이나 재선언이 불가능한 것이 특징이라는 것을 알 수 있었다. 이에 따라 reverse()메소드로 변조되는 것은 재할당이나 재선언이 아니라는 것을 알 수 있었다.
• 참고한 사이트 : https://hyunseob.github.io/2016/11/21/misunderstanding-about-const/

 

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

const list = [1, 4, 9];
const result = 2 in list;

 

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

• 2 in list를 list내에 요소 중 값이 2인 요소가 있는지를 묻는 것이라 판단했고 이에 따라 false가 반환될 것이라 예측했다.
• in 연산자는 기본적으로 속성 in 객체의 형식으로 구성되며 해당 객체 내에 요구한 속성이 있는지에 대한 결과를 반환하는 역할을 한다.
• 위 코드에서는 2번 인덱스가 존재하는지를 묻는 것이었으며 true를 반환하는 것이 정상이었다.

 

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

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

 

정답 = true

• includes()메소드 내에 들어간 값이 해당 배열에 존재하는지를 묻는 것이라 판단했다. 이는 실제로도 맞는 생각이었다.
• 예측에 무리가 없던 문제였으나 추후에 다시 기억해내기 위해 기록해두었다.

 

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

let value = 2009;
if (value > 1) {
    let value = 262;
}
const result = value;

 

내가 생각한 답 = 262 => 정답 = 2009

• 스코프에 대한 이해를 묻는 문제였다.
• 생각하기로 value변수가 1보다 높기 때문에 262로 변경될 것이라 생각했지만 let은 블록 단위 스코프를 가지고 있기 때문에 if조건식의 중괄호가 끝나면 값이었던 262는 생명을 다하고 소멸한다는 사실을 알지 못했다.

 

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

const value = 2009;
const result = eval('value + value');

 

정답 = 4018

• eval()메소드에 대한 지식이 없어 헷갈렸던 문제였다.
• 처음에는 20092009가 아닐까 혹은 value + value그대로 나오거나 2009 + 2009가 나오지 않을까 생각했다.
• 알아보니 eval()메소드는 문자열을 코드로서 인식하도록 만들어주는 역할을 한다는 것을 알게 되었다.
• 해당 메소드를 사용한 결과 문자열 내에서도 value변수를 불러오도록 만들었으며 두 변수를 더한 값이 반환되도록 해주었다.

 

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

const check = (value) => value === 2;
const result = [1, 2, 3].some(value);

 

정답 = true

• 처음 이 문제를 봤을때는 무엇을 의미하는지 정확하게 알지 못했지만 위의 every()메소드를 알게된 후 다시 보니 정확하게 어떤 용도인지 유추할 수 있게 되었다.
• 해당 메소드는 기준 객체내 요소 중 판별 함수의 조건에 만족하는 요소가 한 개라도 있으면 true를 반환하도록 만드는 역할을 한다.

 

* 배열을 선언하고 초기화하는 유용한 방법

• [...Array(숫자).keys()]
  
  위 코드는 숫자 - 1길이의 배열을 생성 후 [0 ~ 숫자 - 1]의 순으로 요소를 넣는다.
• [...Array(숫자).keys()].map((value) => value + 1)]
  
  위 코드는 [1 ~ 숫자]순으로 요소를 넣게 된다.
• [...Array(숫자).keys()].map((value) => value * 2)]
  
  [0, 2, 4, ...]