[JS] 3. 변수의 특징과 내장 API의 형변환

1. var 변수의 특징

자바스크립트 ES6버전부터는 let과 const라는 새로운 예약어가 생겼는데 왜 필요했는지 알아보기 위해 var변수의 특징을 알아보자

1.1. 스코프(Scope)

자바스크립트 ES5 버전은 함수단위로 스코프를 가지는데, 여기서 스코프(Scope)란 변수가 적용되는 변수의 유효범위이다.
함수 안에서만 쓸 수 있는 "지역변수" 와 스크립트 안에서 자유롭게 쓸 수 있는 "전역변수" 는 유효범위가 다르다.

(1) 지역변수(Local Variable) : 함수 내부에 선언하고 함수 내부에서만 사용 가능

(2) 전역 변수(Global Variable) : 스크립트 내부에서 사용 가능

• 스크립트 내 var키워드로 지정된 전역변수는 window 객체의 속성으로 등록된다
• 함수 안에서 var키워드를 사용하지 않으면 전역변수
• 전역변수 호출방법 1) window.변수명
  => window는 브라우저에서 최상위 객체이다.
• 전역변수 호출방법 2) "일반함수"에서 this.변수명
  => "일반함수"에서 this는 window 객체를 가리킨다.

변수의 스코프를 확인할 html
<input type="button" value="전역(global) | 지역(local)" onclick="test1()">

변수의 스코프를 확인할 자바스크립트
<script>
	var a = 100; // 전역변수

	function test1() {
		var a = '아'; // 지역변수
		var b = 123; // 지역변수
		console.log(a);
		console.log(b); 
		console.log("전역변수 a = " + window.a);  
		console.log("전역변수 a = " + this.a); 

        var a = true; // 변수명 같아도 중복선언 가능
	}
...

HTML	자바스크립트 콘솔

1.2. 호이스팅(hoisting)

호이스팅이란 '끌어올린다'라는 뜻으로 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로 끌어올리는 것을 의미한다.
따라서 var키워드로 선언된 변수 및 함수선언식으로 선언된 함수는 hoisting되어 스크립트 최상단으로 올라간다.

호이스팅을 확인할 자바스크립트
<script>
	var x = 10;
	foo();
     
	function displayNumber() {
	console.log('x is ' +  x);
	console.log('y is ' + y);
	var y = 20;
	}
    
	displayNumber();
    
	function foo() {
		console.log('foo');
	}
</script>

자바스크립트 콘솔	자바스크립트 해석기가 인식하는 코드
	실제 코드에는 변화가 없으나 위처럼 해석되어 y에 할당된 값이 없는 것으로 출력

1.3. let과 const

위와 같이 호이스팅이 발생하면 프로그램 오류가 발생할 수 있으므로 ES6부터는 let과 const예약어가 추가되었다.

• let: block scope를 가진 변수 키워드 (재할당 가능 / 재선언 불가)

호이스팅이 없는 변수 let
<script>
	var x = 10;
  
  	function display() {
  		console.log('x is ' +  x);
		console.log('y is ' + y); // 선언되지 않은 y 사용
		let y = 20;
	}
display();
...

초기화하지 않은 let변수 사용하여 오류 발생

• const: block scope를 가진 상수 키워드 (재선언 재할당 모두 불가)

<script>
	const currentYear1 = 2020;
  	console.log(currentYear1);
  	const currentYear1; // currentYear 변수 재선언
...

const변수 재선언 오류 메시지

위와 같은 오류 발생을 방지하기 위해 아래와 같이 사용하도록 한다.

1. 전역변수는 최소한으로 사용
2. var 변수는 함수의 시작 부분에서 선언
3. for문의 카운터 변수에는 var예약어 사용 X
4. var보다 let이 안전

---

2. 내장 API

웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의되어 있는데, 이를 내장 객체라고 한다. 간단하게 string, Math, Date 객체의 메서드들을 알아보자

2.1. string 객체

문자열과 관련된 method를 제공한다. 모를 때는 찾아보도록 하자.

(1) 문자열의 길이 찾기 : .length
(2) 대문자, 소문자 변환 : toUpperCase(), toLowerCase()
(3) :
(4)
(5)
(6)
(7)
(8)

2.2. Math 객체

2.3. Date 객체

2.4. 자동형변환