변수(Variables)

👉변수(Variable)

변수

• 데이터를 담아두는 그릇
• 어떠한 값을 담을 수 있다.
• 반드시 한 개의 값을 담을 수 있다.
• 다른 값이 삽입되면 기존에 들어있던 값은 소멸한다.
• 타입 : var / let / const

var 변수이름 = 데이터;
let 변수이름 = 데이터;
const 변수이름 = 데이터;

var a = 3;
var b = '안녕하세요';
var c = true;
console.log(a);
//3
console.log(b);
//안녕하세요
console.log(c);
//true
a = 5;
console.log(a);
//5
a = b;
console.log(a);
//안녕하세요
console.log(b);
//안녕하세요

변수 명 작성하기

• 숫자로 시작할 수 없다.
• 변수 명 첫 글자는 $ , _ , 영문자만 가능하다.
• 대소문자 구분하는 것이 좋다.
• 소문자 명사형으로 시작하는 것이 좋다.
• 변하지 않는 환경변수의 값을 담는 상수 변수는 모두 대문자로 표기한다.
• 이미 정의된 예약어는 사용 불가.

var userName = null;
//camel case(낙타등 표기법)

var user_name = null;
// snake case (뱀 표기법)

var UserName = null;
// pascal case(파스칼 케이스)
//생성자 함수, 클래스 등에 사용

var 이름 = "홍길동"
var abc = 123;

var

• 함수 재선언이 가능하다(기존에 있던 값이 갱신된다).
• window(웹의 최상위 객체-웹의 모든 것을 다룰 수 있다)라는 전역 변수가 계속 갖고 있어서 웹이 점점 무거워진다.
• 현재는 잘 사용하지 않는다.

var b = 3;
console.log(b);
//3
var b = 5;
console.log(b);
//5
console.dir(window);

let

• 함수의 재선언이 불가능하다.
• 변수의 중복을 막는다.
• 변수의 재할당은 가능하다(맨 앞에 let을 뺀다).

let a = 2;
console.log(a);
//2
let a = 10;
console.log(a);
// Identifier 'a' has already been declared 에러 발생
a = 10;
console.log(a);
//10

const

• 상수 변수
• 재할당이 불가능하다(고정).
• 제일 많이 사용한다.
• undefined를 허용하지 않는다. 무조건 값 하나를 갖고 있어야 한다.

const c;
console.log(c);
//Missing initializer in const declaration -> 초기화 해야한다는 에러

const d = 5;
console.log(d);
//5

d = 7;
console.log(d);
//Assignment to constant variable.

👉Template literals

• 템플릿 리터럴
• BackTick( ` )을 이용해 이전보다 더 자유롭게 문자열을 선언할 수 있다

let name = "홍길동";
let state = "서울";
        
console.log("제 이름은 "+name+" 이고 사는 곳은 "+state+"입니다");
//이전 방식
//제 이름은 홍길동 이고 사는 곳은 서울입니다

console.log(`제 이름은 ${name} 이고 사는 곳은 ${state}입니다`);
//템플릿 리터럴
//제 이름은 홍길동 이고 사는 곳은 서울입니다

console.log("동해물과 백두산이 마르고 닳도록\n"+
"하느님이 보우하사 우리 나라만세\n"+
"무궁화 삼천리 화려강산\n"+
"대한사람 대한으로 길이 보전하세\n");
/*동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리 나라만세
무궁화 삼천리 화려강산
대한사람 대한으로 길이 보전하세*/

console.log(`동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리 나라만세
무궁화 삼천리 화려강산
대한사람 대한으로 길이 보전하세`);
/*동해물과 백두산이 마르고 닳도록
        하느님이 보우하사 우리 나라만세
        무궁화 삼천리 화려강산
        대한사람 대한으로 길이 보전하세*/
//개행이나 공백을 너무 잘 인식해서 VSCode에서 입력한 tab등도 그대로 출력한다

• 연산도 가능하다

let a = 5;
let b = 10;
console.log(a+"+"+b+"="+(a+b));
//5+10=15
console.log(`${a}+${b}=${a+b}`);
//5+10=15

let은 재할당이 가능하고 const는 불가능!