[JS] 변수와 자료형

변수 선언 위치에 따른 전역변수(멤버변수)/지역변수

• let 변수명 : 전역변수(global), 값을 수정할 수 있음
• const 변수명 : 상수 (값을 할당하면 바꿀 수 없음)
• var 변수명 : 전역변수(global), 과거에 쓰이던 키워드 (최근에는 안쓰임)
• 변수명; : 전역변수(global)

함수, if, for문 영역 내에서

• var 변수명 : 지역변수(local)
• 변수명 : 지역변수(local)

---

var 변수의 문제점

• var 변수는 문제점이 많아서 let,const로 대체됨 (아직도 많은 곳에서 사용되고 있음)

1. 영역문제

• 함수, if, for문 밖에서 let 변수를 호출하면 에러발생
  • let,const는 자바와 스코프 범위가 동일하기 때문 (block scope)
• 함수, if, for문 밖에서 var변수를 호출하면 에러가 안남
  • 함수에서 선언 시에만 지역변수고 그 외 if문, for문은 영역을 영역을 벗어나도 전역에 남아있음)
  • var은 function scope

if(true) {
    var varTest = "var";
    let letTest = "let";
}
// console.log(letTest); 에러발생(블록단위기준(자바와 스코프범위가 동일함))
console.log(varTest); // 에러 안남(전역에 남아있다.), 함수내에서 선언시 해당 함수에서만 쓰이고 , 그외는 전역변수

2. 중복문제

• 변수 명이 중복되어도 에러가 안 남 (let과 달리 재사용이 가능함)
• 전역변수들(var, 키워드 x)은 자동으로 window 객체의 필드로 등록됨
  • let, const는 전역변수일때도 window 객체의 필드로 등록되지 않음

---

전역변수명과 지역변수명이 동일한 경우

• 전역변수명과 지역변수명이 동일한 경우 지역변수가 우선권을 가짐
  • 지역변수에서 먼저 찾고 없으면 전역변수를 찾음
• 이때 전역변수에 접근하고자 할 때는 window 혹은 this를 작성
• this는 호출한 객체의 주소값이 담겨있고, 기본 주소값은 window가 저장되어 있음
  • 지역변수를 window나 this로 호출하려 할 때는 undefined(값이 없는게 아니라 정의되어 있지 않음)가 뜸
  • 단 지역변수 선언 할 때 키워드 생략시 전역변수로 취급됨

console.log(window.str);
console.log(this.str);

---

자료형

• 변수 선언 시 자료형을 별도로 지정하지 않음 (자료형 개념이 없는 건 아님)
• 변수에 대입되는 값(리터럴)에 따라서 알아서 자료형이 자동으로 결정됨

자료형의 종류

• String(문자열) : char이 없으므로 작은따옴표나 `로 묶어줘도 됨
• number(숫자)
• BigInt(진짜큰숫자)
• boolean(논리값)
• object(객체)
  • 배열도 object 타입임
  • key value로 저장되는게 hashmap과 비슷함
  • 화면에 출력 시 [object Object]로 표시 (toString 재정의)
  • 객체 내부의 속성에는 .(온점)으로 접근

const hobby = ["영화","유투브","낮잠"];

const user = {
	name : 'ㅇㅇㅇ',
	age : 22,
	id : 'abc'
}

divEl.innerHTML += user.name+"의 나이는 "+user.age+"이며 아이디는 "+user.id+"입니다.";

• function(함수) : 선언적 함수가 아니라 변수(익명함수), 괄호 안 붙여도 호출 가능

const testfn = function (){
    alert("ㅎㅎ");
}

• undefined(초기화가 안된 변수)

let a;

null과 undefined 차이점

• null : 변수가 존재하고 값이 명시적으로 비어있음
• undefined : 변수가 존재하지 않거나 값이 할당되지 않음

자료형 확인 시 사용되는 함수 (typeof(변수명))

• null값의 자료형은 object
  • null은 별도의 고유한 자료형을 가지는 특수한 값임. 즉 객체가 아님
  • 하지만 하위호환성을 위해 오류를 수정하지 않고 남겨둠
• 숫자를 0으로 나누면 infinity, 문자를 나누면 NaN

divEl.innerHTML+= `${user}의 자료형 : `+typeof(user)+"<br>";