Javascript - Variable

안녕하세요, 이제부터 프론트엔드 개발에 필수적인 자바스크립트 언어에 대해 정리하려합니다. 지금까지는 HTML/CSS를 위주로 정리하였었는데 자바스크립트까지 병합하여 정리하겠습니다. 정리하는 내용은 드림코딩 유튜브 채널에서 배운 내용을 기반으로 하고 자바스크립트 책을 참고하여 추가하였습니다! (드림 코딩 채널의 무료 강의 도움을 많이 받았습니다. 다들 시간이 많이 있으시다면 보시는 것을 추천드려요!) 내용 정리 완료 후에는 백준 및 프로그래머스 문제들을 풀어보려 합니다. 이제까지는 파이썬으로 풀었는데 자바스크립트와 친해질(?)겸 자바스크립트로 풀어보려 합니다. (파이썬이 더 풀기 쉬웠는데 ㅠㅠ)

 

오늘은 첫 시간으로 변수에 대해 정리하겠습니다. 변수란 데이터를 저장할 때 쓰이는 저장소입니다.

 

Variable(변수) - 값을 선언하고 변경이 가능 (mutable)

1. let : 자바스크립트에서 변수를 선언하는 키워드로 ES6에서 추가되었습니다.

let name = 'hoon'; // name 변수를 선언하면서 hoon이라는 값을 할당
console.log(name); //consol.log()는 콘솔창에 보이게 하기 위해 사용하는 코드입니다.
name = 'hello'; //name에 다른 값을 할당하여 값을 변경할 수 있습니다.
console.log(name);

또한 변수를 두개 선언하여 한 변수의 데이터를 다른 변수에 복사할 수도 있습니다. 하지만 같은 변수를 두번 선언하는 것은 불가능합니다.

let name1; // name1 변수를 선언
let name2 = 'Hello World!' // name2 변수를 선언
name1 = name2; // name1에 name2를 복사해준다
console.log(name1); // Hello World! 출력
console.log(name2); // Hello World! 출력

let name1 = 'Hello'; // name1 변수를 선언
let name1 = 'Hi'; // 한 변수는 두번 선언될 수 없다! [SyntaxError 발생!]

2. Block Scope : {}블럭을 이용하여 블록 안에 코드를 작성할 경우 밖에서는 블록 안 내용을 볼 수 없습니다.

쉽게 말해 {}의 안에서 정의된 변수는 {}의 밖에서 사용을 할 수 없습니다.

let globalName = 'global name';
{
    let name = 'hoon';
    name = 'hello';
    console.log(globalName); // global name 출력
    globalName = 'donghoon'; // globalName의 값을 변경
    console.log(globalName); // donghoon을 출력
    console.log(name); // hello 출력
}

console.log(name); // {}안에서 선언한 거라 밖에서 불러올 수 없음
console.log(globalName); // donghoon을 출력

3. var : 현재는 사용을 거의 안하는 키워드입니다. (문제점 : var hoisting - 값을 선언하기 전에 출력 및 할당이 가능)

또한 var는 block scope가 없어서 block안에서 선언하여도 {} 밖에서 사용이 가능합니다.

 

Constant(상수) - 값을 선언하고 나면 변경할 수 없습니다(Immutable). 보안성이 좋으며 다양한 스레드(thread)들이 값을 변경할 때 오류 발생 가능성이 낮습니다(thread safety).

const daysInWeek = 7;
const maxNumber = 5;

 

Variable types

-. primitive type : 더 이상 작은 것으로 나눌 수 없는 것 (number, string, boolean, null, undefine, symbol)

-. object type : primitive type을 묶은 것 (box container)

-. primitive type은 value 자체가 메모리에 저장되지만, object type은 크기가 크기 때문에 object를 가리키는 reference를 저장합니다.

-. function : function이 파라미터/리턴 값으로 사용될 수 있습니다.

 

이제 코드를 통해 자료형들의 타입이 뭐가 있는지 살펴보겠습니다. 

// number :  number, infinity, NaN 
const count = 17; //integer
const size =17.1; //decimal number
console.log(`value: ${count}, type: ${typeof count}`); // type : number
console.log(`value: ${size}, type: ${typeof size}`); // type : number

const infinity = 1 / 0;
const negativeInfinity = -1 / 0;
const nAn = 'not a number' / 2;
console.log(infinity); // 무한대이지만 type은 number
console.log(negativeInfinity); // 무한대이지만 type은 number
console.log(nAn); //NaN(Not a Number)이지만 type은 number

// bigInt
const bigInt = 45656789234756283548237461896423872917234555423123n;
console.log(`value: ${bigInt}, type: ${typeof bigInt}`);

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

// boolean
// false : 0, null, undefined, NaN, ''
// true : 위를 제외한 나머지 (※주의 : '0'은 true이다[string])
const canRead = true;
const test = 3 < 1;
console.log(`value: ${canRead}, type: ${typeof canRead}`); // true
console.log(`value: ${test}, type: ${typeof test}`); // 식이 거짓이므로 false

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

// undefined
let x;
console.log(`value: ${x}, type: ${typeof x}`); // type이 undefined이다.

// symbol
// object를 위한 고유한 식별자를 만들때 사용
// 출력하기위해서는 .description을 이용해 string으로 만들어서 출력
// .for을 이용하여 동일하게 정의 가능
const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 == symbol2); // false : 고유한 식별자이기 때문에 같은 id이더라도 다르다
console.log(`value: ${symbol1.description}, type: ${typeof symbol1}`); 
// 값은 id, type은 symbol이다.(값을 출력하기 위해서는 .description을 써줘야한다!)
const gSymbol1 = Symbol.for('id');
const gSymbol2 = Symbol.for('id');
console.log(gSymbol1 == gSymbol2); // true : .for을 이용하여 동일하게 정의 가능

// object, real-life object, data structure
const hoon = {name: 'hoon', age: 28};

 

마지막으로 자바스크립트의 변수는 Dynamic typing이 가능하여 type이 동적으로 변할 수 있습니다.

let text = 'hello';
console.log(text.charAt(0)); // string으로 인덱싱이 가능하다 : h출력
console.log(`value: ${text}, type: ${typeof text}`);

text = 1; // number로 변경
console.log(`value: ${text}, type: ${typeof text}`);

text = 1 + '7'; // number(1)에 문자열('7')을 더하면서 1이 문자열이 된다 => String
console.log(`value: ${text}, type: ${typeof text}`); // 17이 출력됨

text = '7' + 6; // 위와 동일하게 6이 문자열로 변경 => String
console.log(`value: ${text}, type: ${typeof text}`); // 76이 출력됨

text = '8' /  '2'; // 문자열이지만 나누기를 함으로써 자동으로 숫자로 변경하여 계산 => number
console.log(`value: ${text}, type: ${typeof text}`); // 4가 출력

언어를 이해하는 데 있어서 가장 기초적이고 필수적인 변수에 대해 정리해보았습니다. 다음 시간에는 연산자에 대해 정리해보겠습니다.