[Day01] 코딩 뇌를 깨우는 JS 기초 문제 풀이 (ft. 배열, 타입, 반복문)

[Day01] 코딩 뇌를 깨우는 JS 기초 문제 풀이  (ft. 배열, 타입, 반복문)

 

개발 업무를 하다 보면 복잡한 로직에만 신경 쓰느라, 정작 아주 기초적인 문법이나 개념들을 깜빡할 때가 종종 있습니다.
Notion을 정리하다가 예전에 어디에선가 문제풀이를 메모해두었던 것을 발견하게 되었습니다.

그래서 이 참에 자바스크립트(JS)의 기초적인 개념들을 다시 한번 다져보고, 혹시라도 놓치고 있던 부분은 없는지 메모를 해두기로 합니다. 거창한 프로젝트도 좋지만, 하루에 5문제 정도 가볍게 풀면서 코딩 뇌를 말랑말랑하게 유지하는 것도 좋은 전략인 것 같습니다. 

AI 시대라고 매일 AI만 사용하지 말고, 기본에 더욱 충실하고 기초를 단단하게 다질 수 있도록, 매일 딱딱하게 굳어 가는 뇌를 일깨우기 위해서라도 가끔이라도 조금씩 두뇌 풀가동을 해보는 게 어떨까 싶습니다.

오늘은 배열과 변수 타입, 그리고 반복문에 대한 기초 문제 5가지를 풀어보겠습니다. 여러분들도 저와 함께 정답을 맞춰보시죠!!

 

 

문제 1 : 배열의 삭제

Q. 다음 배열에서 400, 500을 삭제하는 code를 입력하세요.

var nums = [100, 200, 300, 400, 500];

 

 

[풀이] 

아주 간단하게, pop() 함수를 두 번 사용해보기로 합니다. 배열의 가장 마지막에 있는 원소를 뽑아 제거해줍니다.

var nums = [100, 200, 300, 400, 500];
nums.pop();
nums.pop();

console.log(nums);

 

 

물론 끝에 있는 두 개를 지우는 거니까 nums.pop()을 두 번 써도 되겠지만, 있어 보이게 splice를 써줍니다. 엔터 빡!

nums 배열에서 인덱스 3번(400)부터 2개의 요소를 제거하면 되겠죠?

var nums = [100, 200, 300, 400, 500];

// 인덱스 3부터 2개의 요소를 삭제
nums.splice(3, 2);

console.log(nums);

 

 

문제 2 : 배열의 내장함수

Q. <pass> 부분에 배열 내장함수를 이용하여 코드를 입력하고 다음과 같이 출력되게 하세요.

데이터
var arr = [200, 100, 300];
//pass
console.log(arr);

출력
[200, 100, 10000, 300]

 

 

[풀이] 배열의 중간에 새로운 값을 '끼워 넣는' 문제입니다. 이번에도 역시 만능 해결사 splice가 등장할 차례입니다. 인덱스 2번 자리에, 아무것도 삭제하지 않고(0), 10000을 넣으면 됩니다.

var arr = [200, 100, 300];
arr.splice(2, 0, 10000); 
// splice() 메서드는 배열의 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.
console.log(arr);

 

 

문제 3 : 변수의 타입

Q. 다음 출력 값으로 올바른 것은?

var arr = [100, 200, 300];
console.log(typeof(arr));


1) undefined
2) string
3) number
4) object

 

 

[풀이 및 정답] 

자바스크립트에서 배열(Array)은 사실 특수한 형태의 **객체(Object)**입니다. 대괄호 []로 감싸져 있어서 뭔가 특별한 타입이 있을 것 같지만, typeof로 찍어보면 냉정하게 object라고 알려줍니다.
정답: 4) object

 

[여기서 잠깐!] 배열인지 확실하게 확인하고 싶다면 typeof 대신 Array.isArray(arr)를 사용하는 것이 정신건강에 좋습니다.

 

 

문제 4 : 변수의 타입 2

Q. 다음 변수 a를 typeof(a)로 넣었을 때 출력될 값과의 연결이 알맞지 않은 것은?

1)  입력 : a =1,   출력 : number
2)  입력 : a = 2.22,   출력 : boolean
3)  입력 : a = 'p',   출력 : string
4)  입력 : a = [1, 2, 3],   출력 : object

 

[풀이] 하나씩 살펴봅시다.
• 1번: 정수는 number. 맞습니다.
• 2번: 소수점(실수)도 자바스크립트에서는 number입니다. boolean은 true나 false여야겠죠? 딱 걸렸습니다.
• 3번: 문자 하나도 string. 맞습니다.
• 4번: 방금 위에서 풀었죠? 배열은 object. 맞습니다.

var a = 2.22;
console.log(typeof(a)); // number 출력

정답: 2) 입력 : a = 2.22, 출력 : boolean (올바른 출력은 number 입니다.)

 

자바스크립트에서는 정수도 number, 소수도 number, boolean은 오직 true 또는 false입니다.

 

 

문제 5 : for문 계산

Q. 다음 코드의 출력 값으로 알맞은 것은?

var a = 10;
var b = 2;

for(var i=1; i<5; i+=2){
    a += i;
}

console.log(a+b);


1)  10
2)  12
3)  14
4)  16

 

[풀이] 반복문이 어떻게 돌아가는지 머릿속으로(혹은 손으로) 디버깅을 해봅시다.

 

1. 초기값: a = 10, b = 2
2. 첫 번째 루프: i는 1. a에 1을 더합니다. (a는 11). i는 2 증가해서 3이 됩니다.
3. 두 번째 루프: i는 3. (5보다 작으니 실행). a에 3을 더합니다. (a는 14). i는 2 증가해서 5가 됩니다.
4. 세 번째 루프 시도: i는 5. 조건 i < 5를 만족하지 못합니다. 탈출!

결과적으로 a는 14가 되었습니다. 마지막 출력은 console.log(a+b) 이므로, 14 + 2 = 16이 되겠군요.

 

정답: 4) 16

 

마치며
이렇게 자바스크립트의 기초 문제 5가지를 가볍게 풀어보았습니다. 일단 쫌 쉽죠? 아니면 "어? 이게 뭐였더라?" 하고 멈칫했거나 가물가물 했나요? 어떤 결과든 상관없습니다. 중요한 건 이렇게 직접 코드를 보고 머리를 굴려보는 과정 그 자체니까요.

하루에 몇 문제씩, 심심풀이 부담 없는 양으로 꾸준히 기초 체력을 길러두면 나중에 복잡한 코드를 만났을 때 분명 빛을 발할 것이라 생각합니다. 여러분들도 저와 함께 매일매일 조금씩 성장해 나가시기를 바라겠습니다.

 

오늘도 즐거운 코딩(생활), 즐코딩.

KINcoding.