1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
//1.Use strict
//added in ES 5
//use this for Valina Javascript
'use strict';
//2. Variable(변수), rw(read/write)
//let (added in ES6)
let globalName = 'global name';
//global scope : 어디서나 보인다
{
let name = 'sigcho'; //name 선언, 값 할당
console.log(name);
name = 'hello'; //값 다시 할당, mutable
console.log(name); //hello로 변경되서 나온다
console.log(globalName);
}
//block scope : 블록 밖에서는 못본다.
console.log(name); // 값이 안나온다.
console.log(globalName);
//var (이제 쓰지 말기!)
//var hoisting (어디에 선언했는지 상관없이, 선언을 가장 위로 끌어올림)
console.log(age); //값 할당 전에 출력 가능
age = 4; // 값 선언 전에 할당 가능
var age = 4; // 값 선언
name = 4; //에러가 뜬다! (이것이 정상)
let name;
{
age = 4;
var age; //블록을 철저히 무시한다, 유연성이 있으나, 프로젝트 진행하면 선언하지도 않은 변수 나타나서 힘듬
}
console.log(age); //밖에서 콘솔 출력 가능
//3. Constant, r(read only)
//use const whenever possible
//only use let if variable needs to change
const daysInWeek = 7;
const maxNumber = 5;
//Note!
//Immutable data types: premitive types(데이터 자체 변경 불가), frozen objects
//Mutable data types: all objects by default are mutable in JS(객체는 기본적으로 변경 가능)
// favor immutable data type always for a few reasons;(값 한번 할당하면 절대 바뀌지 않는다)
// -security 보안
// -thread safety 스레드 보안
// -reduce human mistakes 실수 방지
//4. Variable types
//primitive 타입 : single item | 값 자체가 저장 | 종류 : number, string, boolean, null, undefined, symbol
//object 타입 : box container | ref 저장(잠금) 내용은 변경 가능 | 종류 : function, first-class function(=함수도 변수에 할당 가능, 함수 return type된다 등)
const count = 17; // 정수, 타입 number
const size = 17.1; // 소숫점, 타입 number
console.log(`value: ${count}, type: ${typeof count}`);
console.log(`value: ${size}, type: ${typeof size}`);
//number - 특별한 숫자 값 (연산할 때 값이 variable한 것인지 알고 연산하지 않으면 에러)
const infinity = 1/0; //양의 무한대
const negativeInfinity = -1/0; //음의 무한대
const nAn = 'not a number'/2; //string 값을 숫자로 나누면 = nAn
console.log(infinity);
console.log(negativeInfinity);
console.log(nAn);
//bigInt - 거의 쓰진 않지만 최근 추가된 것, 크롬에서만 쓰임
const bigInt = 123434545385982734947238489n; // over(-2의 53승~ 2의 53승), 숫자 뒤에 n만 붙이면 bigInt로 간주됨
//string
const char = 'c'; //한가지 글자도 string 타입 할당
const brendan = 'brendab'; //여러 글자도 string 타입 할당
const greeting = 'hello' + brendan; //일반 string과 다른 변수도 string으로 붙임가능
const helloBob = `hi ${brendan}!`; //template string(literals), ``기호 사이에 ${}넣고 {}안에 변수 넣으면 값 출력된다
console.log(`value: ${helloBob}, type: ${typeof helloBob}`); //띄어쓰기도 그대로 나온다, +안써도 된다
console.log('value' +helloBob+ 'type: ' +typeof helloBob); //윗줄과 같은 의미, 불편함
//boolean
//false: 0, null, undefined, NaN, ''
//true: any other value
const canRead = true; //바로 true 나올 수도 있음
const test = 3<1; //평가한 뒤에 false 나올 수도 있음
//null (텅텅 비어있는 값)
let nothing = null; //null 지정해준다
//undefined (값이 정해지지 않음, 비었는지 있는지 조차도)
let x = undefined; // 직접 지정 가능
let x; //이 경우도 undefined
//symbol (자료구조 등에서, 고유한 식별자 필요, 동시다발적으로 일어나는 일에서 우선순위)
const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol === symbol2); //결과는 false, 다르다고 나온다
const gSymbol1 = Symbol.for('id'); //string이 똑같고 동일한 symbol을 만들고 싶다
const gSymbol2 = Symbol.for('id');
console.log(gSymbol1 === gSymbol2); //true
console.log(`value: ${symbol.description}, type: ${typeof symbol1}`); //.description을 붙여서 string타입으로 바꿔서 출력해야 한다
//object (물건 대표하는 박스형태)
const sigcho = {name:'sigcho', age:26}
sigcho.age =26;
//5. Dynamic typing: 선언할 때 타입 결정X, 동작할 때 할당된 값에 따라 값 변한다
let text ='hello';
console.log(text.charAt(0)); //첫번째 캐릭터 받아옴, hello의 h출력
console.log(`value: ${text}, type: ${typeof text}`); //string 타입
text =1; //다시 할당
console.log(`value: ${text}, type: ${typeof text}`); //number 타입
text = '7' +5;
console.log(`value: ${text}, type: ${typeof text}`); //string, 75값
text = '8'/'2';
console.log(`value: ${text}, type: ${typeof text}`); //number, 4값
console.log(text.charAt(0)); // string인줄 알고 출력했는데 number로 중간에 바꿔서 오류뜸!
//TypeScript 등장..
|
cs |
'JavaScript' 카테고리의 다른 글
드림코딩 : JS -5. 함수 선언, 매개 변수, scope, return, callback함수, arrow함수 (0) | 2020.10.16 |
---|---|
드림코딩 : JS - 4. operator, if, for loop (0) | 2020.10.16 |
Do it : JS -10. 브라우저 객체 모델 (BOM) (0) | 2020.10.14 |
Do it : JS -9. 폼과 자바스크립트 (0) | 2020.10.14 |
Do it : JS -8. 문서 객체 모델(DOM) (0) | 2020.10.12 |