고래씌
[JavaScript] 4. 변수와 자료형 본문
1. 변수 선언 위치에 따른 전역변수/지역변수
▶ let 변수명; // 전역변수(global)
▶ const 변수명; // 상수(값을 할당시 바꿀 수 없음)
▶ var 변수명; // 전역변수(global) 단, 과거에 쓰이던 키워드
▶ 변수명; // 전역변수(global)
function 함수명() {
var 변수명; // 지역변수(local)
변수명; // 지역변수(local) 혹은 전역변수(global)
}
☞ var변수 문제점이 많아서 let, const로 대체됨
☞ but, 아직도 많은 스크립트에서 var가 사용되고 있음
1-2. var 변수의 문제점
1) 영역문제
■ 04_변수와자료형.html
|
if(true){
var varTest = "var"; // 전역변수
let letTest = "let"; // 지역변수
}
console.log(varTest);
console.log(letTest);
|
▶ console.log(varTest); => 에러발생 X
함수내에 선언되면 지역변수, 그외에는 전역변수로써 사용이 된다. ==> var는 함수단위 스코프
▶ console.log(letTest); => 에러 발생(블록단위로 영역이 할당된다.)
==> let은 블록단위 스코프
2) 변수명 중복문제
|
var user;
var user;
|
=> 에러발생 X
|
let user;
let user;
|
=> 에러발생
■ 04_변수와자료형.html의 script 태그 안
<script>
// window.str => window 생략가능
str = "전역변수"; // window 객체에 저장된 전역변수임
let str2 = "let 전역변수"; // window 객체에 저장된게 아니라 말그대로 전역변수임
// window.onload => window 생략가능
window.onload = function(){
// let str = "지역변수" str3 = "또 지역변수",...; 권장하지 않는 방법
let str = "지역변수";
let str3 = "새로운 지역변수";
str4 = "애는 뭘까?";
console.log("---- str ----");
console.log(str); // 지역변수명과 전역변수명이 동일한 경우 지역변수 호출
// 그러면 전역변수 str에 접근하고자 한다면?
console.log(window.str);
console.log(this.str); // this => window를 의미하므로 전역변수 호출
console.log("---- str2 ---- ");
console.log(str2);
console.log(window.str2); // undefined 정의 되지 않음
console.log(this.str2); // undefined 정의 되지 않음
console.log("---- str3 ----");
console.log(str3); // 지역변수
console.log(window.str3); // undefined 정의 되지 않음
console.log(this.str3); // undefined 정의 되지 않음
console.log("---- str4 ----");
console.log(str4);
console.log(window.str4); // 전역변수임을 알수있다.
console.log(this.str4);
// => 지역변수 선언시 키워드(var, let, const를 생략할 경우 자동으로 전역변수로 취급된다.)
}
</script>
ⓐ
|
str = "전역변수"; // window 객체에 저장된 전역변수임
let str2 = "let 전역변수"; // window 객체에 저장된게 아니라 말그대로 전역변수임
|
ⓑ
|
window.onload = function(){
let str = "지역변수";
let str3 = "새로운 지역변수";
str4 = "애는 뭘까?";
|
☞ window.onload == 현재 html문서가 전부 load되고 나서 실행할 함수를 지정하는 구문
☞ 페이지 로딩이 완료되고 나서 실행됨. 내부에 이벤트 조회할때 주로 사용
ⓒ
|
str = "전역변수";
let str2 = "let 전역변수";
window.onload = function(){ // let str = "지역변수" str3 = "또 지역변수",...; 권장하지 않는 방법
let str = "지역변수";
let str3 = "새로운 지역변수";
str4 = "애는 뭘까?";
console.log("---- str ----");
console.log(str);
console.log(window.str);
console.log(this.str);
|
console.log(str); ☞ 지역변수명과 전역변수명이 동일한 경우 지역변수 호출
console.log(windows.str); ☞ 전역변수 호출됨
console.log(this.str); ☞ this => window를 의미하므로 전역변수 호출
ⓓ
|
console.log("---- str2 ---- ");
console.log(str2);
console.log(window.str2); // undefined 정의 되지 않음
console.log(this.str2);
|
ⓔ
|
console.log("---- str3 ----");
console.log(str3); // 지역변수
console.log(window.str3); // undefined 정의 되지 않음
console.log(this.str3); // undefined 정의 되지 않음
|
ⓕ
|
console.log("---- str4 ----");
console.log(str4);
console.log(window.str4); // 전역변수임을 알수있다.
console.log(this.str4);
|
=> 지역변수 선언시 키워드(var, let, const를 생략할 경우 자동으로 전역변수로 취급된다.
2. 자료형
- 변수 선언시 자료형을 별도로 지정하지 않음(단, 자료형의 개념이 없는 건 아님)
=> 변수에 대입되는 값에 따라서 자료형이 결정된다.
▶ 자바스크립트의 자료형
- string(문자열)
- number(숫자)
- boolean(논리값)
- object(객체)
- function(함수)
- undefinded(초기화가 안된 변수)
1) 자료형 테스트
■ 04_변수와자료형.html의 script 태그 안
<button onclick="typeTest();">자료형 테스트</button>
<div id="area" class="area"></div>
<script>
function typeTest(){
var name = "이고래";
var name = `이고래`;
var name = '이고래'; // 다 문자열
var age = 40; // number
var flag = true; // boolean
var hobby = ["영화", "음악", "게임"]; // 길이 3짜리 배열이 만들어짐 // object
// hobby는 이 값이 존재하는 주소값이 보관되고 있는 것임!
var user = {
name : '이고래',
age : 26,
id : 'whalewell'
} // object
var testFn = function() {
alert('zzz');
}
var noVal; // 이상태에서 값을 가지고 있는 것이 undefinded임. 값자체가 없는 상태
console.log(name, age, flag, hobby, user, testFn, noVal);
// 자료형 확인시 사용되는 연산자 : typeof(변수명)
area.innerHTML = `${name}의 자료형 : ${typeof(name)}<br>`;
area.innerHTML += `${age}의 자료형 : ${typeof(age)}<br>`;
area.innerHTML += `${flag}의 자료형 : ${typeof(flag)}<br>`;
area.innerHTML += `${hobby}의 자료형 : ${typeof(hobby)}<br>`;
area.innerHTML += `${user}의 자료형 : ${typeof(user)}<br>`;
area.innerHTML += `${testFn}의 자료형 : ${typeof(testFn)}<br>`;
// 함수의 경우 함수정의 내용이 화면에 다 출력된다.
area.innerHTML += `${noVal}의 자료형 : ${typeof(noVal)}<br>`;
// 객체 내부의 속성에 접근할때는 .으로 접근
area.innerHTML += `${user.name}의 나이는 ${user.age}살이며, 아이디는 ${user.id}입니다<br>`
// 특이케이스
console.log(typeof null); // console에 object라고는 뜨지만.....object아님
}
</script>
ⓐ
|
var hobby = ["영화", "음악", "게임"];
|
=> 길이 3짜리 배열이 만들어짐. object 출력
=> hobby는 이 값이 존재하는 주소값이 보관되고 있는 것!
ⓑ
|
var user = {
name : '이고래',
age : 26,
id : 'whalewell'
} // object
|
=> 이게 정말 object이다!!!
ⓒ
typeof() => 어떤 타입형인지 반환하는 함수
var noVal; => 값자체가 안담긴 상태
area.innerHTML += `${user}의 자료형 : ${typeof(user)}<br>`;
☞ [object Object]~ 출력되는데 이게 object에 정의되어있는 toString의 기본값임.
☞ 이것이 정말 object에 저장된 값이다!
☞ 직접 정의한 객체를 화면에 출력시 [object Object]가 출력. 내가 toString을 재정의 하지 않는이상 모든 객체는 이렇게 출력됨.
▶ consol.log(name,age, flag, hobby, user, testFn, noVal); 의 콘솔 출력화면
ⓓ
☞ 객체 내부의 속성에 접근할 때는 .으로 접근이 가능하다.
ex) user.age
user.id
user.name
※ 특이케이스
console.log(typeof null);
☞ console에 object라고는 뜨지만 object는 아니다!
☞ 하위 호환성을 위해서 오류를 수정하지 않고 남겨둔 상황
☞ 단, null은 별도의 고유한 자료형을 가지지 않는 특수한 값이다!! 절대로 object가 아니다!
▶ console.log(typeof null); 콘솔 출력 화면
'Front-End > JavaScript' 카테고리의 다른 글
| [JavaScript] 체크박스 실습문제 (0) | 2023.11.09 |
|---|---|
| [JavaScript] 5. 문자열과 숫자 (0) | 2023.11.08 |
| [JavaScript] 3. 요소선택 (0) | 2023.11.08 |
| [JavaScript] 2. 데이터 입출력 (0) | 2023.11.08 |
| [JavaScript] 1. 개요 (0) | 2023.11.07 |
