[Front end] 바닐라 자바스크립트 기초 #1 Variable, Data Types

 

기초적인 자바스크립트에 대해 이야기해보자. vairable, object, function을 알고 있다면 너무 쉬울 수도 있다. 이제 막 기초를 배우는 분들에게 필요한 내용이다.

우선 자바스크립트는 웹에 쓰이는 하나뿐인 프로그래밍 언어이다. Backend는 언어 선택지가 많은 반면 Frontend를 한다면 쓸 수 있는 언어는 하나뿐이다. 바로 자바스크립트이다. Frontend를 하는 사람은 자바스크립트를 알고 모두 같은 언어로 이해하고 이야기한다. 웹은 계속 빠르게 발전하고 자바스크립트도 빠르게 발전한다. 자바스크립트를 한다면 할 수 있는 일이 더 많아진다는 이야기 일 수도 있다.

자바스크립트에서 ES5, ES6을 들어본 적이 있을 것이다. 자바스크립트는 중앙 집중화가 되어 있다. 그래서 업데이트를 하면 모든 브라우저에서 작동을 하게 된다. 크롬, 파이어폭스, 익스플로러 등 각자 자기 방식대로 브라우저를 만든다. 단 자바스크립트 ECMAScript라는 매뉴얼에 의해서 말이다. 서로 같은 결과를 이루려고 노력하지만 미묘한 차이는 있다.

여기서 바닐라 자바스크립트에 대해 말하면, 자바스크립트의 한 종류로 라이브러리 없는 것을 의미한다. 날것 그대로의 자바스크립트라고 이해하는 것이 편한다. 조리되어 있거나 가공되지 않은 날것의 자바스크립트 말이다.

 

Variable(let, const)

자바스크립트에서 변수를 할당할 수 있는 키워드이다. ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드였다. ES6에서는 var이 가지는 단점을 보완하기 위해 let과 const를 도입하게 되었다.

let은 재할당이 자유롭지만 const는 재할당이 금지된다. const는 또한 반드시 선언과 동시에 할당이 이루어져야 한다. const는 상수라는 뜻이다. 안정적이라고 해석할 수 있다.

let a = 100;
b = a - 50;
a = 30;
console.log(a, b);

const a = 100;
b = a - 50;
a = 30;
console.log(a, b);

Assignment to constant variable. 에러가 발생하였다. const로 선언된 변수에 재할당을 시도할 때 나타나는 에러이다. 변수를 선언할 때는 기본적으로 const를 사용하고 let은 재할당이 필요한 경우에만 한정해 사용하는 습관을 길러야 한다. 생각보다 객체를 재할당하는 경우는 드물다. let을 남발하여 의도치 않은 재할당 방지하기 위해 const를 기본적으로 사용하자.

 

Data Types

자바스크립트에서 사용할 수 있는 데이터 타입에 대해 정리해 보자. String, boolean, Number, float 등이 있다.

// Data Types
const whatString = 'reference';
const whatBoolean = true;
const whatNumber = 123;
const whatFloat = 12.3;

console.log(whatString);
console.log(whatBoolean);
console.log(whatNumber);
console.log(whatFloat);

String은 "" 또는 ''로 묶어주면 String 타입이다. "true" 또한 String이다. boolean은 true, false를 가지는 타입이다. Number는 숫자형 타입이며, float은 소수점 타입을 말한다.

 

Data with Arrays

데이터 타입을 정렬할 수 있는 방법에 대해 알아보자. 하나는 Array이며 또 다른 하나는 Object이다. Array는 데이터를 리스트와 같이 저장하는 곳이다.

const mon = 'Mon';
const tue = 'Tue';
const wed = 'Wed';
const thu = 'Thu';
const fri = 'Fri';
const sat = 'Sat';
const sun = 'Sun';
console.log(mon, tue, wed, thu, fri, sat, sun);

const dayOfWeek = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
console.log(dayOfWeek);
console.log(dayOfWeek[1]);
console.log(dayOfWeek[10]);

요일이 각각 변수로 할당이 되어 있고 모든 요일을 조회한다고 가정했을 때 나열을 해서 조회가 가능하다. 하지만 비효율적이다. 이럴 때 하나로 묶어 사용하는 것이 Array이다. 콤마로 구분되어 Array 요소들을 보여준다. String 이외에도 어떤 Data Types이 와도 Array를 구성할 수 있다. 또한 Array에 요소에 접근하고 싶다면 인덱스를 통해 접근하면 된다. 범위가 벗어날 경우에는 undefined가 반환된다.

 

Data with Objects

Object와 Array의 다른 점은 Object에는 Key, Value로 구성된다는 것이다. Array는 데이터를 정렬된 방식으로 접근할 수 없다. 단순히 순서에 의해 나열했을 뿐이다. 정보를 담는다면 일일이 몇 번째 있는지 기억해야 한다. 효율적이지 않은 방법이다.

const arrayInfo = ['reference', 32, 'Korea'];
console.log(arrayInfo);
console.log(arrayInfo[1]);

const objectInfo = {
  name : 'reference',
  age : 32,
  country : 'Korea',
  favAnimal : ['dog', 'cat'],
  favFood : [
    {
      name : 'hamburger'
    },
    {
      name : 'pizza'
    },
    {
      name : 'rice noodle'
    }
  ]
};
console.log(objectInfo);
console.log(objectInfo.age);

objectInfo.age = 40;

console.log(objectInfo.age);

objectInfo = true;

Object는 Key를 지정하여 Value값을 담는다. objectInfo는 Object에 다양한 정보를 담고 있다. 여기서 기억해야 할 것은 자바스크립트 문법과 규칙이다. Array와 Object의 선언, 접근 방법 등이다.

위에서 const는 상수라고 하였는데 objectInfo를 const로 선언하였다. 이후 중간에 objectInfo.age = 40; 를 통해 값을 변경하였다. Object 타입의 변수에 참조 변수에 대해서는 값이 변경이 가능하다. objectInfo = true; 를 통해 const로 선언된 변수에 재할당이 불가하다는 것을 에러를 통해 다시 한번 확인할 수 있다.