자바스크립트 기초 (1) - 변수, 자료형, 대화 상자, 형변환

이번 포스트는 코딩앙마님의 강의를 보고 작성되었습니다.

[자바스크립트 기초 강좌 : 100분 완성 - YouTube](https://www.youtube.com/watch?v=KF6t61yuPCY)

---

1. 변수

변수

: 어떤 정보에 이름을 붙여 저장하고 싶을 때 사용

• 문자와 숫자, $와 _만 사용한다.
• 첫 글자는 숫자가 될 수 없다.
• 가급적이면 상수는 대문자로 선언하는 것이 좋다.
• 읽고 이해하기 쉽게 선언한다.
• 예약어는 변수로 사용할 수 없다. ex)class, eval, new ...
• 변수의 선언은 var, let, const로 할 수 있다.
• 선언 -> 초기화 단계로 변수가 선언된다.
  • 선언 단계 : 변수명을 등록하여 JS 엔진에 변수의 존재를 알린다.
  • 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고, 암묵적으로 undefined를 할당해 초기화 한다.

호이스팅

var km;
console.log(km); // undefined


console.log(am); // undefined
var am;

✔️ JS 엔진은 소스코드를 한 줄씩 실행하기에 앞서. 변수 선언을 포함한 모든 선언문을 찾아내 먼저 실행한다. 즉, 변수 선언이 어디에 있든 상관없이 다른 코드보다 먼저 실행되는 특징을 호이스팅(hoisting)이라고 한다.

var

• 변수 중복 선언이 가능하므로 예기치 못한 값을 반환할 수도 있다.
• 함수 레벨 스코프로 인해 함수 외부에서 사용한 함수는 모두 전역 변수가 된다.
• 변수 선언문 이전에 변수를 참조하면 언제나 undefined로 반환이 된다.

    => var의 문제점을 보완하기 위해 let과 const가 등장했다.

let

• 변수 중복 선언이 불가하지만, 재할당은 가능하다.
• 코드 블록(function, if 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.
• 선언 단계와 초기화 단계가 분리되어 진행된다. JS 엔진에 의해 선언이 먼저 실행되지만, 초기화 단계가 실행되지 않았을 때 접근하려고 하면 참조 에러가 발생한다.

const

• 반드시 선언과 초기화가 동시에 진행되어야 한다.
• 재선언 및 재할당이 불가하다. (객체는 가능)
• 블록 레벨 스코프를 따른다.

---

2. 자료형

1. 문자형
   • " ", ' ',` `(백틱)으로 표현
   • 큰 따옴표 안에 큰 따옴표 문자를 넣고 싶다면? -> 문자로 표현할 기호 앞에 `\`를 붙이면 특수문자로 인식한다. "Hello. my name is \"seonju\""
   • 백틱은 string과 variable 및 function의 값을 함꺼번에 표현하고 싶을 때 사용한다.
2. 숫자형
   • 사칙 연산 가능
3. boolean(논리형)
   • true와 false 값 반환
4. null
   • 값이 존재하지 않을 때 null 반환
5. undefined
   • 값이 할당되지 않은 상태
6. 객체, 배열, Symbol...

---

3. 대화 상자

1. alert : 알려줌 alert("message")
2. prompt : 입력 받음 prompt("message", default value)
   • prompt는 숫자를 입력해도 무조건 문자형을 반환한다.
3. confirm : 확인 받음. 확인 및 취소 버튼 존재 confirm("message")

• 대화 상자의 단점 : 스크립트가 일시 정지된다. 또한 스타일링을 할 수 없다.

---

4. 형변환

1. String() : 문자형으로 변환
2. Number() : 숫자형으로 변환
3. Boolean() : 불린형으로 변환

"6"/"2" //3 -> 자동 형변환
Number(문자열); // NaN 반환
Number(true); // 1
Number(false); // 0


** Boolean()에서 false로 반환되는 경우
: 0, 빈 문자열, null, undefined, NaN


Number(null); // 0
Number(undefined); // NaN
Number(0); // false
Number('0'); // true
Number(''); // false
Number(' '); // true