모던 자바스크립트 튜토리얼을 읽으며 정리한 글이다.

2.4 변수와 상수

 

  • 변수
    • 자바스크립트에선 let 키워드를 사용해 변수를 생성
    • var도 let처럼 변수를 선언하는 데 쓰이지만 '오래된' 방식
    • 변수를 두 번 선언하면 에러가 발생 → 변수는 딱 한 번만 선언하고, 선언한 변수를 참조할 때는 let 없이 변수명만 사용해 참조해야 함
  • 함수형 언어
    • 변수에 데이터가 저장되면, 그 값을 영원히 유지
    • 다른 값을 저장하고 싶다면 이전 변수를 재사용할 수 없기 때문에 새로운 변수를 만들어야 함
  • 예약어
    • let
    • class
    • return
    • function
  • 상수
    • 변화하지 않는 변수를 선언할 땐, let 대신 const 사용
    • 상수는 재할당할 수 없으므로 상수를 변경하려고 하면 에러가 발생
  • 과제

- 변수 가지고 놀기

let admin, name;

name = "John";
admin = name;
alert(admin);

- 올바른 이름 선택하기

  1. planetWeLiveIn → ourPlanetName 이게 낫네..
  2. currentAccessUserName → currentUserName Access까지 붙일 필요는 없나 보다

- 대문자 상수 올바로 사용하기

대문자 상수는 '하드 코딩한' 값의 별칭을 만들 때 사용하면 됨

하드코딩: 상수나 변수에 들어가는 값을 소스코드에 직접 쓰는 방식

그렇다면, birthday를 대문자 상수로 바꾸는 것은 적절하지만 age는 대문자 상수로 바꿀 필요없다고 할 수 있다.

2.5 자료형

 

// no error
let message = "hello";
message = 123456;
  • 동적 타입(dynamically typed) 언어
    • 자료 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어
  • 글자(character)형
    • 자바스크립트는 글자형을 지원하지 않음
  • 'null' 값
    • ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값
  • 'undefined' 값
    • 값이 할당되지 않은 상태
    • 변수에 undefined를 명시적으로 할당하는 것도 가능하긴 하지만, undefined를 직접 할당하는 것을 권장하지 않음 → 변수가 비어있거나 알 수 없는 상태라는 걸 나타내려면 null을 사용, undefined는 값이 할당되지 않는 변수의 초기값을 위해 예약어로 남겨두자

2.6 alert, prompt, confirm을 이용한 상호작용

  • alert
    • 함수가 실행되면, 사용자가 ‘확인(OK)’ 버튼을 누를 때까지 메시지를 보여주는 창이 계속 떠있게 됨
    • 모달 창(modal window)
      • 메시지가 있는 작은 창
      • 모달
        • 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미가 내포되어 있음 → 사용자는 확인 버튼을 누르기 전까지 모달 창 바깥에 있는 버튼을 누른다든가 하는 행동을 할 수 없음
  • prompt
    • 함수가 실행되면, 텍스트 메시지와 입력 필드(input field), 확인(OK) 및 취소(Cancel) 버튼이 있는 모달 창을 띄워줌
  • confirm

위 함수들은 모두 모달 창을 띄워주는데, 모달 창이 떠 있는 동안은 스크립트의 실행이 일시 중단됨. 사용자가 창을 닫기 전까지는 나머지 페이지와 상호 작용이 불가능함

  • 과제
<!DOCTYPE html>
<html>
<body>

  <script>
    'use strict';

    let name = prompt("이름을 입력해 주세요.", "");
    alert(name);
  </script>

</body>
</html>

티스토리툴바