[ JavaScript ] 변수선언 ( var과 let의 차이점은??)

 

변수선언

"let 변수명"으로 변수를 선언가능하다.

let name = 'ellie'; 
console.log(name);

 

한번 선언한 변수는 다시 값을 바꾸는 것도 가능하다

let name = 'ellie';
console.log(name);
name = 'hello';
console.log(name);

 

지역변수와 전역변수

{ 
  let name = 'ellie';
  console.log(name);
  name = 'hello'; 
  console.log(name);
}
console.log(name);

 

{ } 안에 선언한 변수는 { } 안에서만 접근이 가능하다.

위와 값이 { } 안에 선언된 name 변수를 { } 밖에서 접근을 하게되면

ReferenceError: name is not defined

 

name is not defined 라고 정의되지 않은 변수라고 나온다.

 

let globalName = 'global name'; 
{
  let name = 'ellie';
  console.log(name);
  name = 'hello';
  console.log(name); 
  console.log(globalName); 
}
console.log(globalName);
console.log(name);

 

이럴 때에는 , { } 밖에 변수를 선언하게되면 전역변수로 선언이되어서 { } 안에서도 사용할 수 있고, 밖에서도 사용할 수 있는 변수가 선언이된다.

 

하지만, 전역변수의 경우는 여러 문제점등을 초래할 수 있기 때문에 자주 사용하지 않는 것이 좋다.

 

변수 선언에는 let 과 var 중에 뭘 써야하나??????

기존에 JS에서 변수선언은 var을 가지고 했었다. 하지만, 버전업이 되면서 let이라는 변수선언이 생겼다.

우선 var의 경우에는 변수 선언 위치에 상관없이 맨위로 올려서 선언이 되도록 해준다.

 

이말은 무엇이냐면, 원래 변수를 먼저 선언하고 변수를 호출하든 값을 초기화하던지 해야하는데, var을 사용하면 이 순서가 바뀔 수 있는 것이다.

console.log(age);
age = 4; 
var age;

 

하지만, 위의 코드같은 경우에는 값을 초기화하기 전에 log로 출력했기 때문에 값은 'undefined'이 나오게된다. 또한, { } 안에 var로 변수를 선언해도 { } 밖에서 그 변수에 접근이 가능하게 되어버린다.

 

하지만 let으로 변수선언을 한경우에는 위와 같은 경우에 오류를 발생시켜 좀 더 신뢰성있는 코드를 작성할 수 있게 해준다.

 

상수

한번 선언하면 바뀌지 않는 값

const daysInWeek = 7; 
const maxNumber = 5;

 

상수로 변수를 선언하게 되면, 보안에도 좋고, 쓰레드 환경에서도 동시에 변수에 접근하는 경우에 코드의 신뢰성을 높힐 수 있다.

 

변수 타입

[숫자타입]

java 같은 언어를보면 변수타입에 int, short, long, float, double등 여러가지 숫자에 관한 타입이 있는데, JS에서는 number로 모두 해결 할 수 있다.

const count = 17;
const size = 17.1;
console.log(`value: ${count}, type: ${typeof count}`);
console.log(`value: ${size}, type: ${typeof size}`);

 

number 타입은 위와같이 생략을 하면 알아서 선언이 된다.

 

[문자(열)타입]

const char = 'c';
const brendan = 'brendan';
const greeting = 'hello ' + brendan; 
console.log(`value : ${greeting}, type : ${typeof greeting}`);
const helloBob = `hi ${brendan}!`; //template literals (string) 
console.log(`value : ${helloBob}, type : ${typeof helloBob}`);
console.log('value :' + helloBob + ', type :' + typeof helloBob);

 

문자관련 타입도 마찬가지로 , char 이나 string이 따로있는 것이 아니라 같이 string으로 처리된다.

그리고, ` `(템플릿 리터럴즈) 를 사용하게 되면, 문자열과 변수를 출력하고 싶을 때, 귀찮게 + 로 연결하지 않고도 ``와 ${ } 를 사용하는 것으로 편하게 출력할 수 있다.

 

[boolean 타입]

false : null, undefined, 0, NaN, ''

true : 그 외 모든 값 

const canRead = true; 
const test = 3 < 1;
console.log(`value : ${canRead}, type : ${typeof canRead}`); 
console.log(`value : ${test} , type : ${typeof test}`);

 

 

[null]

let nothing = null;
console.log(`value : ${nothing}, type : ${typeof nothing}`);

 

 

[undefined]

let x;
let y = undefined ; 
console.log(`value : ${x} , type : ${typeof x}`); 
console.log(`value : ${y} , type : ${typeof y}`);

 

 

null과 undefined의 차이점은

null은 해당 변수의 값이 아무것도 없는 비어있는 상태를 의미하는 것이고

undefined는 아직 null인지 숫자인지 문자인지 모르는 값이 초기화되있지 않은 상태를 의미한다.

 

[symbol]

symbol은 고유한 식별자를 만들때 사용한다.

const symbol1 = Symbol('id'); 
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2);
const gSymbol1 = Symbol.for('id');
const gSymbol2 = Symbol.for('id'); 
console.log(gSymbol1 === gSymbol2);
console.log(`value : ${symbol1.description}, type: ${typeof symbol1}`);

symbol을 출력하기 위해서는 항상 ".decription"을 붙혀야한다. 

 

 

JS는 다이나믹 타이핑이다!

변수 선언시에 타입을 정해주지 않고, 실행중에 변수의 타입이 정해진다.

let text = 'hello'; 
console.log(`value : ${text} , type : ${typeof text}`);
console.log(text.charAt(0)); text = 1; 
console.log(`value : ${text} , type : ${typeof text}`);
text = '7' + 5; 
console.log(`value : ${text} , type : ${typeof text}`);
text = '8' / '2'; 
console.log(`value : ${text} , type : ${typeof text}`);

text는 처음에 'hello'라는 string 문자열로 선언이 되었지만, 다음에는 숫자 1을 넣어 number 타입으로 변하는 것을 볼 수 있다.

 

문자 + 숫자

숫자를 문자로 변환해서 문자끼리 연결 

결과 : string 

 

문자 / 문자

문자 안에 숫자인 경우, 그리고 숫자를 계산하는 연산자인경우는 숫자로 변환해서 계산합니다

결과 : number 

 

위와 같은 이유로, 런타임중에 타입에 대한 오류가 발생할 수 있음 

그래서 요즘은 타입스크립트가 부상하고 있다. ( 타입을 정확히 선언해주는 Javascript) 따로 babel을 이용한 컴파일 과정이 필요함 

[Object]

const ellie = {name: 'ellie', age: 20};
ellie.age = 21; 
console.log(`value : ${ellie}, type : ${typeof ellie}`);
console.log(`value : ${ellie.name}, type : ${typeof ellie.name}`);
console.log(`value : ${ellie.age}, type : ${typeof ellie.age}`);

 

ellie는 const로 선언이 되어서 해당 object 자체는 변경이 불가능하지만, ellie 안에 속해있는 변수 name과 age는 변경할 수 있다.

 

해당 object의 변수에 접근하기 위해서는 "." 연산자를 통해서 접근할 수 있다.

 

 

참고자료

https://www.youtube.com/watch?v=_DLhUBWsRtw&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=6&ab_channel=%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9by%EC%97%98%EB%A6%AC