JS 100제 스터디용 문제/해설 01~10

공부만이 살길이다.·2024년 1월 30일
JS100JavaScriptjsstudy
1

이 페이지는 개인 공부를 목적으로 만든 것입니다. 원본 문제 및 해설 출처를 하단에 밝혔고 해설에 대해서는 chatGPT 및 개인지식으로 추가작성하였음을 밝힙니다. 문제가 될시에는 이 게시물을 삭제하도록 하겠습니다.

문제 01 : 배열의 삭제

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

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

문제 01 해설 
var nums = [100, 200, 300, 400, 500];
	nums.pop();
	nums.pop();
  
console.log(nums)

.push(a) => 오른쪽 맨 끝에 'a' 추가
.unshift(a) => 왼쪽 맨 끝에 'a' 추가
.pop() => 오른쪽 맨 끝에 item 삭제
.shift() => 왼쪽 맨 끝에 item 삭제




문제 02: 배열의 내장함수

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

데이터

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

출력

[200, 100, 10000, 300]

문제 02 해설
```js var arr = [200, 100, 300]; arr.splice(2, 0, 10000); console.log(arr); ```
.splice(index, deleteCount, items)

splice() 메서드는 배열의 내용을 변경하는데 사용되는 JavaScript 배열 메서드 중 하나. splice() 메서드는 세 개의 매개변수를 받는다.

index (필수): 배열에서 변경을 시작할 인덱스
deleteCount (옵션): 제거할 요소의 수. 이 매개변수가 0이면 아무 요소도 제거하지 않는다.
items (옵션): 배열에 추가할 요소.
.splice(2, 1, 'A', 'B') 이런식으로 복수의 요소 추가도 가능.




문제 03: 변수의 타입

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

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

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


문제 03 해설
``` 4) object

정답은 '4번'입니다. undefined, string, number 는 모두
기본 자료형(primitive type) 입니다.


JavaScript에서 배열(Array)은 '객체(object)'의 일종. 
  따라서 typeof 연산자를 사용하여 배열의 데이터 타입을 확인하면 'object'가 나온다.

typeof 연산자는 변수 또는 표현식의 데이터 타입을 반환하지만 JavaScript에서 배열은 객체의 특별한 형태로 취급되어, 
  typeof로 배열을 확인하면 'object'가 반환.
  
  그러나 배열은 기본적으로 배열에만 적용되는 여러 메서드와 속성을 갖고 있다. 배열은 요소에 접근하고 수정할 수 있는 인덱스를 사용하며, 배열에 특화된 메서드(예: push(), pop(), forEach() 등)를 사용할 수 있다.

####   push
  ```js
var arr = [100, 200, 300];
arr.push(400)
console.log(arr);

  결과
[100, 200, 300, 400]
  우측 끝에 요소 추가하기

pop()

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

결과
[100, 200]
우측 끝에 요소 제거하기

forEach

let arr = [1, 2, 3, 4, 5];
arr.forEach(element => console.log(element));

  결과
1
2
3
4
5
  
배열 메서드로써 각 요소에 주어진 함수를 실행할 수 있다. 
반복문을 작성하지 않고도 배열의 각 요소에 대해 
  간편하게 작업을 수행할 수 있다는 장점이 있다. 
화살표 함수를 사용하여 표현하는 것도 일반적이다.
  
  예제
  let numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(element) {
  let squared = element * element;
  console.log(`The square of ${element} is ${squared}`);
});
  각각 자신의 요소를 제곱하여 값을 출력해낼수도 있다.



문제 04: 변수의 타입2

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

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

문제 04 해설 
정답은 2번
2)  입력 : a = '2.22',   출력 : boolean

number 가 맞는 출력값입니다. 
boolean 에 해당하는 값은 true 와 false 두 가지.



문제 05:for문 계산

다음 코드의 출력 값으로 알맞은 것은?
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

문제 05 해설 
4)  16

정답은 '4번'. i 값이 1부터 시작하고 
한번 순환할 때마다 2씩 증가하기 때문에 for 문은 총 두 번 순환.
  
a(10) + i(1(첫 번째 순환) + 3(두 번째 순환)) + b(2) = 16



문제 06:False

다음은 자바스크립트 문법 중에서 False로 취급하는 것들 입니다.
앗, False로 취급하지 않는 것이 하나 있네요! True를 찾아주세요.

1) NaN
2) 1
3) ""
4) 0
5) undefined


문제 06 해설 
2)  1

정답은 '2번'. 
JavaScript 에서는 
null, undefined, 0, 빈 문자열, NaN, false 를 제외하고는 
모두 참인 값으로 평가.



문제 07:변수명

다음 중 변수명으로 사용할 수 없는 것 2개를 고르시오.

1) age
2) Age
3) let
4) _age
5) 1age


문제 07 해설 
3)  let
5)  1age

정답은 '3번', '5번'. 
JavaScript 식별자는 문자, 밑줄(_) 혹은 달러 기호($)로 시작해야하며 
let 은 이미 JavaScript 문법에 존재하는 예약어라 사용불가.



문제 08 : 객체의 키 이름 중복

자바스크립트 객체를 다음과 같이 만들었다.
출력값을 입력하시오. (출력값은 공백을 넣지 않습니다. )

var d = {
    'height':180,
    'weight':78,
    'weight':84,
    'temperature':36,
    'eyesight':1
};

console.log(d['weight']);

문제 08 해설 
정답은 84. 

객체를 생성할 때 중복된 속성 이름을 가진 경우, 
나중에 나오는 값이 이전의 값을 덮어씌우게 된다. 
따라서 'weight':78 다음에 'weight':84가 오므로 
'weight' 속성은 최종적으로 84가 된다.

var d = {
    'height': 180,
    'weights': [78, 84],
    'temperature': 36,
    'eyesight': 1
};

console.log(d['weights']); // 출력 결과: [78, 84]
console.log(d['weights'][0]); // 출력 결과: 78
  
동일한 속성 이름을 사용하여 복수의 값을 가지고 싶은 경우 
배열을 사용하는 것도 가능하다.



문제 09: concat을 활용한 출력 방법

데이터

var year = '2019';
var month = '04';
var day = '26';
var hour = '11';
var minute = '34';
var second = '27';

var result = //빈칸을 채워주세요

console.log(result);

출력

2019/04/26 11:34:27

문제 09 해설 
concat() 메서드는 매개변수로 전달된 문자열을 
메서드를 호출한 문자열에 붙여 새로운 문자열로 반환.
var result = year.concat('/', month, '/', day, ' ', hour, ':', minute, ':', second);

var result = year + '/' + month + '/' + day + ' ' + hour + '/' + minute + '/' + second
  
이런 코드도 생각을 해봤지만 concat 메서드 사용에 비해 '많은 문자열을 연결할 때, 문자열을 결합할 때마다 새로운 문자열을 생성하기 때문에 성능에 약간의 영향을 미칠 수 있다'는 chatGPT의 이야기를 들을 수 있었다.

concat 

concat 메서드는 문자열을 이어붙이는 것뿐만 아니라, 배열의 요소를 이어붙이거나 
여러 인자를 이어붙이는 등 다양한 상황에서 사용될 수 있다. 
주로 문자열 이어붙이기에 많이 사용되지만, 
다른 데이터 타입이나 다양한 상황에서도 활용이 가능.
  

문자열과 다른 데이터 타입 이어붙이기:
var str = 'Hello';
var num = 42;
var bool = true;
var result = str.concat(' ', num, ' ', bool);
console.log(result); // 출력 결과: 'Hello 42 true'



문제 10 : 별 찍기

크리스마스 날, 은비는 친구들과 함께 파티를 하기로 했습니다. 그런데, 크리스마스 트리를 사는 것을 깜빡하고 말았습니다. 온 가게를 돌아다녀 봤지만 크리스마스 트리는 모두 품절이었습니다.
하는 수 없이 은비는 프로그래밍으로 트리를 만들기로 합니다.

은비를 위해 프로그램을 작성해 주세요.

입력
5

출력
    *
   ***
  *****
 *******
*********

문제 10 해설 
const n = prompt('숫자를 입력하세요.');
let tree = '';

for(let i=1; i<=n; i++){
  let star = '';
  for(let j=1; j<=n-i; j++){
    star += ' ';
  }
  for(let k=1; k<=2*i-1; k++){
    star += '*';
  }
  tree += star + '\n';
}

console.log(tree);

바깥쪽 루프 (for (let i = 1; i <= n; i++))는 삼각형의 각 행을 나타낸다.

첫 번째 내부 루프 (for (let j = 1; j <= n - i; j++))는 별 앞에 공백을 추가하는 역할. i가 증가함에 따라 공백의 수가 감소하여 직각 삼각형 패턴이 형성.

두 번째 내부 루프 (for (let k = 1; k <= 2 * i - 1; k++))는 현재 행의 삼각형을 형성하기 위해 별을 추가. i가 증가함에 따라 별의 수가 증가.

tree 변수는 삼각형의 각 행을 누적하는 데 사용.

마지막으로 console.log(tree) 문은 생성된 삼각형 패턴을 콘솔에 출력.

만약 이 코드를 n = 5로 실행하면, 다음과 같이 별 모양의 직각 삼각형이 콘솔에 출력:




원본 문제 및 해설 출처: https://obsidian-scene-3ac.notion.site/JS-100-94d97d294dd14c9b911a02c840fa9f2d
해설 도움 출처: chatGPT

profile
공부만이 살길이다.
코린이
이전 포스트

flex02 justify-content, flex-wrap, align-item

다음 포스트

class 기본 이해하기

0개의 댓글