3주차 과제 코드 리뷰

Function 표기

• 익명 함수 사용시 띄어쓰기 주의

// bad
const f = function(){};
const g = function (){};
const h = function() {};

// good
const x = function () {};
const y = function a() {};

참고 : Airbnb Style Guide - Functions

Var, Let, Const의 차이

Var

• var의 scope

  • function 밖에서 선언 : 전 지역에서 이용 가능
  • function 안에서 선언: 선언한 함수 내에서만 이용 가능

• var로 선언한 변수는 같은 scope 내에서 재선언, 재할당 가능함

// 재선언
var greeting = "hey hi";
var greeting = "say Hello instead";

// 재할당
var greeting = "hey hi";
greeting = "say Hello instead";

• var로 선언한 변수는 그 스코프의 최상단으로 hoisting되고, undefined값으로 초기화됨

console.log("greeting");
var greeting = "say hello";

// 위 코드 작동 순서
var greeting;
console.log("greeting"); // undefined
var greeting = "say hello";

let

• let의 scope
  • block scope : 선언한 블록 {} 내에서만 이용 가능

let greeting = "say hi";
let times = 4;

if (time > 3) {
  let hello = "say hello instead";
  console.log(hello); // "say hello instead"
}

console.log(hello); // Error : hello is not defined

• let으로 선언한 변수는 같은 scope 내에서 재할당 가능하지만, 재선언은 불가능함

// 재할당 가능
let greeting = "hey hi";
greeting = "say Hello instead";

// 재선언 불가능
let greeting = "hey hi";
let greeting = "say Hello instead"; // Error: Identifier 'greeting' has already been declared

• 다른 scope에서 같은 변수 선언 가능함
  • 다른 scope를 가지고 있으므로 서로 다른 변수 취급함

let greeting = "say hi";

if (true) {
  let greeting = "say hello instead";
  console.log(hello); // "say hello instead"
}

console.log(hello); // "say hi"

• let으로 선언한 변수는 그 스코프의 최상단으로 hoisting되지만, 변수가 초기화되지 않음
  • 그래서 선언 전에 변수를 사용하면 Reference Error가 뜸
  • 따라서 let으로 변수를 선언할 때, 꼭 초기화해야함

const

• const의 scope

  • block scope : 선언한 블록 {} 내에서만 이용 가능

• const로 선언한 변수는 같은 scope 내에서 재할당, 재선언 모두 불가능함

// 재할당 불가능
const greeting = "hey hi";
greeting = "say Hello instead"; // Error: Assignment to constant variable

// 재선언 불가능
const greeting = "hey hi";
const greeting = "say Hello instead"; // Error: Identifier 'greeting' has already been declared

• const로 선언한 변수는 재할당 불가능하지만, 변수의 속성은 재할당 가능함

const greeting = {
  message: "say hi",
  time: 4
}

greeting = {
  message: "hello",
  number: "five"
} // Error: Assignment to constant variable

greeting.message = "say hello instead"; // 가능함

• const으로 선언한 변수는 그 스코프의 최상단으로 hoisting되지만, 변수가 초기화되지 않음
  • 그래서 선언 전에 변수를 사용하면 Reference Error가 뜸
  • 따라서 const으로 변수를 선언할 때, 꼭 초기화해야함

참고 : Var, Let and Const

반복 사용하는 문자열의 상수 처리

• 자주 사용하는 문자열은 반복 사용에 따른 실수를 방지하기 위해 상수로 처리하여 재사용함

// 내 코드
$startButton.classList.add("invisible");
$startButton.classList.remove("invisible");

// 수정한 코드
const IVISIBLE = "invisible";
$startButton.classList.add(IVISIBLE);
$startButton.classList.remove(IVISIBLE);

Early Return

• early return : if문 안에서 return함으로서 뒤의 코드로 진입하지 않아 else문을 사용할 필요 없음

• if-else 문 대신 early return을 사용하기

  • 이유 : if-else문이 너무 많으면 가독성이 떨어지고, 조건에 대해 명시적이지 않음
  • 장점 : 코드의 depth가 줄어들고 뒷 조건을 생각하지 않아도 되므로 가독성이 올라감

// 내 코드
function nextCard() {
  if (cardNumber < totalQuizNumber) {
    const card = data[cardNumber];
    showCard(card);
    markCard(card);
    cardNumber++;
  } else {
    $questionBoard.textContent = "";
    $codeBoard.textContent = "";
    $choiceBoard.textContent = "";
    $resultBoard.textContent = "수고하셨습니다!";
    $restartButton.classList.remove("invisible");
    $nextButton.classList.add("invisible");
  }
  ...
}
 // 수정한 코드
function nextCard() {
  if (cardNumber < totalQuizNumber) {
    const card = data[cardNumber];
    showCard(card);
    markCard(card);
    cardNumber++;
    return;
  }
  $questionBoard.textContent = "";
  $codeBoard.textContent = "";
  $choiceBoard.textContent = "";
  $resultBoard.textContent = "수고하셨습니다!";
  $restartButton.classList.remove("invisible");
  $nextButton.classList.add("invisible");
  ...
}

파일 끝에 빈 줄(/n) 넣기

• 파일 끝에 빈 줄(/n : newline character)을 넣어야함

  • 이유 : IEEE가 책정한 POSIX에서 줄(line)을 그렇게 정의했음

    line : A sequence of zero or more non-newline characters plus a terminating newline character

• C 컴파일러인 gcc는 POSIX를 근거로 동작했는데, 소스코드를 한 줄씩 읽으므로 파일 끝에 빈 줄이 없으면 문제가 발생함

참고 : No newline at a end of file

Img tag 사용시 주의할 점

• self closing 해줘야함

• 사용자의 접근성을 위해 alt 속성을 항상 붙이는 것을 권장함

  • 네트워크 오류, 컨텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 alt 속성의 값은 보임

// 내 코드
<button type="button" class="restart-button invisible"><img src="./images/restart.png"></button>
<button type="button" class="next-button invisible"><img src="./images/next.png"></button>

// 수정한 코드
<button type="button" class="restart-button invisible"><img src="./images/restart.png" alt="restartButton" /></button>
<button type="button" class="next-button invisible"><img src="./images/next.png" alt="nextButton" /></button>