자바스크립트 기초 - 변수

[20240927] 자바스크립트 기초 강좌  #1 - 변수

실습 진행 IDE : https://codepen.io/

CodePen

 

I(item). 변수선언

name = "Mike";
age = 30;

 

JS 변수선언의 기본 형태, 혼자 프로젝트할 땐 상관없지만, 이렇게 사용하면 안 된다.

 

W(why). 여러 명이서 진행하는 프로젝트일 경우 name, age라는 변수명이 유일하다는 보장이 없기 때문이다.

그래서 다른 사람이 name이라는 변수를 사용하게 된다면 덮어 써짐.

 

E(explanation). 보통 같은 변수를 사용한다면 SyntaxError가 발생하지만, JS에선 자료형 없이 사용한 변수에 대해선 해당 에러를 발생시키지 않고 마지막에 선언했던 변숫값으로 덮어쓰기 한다.

 

S(so). 유일성이 보장되지 않기 때문에 여러 개발자 같이하는 프로젝트라면 다음과 같이 자료형과 함께 정의한다.

 

변수선언(var, let, const)

var name = "슬개";
let name = "Mike";
const age = 20;

E. var 자료형 : 변수의 중복 선언이 가능, 마지막 선언한 변숫값으로 덮어 써짐.

E. let 자료형 : 변수의 중복 선언이 불가, 재할당은 가능한 변수.

E. const 자료형 : 절대로 바뀌지 않는 상수를 입력할 때 사용.

 

E. 자료형 특징 표 정리

	중복선언	재할당	스코프(Scope)	호이스팅(Hoisting)	전역객체 프로퍼티
var	가능	가능	함수레벨 스코프 (Function-level)	호이스팅 시 undefined로 변수초기화 (호이스팅 수행)	할당
let	불가능	가능	블록레벨 스코프 (block-level)	선언단계-TDZ-초기화 단계-할당 단계로 분리되어 진행 (호이스팅 수행)	undefined
const	불가능	불가능	블록레벨 스코프 (block-level)	초기화 이전 접근 시 ReferenceError발생(호이스팅 수행)	undefined

참조. https://velog.io/@konveloper/JS-var-let-const

 

 

E. 호이스팅이란?

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.
참조. MDN Web Docs 용어 사전

 

 

상수 유형의 변수로 선언된 변숫값 변경해 보기.

const name = "name";

name = "BB";

 

에러확인하기.

 

 

D(difference). 자료형을 사용하기 전, 후 차이점

동일 이름의 변수를 선언하게 되면

let name = "Mike";
let name = "Mike";

 

 

다음과 같이 SyntaxError 발생

 

S. 이미 사용하고 있는 변수인걸 인지하고 다른 이름으로 바꿔서 사용한다.

 

T(Tip). 자바스크립트에서 변수를 선언할 때는, 변하지 않는 값은 const, 변할 수 있는 값은 let으로 선언한다.

 

I. 변수의 명명규칙(이건 외워라)

1. 첫째, 변수는 문자와 숫자, $와 _만 사용

2. 첫글자는 숫자가 될 수 없다.

3. 예약어는 사용할 수 없다.

4. 가급적 상수는 대문자로 명시한다.

5. 변수명은 읽기 쉽고 이해할 수 있게 선언.

 

I. 호출방식(콘솔에 출력)

console.log(name);

console.log()

 

I. 호출방식(브라우저 알림 창에 출력)

alert(name);