[JavaScript]console.log vs. alert / let vs. var

목차

 

console.log() vs. alert()

 

두 함수는 모두 정보를 출력하는 데 사용되는 함수이다. 하지만 몇 가지 차이점이 존재하는데,

 

크게 세 가지로 나누어서 정리하자.

 

Output Location

 

가장 크고 분명한 사실은 두 함수의 출력 위치가 다르다는 사실이다.

 

• console.log()
  해당 함수는 메시지를 터미널이나 브라우저의 콘솔에 출력한다. 여기서 콘솔이란 예를 들자면 크롬 개발자도구의 일부이다.
• alert()
  해당 함수는 브라우저에서 모달 대화상자를 띄워 표시한다. 기본적으로 브라우저의 중앙에 위치해 사용자의 주의를 끈다.

 

Purpose

 

위에서 짐작할 수 있듯이 두 함수는 그 목적이 다르다.

 

• console.log()
  개발자의 개발 중 디버깅 및 로그 기록을 위해 사용된다. 따라서 실제 사용자에겐 보이지 않는다.
• alert()
  사용자에게 메시지를 표시하고 주의를 주거나 확인을 요청하기 위해 사용된다.
  사용자에게 해당 메시지가 표시되는 동안 다음 코드의 실행이 일시 중지된다.

 

Scope

 

따라서 두 함수는 영향을 주는 범위가 다르다.

 

• console.log()
  개발자 도구 콘솔이나 터미널 등에서만 작동하며 프로덕션 환경에서는 출력되지 않는다.
  따라서 실제 사용자에게 영향을 미치지 않는다.
• alert()
  모달을 띄워 사용자에게 메시지를 출력하므로 사용자 경험에 영향을 준다.

따라서 개발 단계에서는 console.log()를 활용해 디버깅 및 로깅을 하고, 프로덕션 단계에서는 alert()를 사용해

 

사용자에게 필요한 메시지를 전달하는 대화 상자를 표시한다.

 

let vs. var

 

let과 var는 모두 JavaScript에서 변수를 선언하는 데 사용되는 키워드이다.

 

솔직히 설명을 읽어도 무슨 말인지 잘 모르겠지만 일단 차이점을 정리해 보자.

 

Scope

 

• let
  let으로 선언된 변수는 블록 범위(Block Scope)를 가진다. 여기서 블록 범위란 중괄호({})로 둘러싸인 코드 블록 내부를 의미한다.
  또한 let으로 선언된 변수는 호이스팅(Hoisting)이 발생하지 않는다.
• var
  var로 선언된 변수는 함수 범위(Function Scope)를 가진다. 즉, 해당 변수는 선언된 함수 내에서만 접근이 가능하다.
  또한 var로 선언한 함수는 호이스팅이 발생하는데, 여기서 호이스팅이란 변수 선언이 범위의 밴 위로 이동되는 것을 가리키며,
  따라서 변수 선언 이전에도 참조할 수 있다.

 

Redefinition

 

• let
  let으로 선언한 변수는 동일한 스코프 내에서 재선언할 수 없다. 중복된 let 선언은 문법 오류로 간주된다.
• var
  var의 경우는 동일한 스코프 내에서 재선언이 가능하다. 다만 이 경우 초기 선언이 무시되고 재선언된 변수로 재할당된다.

 

Block Scope Assignment

 

• let
  let으로 선언된 변수는 블록 범위 안에서만 할당할 수 있다. 따라서 let으로 선언된 변수는 블록을 벗어나면 사용할 수 없다.
• var
  var로 선언된 변수는 함수 범위 내에서 블록 범위 할당이 가능하다. 따라서 if, for, while 등의 블록에서 선언하고 사용할 수 있다.

 

종합해 보면, 일반적으로 변수를 선언할 때는 let 키워드를 사용하는 것이 권장된다.

 

이것은 let이 좀 더 엄격한 스코프 규칙을 가지고 있으며, 호이스팅이 발생하지 않아 예기치 못한 동작을 일으킬 확률을 줄이기 때문이다.

 

또한 재선언이 불가능하다는 성질 덕분에 코드를 더 명확하고 의도한 대로 작성할 수 있게 도와준다.