[JavaScript] 바닐라JS로 크롬 앱 만들기 #1 변수(Variable), Data

변수

컴퓨터 프로그래밍에서 변수(變數, variable) 또는 스칼라(scalar)는 아직 알려지지 않거나 어느 정도까지만 알려져 있는 양이나 정보에 대한 상징적인 이름이다.

프로그래밍에서의 변수는 수학에서 말하는 변수의 개념과 완전히 일치하지 않을 수도 있다. 컴퓨터 변수의 값은 수학에서처럼 등식이나 공식의 필수적인 부분이 아니다. 컴퓨터 환경에서 변수는 반복적인 과정 안에서 이용할 수도 있다. 이를테면 한 장소의 값을 할당한 뒤 어느 곳에서 사용한 다음 새로운 값으로 다시 할당하고 같은 방법으로 다시 사용할 수도 있다. 

공식 - 위키백과, 우리 모두의 백과사전

 

출처

노마드 코더에서 바닐라 JS로 크롬 앱 만들기를 수강했습니다.

https://nomadcoders.co/

Nomad Coders

 

변수 사용법 in JS

1. Create
2. Initialize
3. Use

1. variable 예시

let 또는 var 사용

(let, var는 값 변경 가능. let 사용을 추천)

let a = 221;  // create & initialize를 동시에
let b = a-5;
a = 220;
var c = 234;
console.log(a, b, c);

/*
주석은 이렇게
넣어줍니다.
*/

 

2. constant 예시

(constant는 값 변경 불가)

> 변수 선언은 기본적으로 const로, 필요할 때만 let으로!

const a = 221;
let b = a-5;
a = 4;   // error 메시지 출력
console.log(b, a);

 

Data Type in JS

1. String : "hi"

const what = "hi";
console.log(what);

 

2. Boolean : true / false

const what = true;
console.log(what);

 

3. Number : 232

const what = 343;
console.log(what);

 

4. Float : 33.2

const what = 33.2;
console.log(what);

 

 

Organizing Data in JS

리스트를 만들고 싶을 때는 Array를, 값에 명칭(label)을 부여하고 싶을 때는 Object를 사용합니다.

 

1. Array

const daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
// 변수명은 Camel Case로 씁시다.

console.log(daysOfWeek[2]);
// array의 3번째에 있는 요소를 출력합니다.

 

2. Object

* graceInfo : Object

const graceInfo = {
  name: "Grace",
  age: 323,
  gender: "Female",
  isFamous:false
}

graceInfo.gender= "Male";

console.log(graceInfo.gender);

 

3. Array + Object

const graceInfo = {
  name: "Grace",
  age: 323,
  gender: "Female",
  isFamous:false,
  favMovies: ["Along the gods", "LOTR", "Scenes"],
  favFood: [
    {name:"Cracker", fatty:false}, {name:"Tteokbokki", fatty:true}
  ]
}

console.log(graceInfo.gender, graceInfo.favMovies[2], graceInfo.favFood[1].name);