변수는
1. 선언하고 초기화한다
2. 사용한다
이 두가지로 메커니즘을 정말 간단하게 표현할 수 있다.
선언하고 초기화 한다.
보통 변수를 선언할 때 let a = 5와 a의 값을 5라고 초기화 하는 작업을 같이하기 때문에 묶어서 설명하겠다.
JavaScript에서 변수를 선언하는 데는 보통 두가지 방법이 있다.
- let : let단어 그대로 let a = 5 라는 것은 '5를 이제부터 a라고 부르자' 라는 것이다. let은 해당 변수가 바뀔 수 있다는 것을 의미한다. 따라서 let a = 5 라고 선언을 한 후 이후 코드에서 a = 7이 발견된다면 '5가 a였는 데 이제는 7을 a라고 부르자' 라는 대화가 된다는 것이다. 노마드는 변수를 선언할 때 let을 쓰는 것을 추천하지 않는 다고 했다. 만약 let a = 5라는 선언을 한후 이후 3000줄 밑에 a = 7로 바꾸었다가 이후 5000줄 밑에서 a = 10이라고 바꾸었다면 먼 훗날 이것을 찾을 때는 혼란스러울 수 있다는 것이다.
- cosnt : 그래서 const 라는 선언 방법이있다. constant (상수) 라는 단어의 줄임말로써 이또한 말그대로 변하지 않는, 안정적인 상수를 의미한다. 즉 const a = 10 이라고 선언했다면 이는 '5는 이제 a라고 부를거고 너희가 다르게 부르는건 안돼' 라는 말이 된다. 그래서 노마드는 변수를 선언할 때 왠만하면 cosnt 형으로 선언하라고 한다. 만일 내가 이 변수를 남이 고치지 못하게 하려면 const를 사용하면 좋을 것이다.
camelCase
해당 변수는 항상 소문자로 시작하며 띄어쓰기(스페이스)가 필요할때 대문자나 언더바를 넣어준다.
ex) days of week -> daysOfWeek
이건 내가 짜놓은 코드를 나중에 내가 보거나 팀에서 다른사람에게 내 코드를 보여줄 때 보기 편하기 위해서 쓰는 것 같다.
Data Type
let a = 5 라고 a라는 변수를 선언하고 초기화 할때 5는 a에 할당되는 데이터이다. 그리고 각 데이터에는 그 데이터가 어떤 데이터 인지 알려주는 다양한 '데이터 타입' 이 존재한다. 자바스크립트에는 각 데이터 타입을 10가지로 나누어 분류한다.
- 수 (Number)
- 문자열 (String)
- 부울, 불린 (Boolean)
- 객체 (Object)
- 함수 (Function)
- 배열 (Array)
- 날짜 (Date)
- 정규식 (RegExp)
- 널 (Null)
- 정의되지않음 (Undefined)
const a = true 로 선언했다면 a는 Boolean 데이터 타입의 변수가 되는 것이고, const a = "fire" 로 선언했다면 a는 String 데이터 타입의 변수가 되는 것이다. 이처럼 자바스크립트에는 다양한 데이터 타입들이 있다.
정렬
만약 일주일을 변수로 표현하고 싶다고 하자.
const mon = "Monday"
const tue = "Tuesday"
const wed = "Wednesday"
.
.
.
const sun = "Sunday"
지금까지의 생각으로는 7개의 변수를 만들어 각 변수에 String 데이터 타입의 요일을 집어 넣는 것이 최선일 것이다. 하지만 이건 일주일도 아니고 각 요일을 선언한 것일 뿐더러 너무 귀찮은 일이고, 효과적이지 않다. 하지만 이것을 리스트 형태로 하나로 묶을 수 있는 방법이 있고 그것을 Array라고 부른다.
Array
Array를 선언하는 방법은 간단하다.
const a = []
그리고 [] 사이에 내가 넣고 싶은 데이터 타입들을 집어 넣으면 된다. 이것으로 일주일을 만드는 건 손쉽다.
const daysOfWeek = ['Monday',
'Tuesday',
'Wednesday' ,
. . . , 'Sunday']
daysOfWeek라는 변수에 String 데이터 타입의 각 요일이 들어가있는 Array 데이터 타입이 할당된 것이다.
물론 각기 다른 데이터 타입들도 가능하다.
만일 우리 가족의 나이들을 보고 싶다면
const familyAge = [15, 20, 35, 40]
이렇게 Number 데이터 타입으로 이루어진 Array를 만들 수 있다.
하지만 만약 일주일에서 각각의 요일마다 먹고싶은 요리와 요리를 할 요리사를 정리하고 싶다면 어떻게 해야할까? 그럴 때는 Object라는 것을 쓸 수 있다.
Object
Object를 선언하는 방법 또한 Array와 마찬가지로 간단하다.
const a = {}
하지만 {}안에 들어가는 것은 완전히 다르다. Array가 단순히 이름들을 나열해놓은 리스트라고한다면, Object는 각 사람에 대하여 이름뿐아니라 그 사람의 정보도 담을 수 있는 프로필리스트라고 할 수 있다.
cosnt nahmir = {
age : 17,
house : false
}
nahmir의 프로필에는 age, house라는 요소가 있고 그것에 대한 정보를 알 수 있다. 그렇다면 각 정보에는 어떻게 접근 할 수 있는가?
nahmir.age, nahmir.house 와 같이 .(점)을 찍고 접근 할 수있다. nahmir가 집을 샀다면 nahmir.house = true로 nahmir의 house에 접근하여 그 값을 바꿀 수 있는 것이다. 그렇다면 각 요일의 음식과 요리사를 알 수 있는 변수는 각 요일의 정보가 들어있는 Object가 리스트 형태인 Array안에 있는 것으로 만들 수 있다.
const daysOfWeek = [
{
day : "Monday",
meal : "chicken",
cook : "me",
},
{
day : "Tuesday",
meal : "mushroom",
cook : "you",
},
{
day : "Wednessday",
meal : "rice",
cook : "together",
},
.
.
.
{
day : "Sunday",
meal : "curry",
cook : "everybody",
},
]
Array 와 Object
만일 DB에서 받아오는 데이터가 사람에 대한 프로필인데 이것을 Array 데이터 타입으로 받았다고 치자. 그렇다면
const nahmirInfo = [ ... ],
const cordaeInfo = [ ... ],
const ynbaInfo = [ ... ],
.
.
.
.
위와 같이 모든 사람에 대한 프로필을 저렇게 선언할 수는 없을 것이다. 그래서 이런 경우 daysOfWeek에서 처럼 Object로 받는 것이다. 물론 Array 형태로 받는 것이 훨씬 유용할 때도 있을 것이다. 어떠한 데이터 타입으로 선언해야 효율적인지 판단하는 것이 중요하다고 생각한다.
'개발일지 > Vanilla JS' 카테고리의 다른 글
| [노마드 코더 Vanilla JS] Document (1) | 2020.05.02 |
|---|---|
| [노마드 코더 Vanilla JS] 함수 (Function) (1) | 2020.05.02 |
| [노마드 코더 Vanilla JS] 왜 Vanilla JS를 배워야 할까? (5) | 2020.04.29 |