23.04.03. 혼자 공부하는 자바스크립트 확인문제 풀이 기록[0]

책을 받았고, 강의와 함께 책을 보면서 스스로 공부하는 시간을 가지며 책에 있는 문제 풀이 기록을 과제로 제출해야 한다.

책을 보며 공부하는게 익숙하진 않지만 프로젝트 단위로 공부하는 것과 병행하는 것은 유익할 듯.

 

챕터 2 자료와 변수

1. 기본자료형

(1번 문제) 연산자의 대상이 되는 자료형에 대한 문제

 

&&

원하는 답은 boolean이겠지만, null, undefined, string, number, Object, Array 등 자료형 모두 다 피연산자로 가능하다.

 

아래처럼 온갖 조합을 해보면 알 수 있겠지만 문서를 보면 truthy(참으로 간주하는)와 falsy(거짓으로 간주하는)를 비교해서 규칙을 갖고 반환하는 연산자라고 이해하면 된다.

즉, 아래 문서에서 따온 정의를 읽어보면 왼쪽 값에서 오른쪽 값으로 값을 평가해서,

먼저 나온 falsy값을 반환하고, 둘 다 truthy면 마지막 것, 즉 오른쪽 값을 반환한다는 것. 합리적인 계산방법인 듯.

Logical AND (&&) evaluates operands from left to right, 

returning immediately with the value of the first falsy operand it encounters; 

if all values are truthy, the value of the last operand is returned.

 

 

console.log({} && "asdf") // "asdf"
console.log("asdf" && {}) // {}
console.log([1,2,3,4] && "string") // "string"
console.log([0] && "") // ""
console.log([] && "") // ""
console.log(0 && "asdf") // 0
console.log(null && "asdf") // null
console.log(undefined && "asdf") // undefined
console.log(NaN && "asdf") // NaN
console.log([0] && "asdf") // "asdf"
console.log({"false": false} && "asdf") // "asdf"
console.log("false" && "asdf") // "asdf"
console.log(["false"] && "asdf") // "asdf"
console.log({"true": true} && "false") // "false"
console.log({"true": true} && false) // false

||

이것도 마찬가지. 둘 중 하나만 truthy라면, 왼쪽, 오른쪽 순으로 읽고 빨리 읽힌 truthy 값을 반환한다.

console.log({} || "asdf") // {}
console.log("asdf" || {}) // "asdf"
console.log([1,2,3,4] || "string") // [1,2,3,4]
console.log([0] || "") // [ 0 ]
console.log([] || "") // []
console.log(0 || "asdf") // "asdf"
console.log(null || "asdf") // "asdf"
console.log(undefined || "asdf") // "asdf"
console.log(NaN || "asdf") // "asdf"
console.log([0] || "asdf") // [0]
console.log({"false": false} || "asdf") // {"false": false}
console.log("false" || "asdf") // "false"
console.log(["false"] || "asdf") // ["false"]
console.log({"true": true} || "false") // {"true": true}
console.log({"true": true} || false) // {"true": true}

그럼 truthy와 falsy는? truthy는 falsy로 정의되지 않은 모든 값이다. 그럼 falsy만 알면 된다.

아래는 mdn 문서에서,

Value	Type	Description
null	Null
undefined	Undefined
false	Boolean
NaN	Number
0, -0	Number
0n	BigInt	BigInt의 0, 0x0n도 falsy
"", '', ``	String	빈 문자열은 다 falsy
document.all	Object	자바스크립트에서 객체 중 유일하게 falsy로 분류된다.

 

-

*

이 연산자들도 모든 자료형이 다 피 연산자로 가능하다. 단지 숫자로 변환이 안되는 값에서/값을 빼면 NaN을 뱉어낼 뿐. 이라고 생각했으나, BigInt와 Number는 서로 빼거나 곱하면 TypeError가 난다. 고 한다.

 

 

2. 상수와 변수

(3번 문제) 다음 코드의 실행 결과는?

const num = 10

console.log(++num)
console.log(num++)
console.log(++num)
console.log(num--)

답: TypeError 

const로 정의한 변수는 값을 변경할 수 없다.

 

3. 자료형 변환

(5번 문제) 환율을 기반으로 숫자를 입력받아 달러에서 원화로 변환하는 코드 작성

let usdToKrw = 1500
process.stdout.write('USD: ')
process.stdin.on('data', function(dollar){
  console.log(`KRW: ${dollar*usdToKrw}`)
  process.exit()
})

node에서 프롬프트에서 출력, 입력값 받기 위해 process.stdout.write, process.stdin.on을 사용해야 했다.

 

챕터 3 조건문

1. if 조건문

(5번 문제) 사용자에게 숫자를 입력바당 홀수와 짝수를 구분하는 코드 작성

let usdToKrw = 1500
process.stdout.write('number(only natural number): ')
process.stdin.on('data', function(numInput){
  let num = parseInt(numInput)
  if (num <= 0) {
    console.log(`${num} is not a natural number`)
  } else if (num % 0) {
    console.log(`${num}: 짝수`)
  } else {
    console.log(`${num}: 홀수`)
  }
  process.exit()
})

입력 후 엔터를 쳐야 값을 입력할 수 있는데, parseInt를 하지 않으면 출력이... 가령 0을 입력하고 엔터를 쳤다면,

0

  is not a natural number

로 표시된다. 그래서 parseInt로 \n을 없애줬다.

 

2. switch 조건문과 짧은 조건문

(위 문제 누적) 위 문제를 switch로 바꿔볼 것

process.stdout.write('number(only natural number): ')
process.stdin.on('data', function(numInput){
  let num = parseInt(numInput)
  switch (true) {
    case num <= 0:
      console.log("The input is not natural number.")
      break
    case num % 2 === 0:
      console.log(`${num}: 짝수`)
      break
    case num % 2 === 1:
      console.log(`${num}: 홀수`)
      break
    }
  process.exit()
})

챕터 4 반복문

1. 배열

(2번 문제) 다음 코드의 실행 결과는?

const array = [1, 2, 3, 4]
console.log(array.length)  // 4
console.log(array.push(5)) // 5

length는 4, push는 파라미터를 배열 끝에 추가하고, 배열의 length를 반환하기때문에 5.

 

2. 반복문

(4번 문제) *로 다이아몬드 모양 만들기

let output = ''
const size = 5

for (let i = 0; i < size; i++) {
  for (let k = size-i; k > 0; k--){
    output += " "
  }
  for (let j = 0; j < i; j++) {
    output += "*"
  }
  for (let l = 1; l < i; l++){
    output += "*"
  }
  output += " \n"  
}
for (let i = size; i > 0; i--) {
  for (let k = size-i; k > 0; k--){
    output += " "
  }
  for (let j = 0; j < i; j++) {
    output += "*"
  }
  for (let l = 1; l < i; l++){
    output += "*"
  }
  output += " \n"  
}
console.log(output)

* 로 온갖모양 만드는 코딩 문제를 보기만 봤지 실제로 풀어본 건 처음이다.

답안을 보면 2의 배수 - 1 로 더 간결하게 작성한 것 대비.. for문이 한번 더 들어갔다.

 

챕터 5 함수

1. 함수의 기본 형태

(2번 문제) 매개변수 여러개 또는 array를 입력받아 최대값을 찾는 함수 작성

let max = function (...inputs) {
  if (Array.isArray(inputs[0])){
    return Math.max(...inputs[0])
  } else {
    return Math.max(...inputs)
  }
  
}
console.log(`max(배열): ${max([1,2,3,4])}`)
console.log(`max(숫자,...): ${max(1,2,3,4)}`)

답안은 for문으로 비교하는 방식인데 검색해서 Math.max함수를 썼다. for문 고민해볼걸.

 

2. 함수 고급

(1번 문제) filter함수를 써서, 홀수 && 100이하 && 5로 나눈 나머지가 0인 수만 추출

let nums
nums = [273, 25, 75, 52, 103, 32, 57, 24, 76]
nums = nums.filter(function (num) {
  if (num % 2 === 1 && num < 100 && num % 5 === 0) {
    return num
  }
})
console.log(nums) // [25, 75]

nums = [273, 25, 75, 52, 103, 32, 57, 24, 76]
nums = nums.filter((num) => num % 2 === 1 && num < 100 && num % 5 === 0)
console.log(nums) // [25, 75]

답안은 filter를 3번 썼는데, && 조건으로 한줄로도 가능하다.