오늘도 엘리슨생님의 3강 강의를 듣고 왔습니다!
한번 정주행 완료하고 다시 복습하는 마음으로
블로그에 공부 내용을 정리해보겠습니다!
1. let vs var
<js변수를 선언할 수 있는 키워드는 let 하나이다.>
let은 ES6에서 추가되었기 때문에 비교적 최근에 추가되었다.
ES6는 메이저 브라우저에서 모두지원된다.(단, 인터넷 익스플로어는 지원 안됨)
그 전까지는 var을 썼었다. but, 쓰면 안됨
그 이유로는 선언도 하기 전에 값 할당 할 수 있고,
출력도 undefined로 가능하기 때문이다.
다음의 코드를 확인해보자.
a=10;
console.log(a);
var a;
console.log(a);분명 a라는 변수를 선언하기도 전인데 10이 잘 나오는 모습이다.
다음과 같이 변수 할당도 전에 출력결과가 나오는 것도 볼 수 있다.
console.log(a);
var a;
이런 현상을 var hoisting이라고 한다.
항상 제일 위로 선언을 끌어올려주는 것을 말한다.
그 반면에 let으로 변수를 만들면 위와 같은 상황은 절대 불가능하다.
a=10;
console.log(a);
let a;
console.log(a);console.log(a);
let a;
let으로만 바꿔주었을 뿐인데 180도 달라진 상황 ㅋㅋㅋㅋㅋ
2. 전역변수 vs 지역변수
심지어 var은 블록을 무시한다.
먼저 정상적으로 움직이는 블록문을 보도록 하자.
let global_name='globalName';
{
let name='ellie';
console.log(name);
console.log(global_name);
}
console.log(name);
console.log(global_name);
블록 밖에서 선언된 변수인 global_name은 전역변수,
블록 안에서 선언된 변수인 name은 지역변수이다.
결과를 보면 블록 안에서는 전역변수는 블록 안까지 즉, 어디서든 영향을 미치는 것을 알수 있다.
그것에 비해 지역변수는 블록 밖을 나가면 아예 출력이 되지 않는다.(영향이 사라진다.)
그럼 지역변수 name을 let 변수에서 var 변수로 살짝쿵 var로 바꾸어보자
let global_name='globalName';
{
var name='ellie';
console.log(name);
console.log(global_name);
}
console.log(name);
console.log(global_name);
블록 밖에서도 name 값이 나오는 현상을 볼 수 있다.
<알아둬야 할 지식>
글로벌한 변수들 즉, 전역변수들은 어플리케이션이 실행되는 순간부터 끝날 때까지 항상 메모리에 탑재된다.
그러므로 최소한으로 써야 메모리를 아낄 수 있다!
class나 함수 for loop등 필요한 부분에서만 정의해서 쓰면 좋다.
3. CONSTANTS
constants 값은 한 번 할당하면 절대 안바뀐다.
즉, immutable 타입이라고도 한다.(const)
반대로 값이 계속 변경될 수 있는 것을 mutable데이터 타입이라고함
예시로 바이러스도 mutation을 통해서 유전자의 서열을 바꾸어나감
다음과 같이 daysInweek라는 const 타입의 변수에 7을 할당한 후
5로 바꾸어보면 어떤 일이 일어날지보자!
const daysInWeek = 7;
console.log(daysInWeek);
daysInWeek=5;
console.log(daysInWeek);
값을 바꾸면 타입에러를 볼 수 있다.
<그렇다면 const가 좋은 이유는 뭐가 있을까?>
1. 보안상에 이유
: 해커들이 임의로 값을 변경하는 것을 방지할 수 있다.
2. thread safety
: 어플리케이션이 실행되면 한 가지의 프로세스가 할당이된다.
그럼 프로세스 안에서는 여러가지의 스레드가 동시에 돌아가면서 어플리케이션을 효율적으로 빠르게 동 시 에 동작할 수 있도록 도와준다.
하 지 만!
동시에 값을 변경한다는 것은 위험하기 때문에 값이 변하지 않는 것을 사용하는 게 좋다.
3. 코드변경 시 그 실수를 방지 가능하다.
: 많은 프로그래머들이 협업을 할 때 범할 수 있는 실수를 방지할 수 있다.
3. primitive type
프리미티브 타입이란?
더이상 나눠지지 않는 한가지의 아이템을 말한다.
: number, string, boolean, null, undefined, symbol 등이 있다.
object란?
프리미티브 타입 즉, 싱글 애들을 묶어서 한 단위로 관리할 수 있게 해준다.
물건과 물체를 대체할 수 있는 박스형태라고 보면 된다.
const ellie = {name: 'ellie', age:20};
console.log(ellie.age);
ellie.age=21; //이렇게 변경 가능
console.log(ellie.age);다음과 같이 오브젝트는 여러타입을 한 단위로 묶어서 관리 할 수 있다.
ellie는 const타입이라 그대로 접근하면 값을 변경할 수 없다.
하지만 const 타입 안에 프리미티브 타입에 접근하면 변경가능하다.
' . '으로 접근하여 값을 바꾸자. (ellie.age)
function도 다른 데이터 타입처럼 변수에 할당 가능하다.
인자로도, 리턴타입으로도 전달 가능하다.
이런 특징을 first class function이라고 한다.
js는 number하나면 숫자 끝 몇 바이트를 써야하는 지 신경안써도 된다.
심지어 js에서는 타입이 다이나믹하게 결정되기 때문에 let이나 const로 써도 된다. 아래는 그 예시이다.
const count = 12;
const size = 17.1;
console.log(`value : ${count}, type: ${typeof count}`);
console.log(`value : ${size}, type: ${typeof size}`);
4. 조심해야 할 변수할당
1. 양의 무한대, 음의 무한대
const infinity = 1/0;
const negativeIntinity = -1/0;
console.log(infinity);
console.log(negativeInfinity);
다음과 같이 오류가 보여진다.
2. 숫자가 아닌 것을 숫자로 나눌 때
const nAn='not a number'/2;
console.log(nAn);
여기도 오류가 속출 ㅎ
3. bigInt, 엄청 큰 숫자
숫자는 -2의 53승 ~ 2의 53승까지 표현된다.
그래서 bigInt가 나타났다!
크롬이랑 파이어폭스에서만 지원이 되는 이유는 최근에 추가되었기 때문이다.
const bigInt=1234567890123456789012345678901234567890n;
console.log(`value : ${bigInt}, type: ${typeof bigInt}`);
Number.MAX_SAFE_INTEGER;
5. STRING
다음은 문자열에대해 알아보자.
const brenden = 'brenden';
const greeting='hello'+brenden;
console.log(`value : ${greeting}, type: ${typeof greeting}`);
const helloBob=`hi ${brenden}!`;//template literals(string)
console.log(`value : ${helloBob}, type: ${typeof helloBob}`);
다음과 같이 const나 let으로 간단히 표현이 가능하다.
문자열끼리 합칠 때에는 ' + '로 변수와 문자열끼리 합칠 수 있다.
const greeting='hello'+brenden;혹은 template literals라고 불리는 것을 이용할 수 있다.
const helloBob=`hi ${brenden}!`;' ` '이 물결 표시 부분에 있는 쿼테이션을 사용하여 그 안에 ${변수}형식으로
넣어서 사용할 수도 있다.
6. BOOLEAN
참과 거짓은 다음과 같이 나눌 수 있다.
false: 0 , null, undefiend, NaN, ' '
true: any other value(그외에 모든 변수)
const canRead=true;
const test = 3<1;
console.log(`value : ${canRead}, type: ${typeof canRead}`);
console.log(`value : ${test}, type: ${typeof test}`);
다음과 같이 값과 타입을 볼 수 있다.
7. NULL
let nothing = null;
console.log(`value : ${nothing}, type: ${typeof nothing}`);
다음과 같이 null 이라고 직접 제시하면 null을 담은 변수가 된다.
8. undifined
let x = undefined;//혹은 아무것도 할당 x
console.log(`value : ${x}, type: ${typeof x}`);또한 아무것도 없는
let x;또한 undefined 변수라고 할 수 있다.
9. SYMBOL
<심볼은 어떤 상황에서 쓸까요?>
맵이나 다른 자료구조에서 고유한 식별자가 필요할 때
동시에 다발적으로 퀀커런트하게 일어나는 코드에서 우선순위를 주고싶을 때
간혹 string을 이용해서 쓰는 경우도 있는데, 동일한 string을 썼을 때 동일한 심볼이 되기 때문에 유의해야한다.
심볼은 같은 id로 만들었어도 다르다. 다음의 예시를 보자.
const symbol1=Symbol('id');
const symbol2=Symbol('id');
console.log(symbol1==symbol2);
같지 않다는 결론!
하지만 같은 심볼을 만들고 싶을 때가 있다.
그럴 땐!
const gsymbol1=Symbol.for('id');
const gsymbol2=Symbol.for('id');
console.log(gsymbol1==gsymbol2);.for을 이용하자
심볼을 출력하기 위해선 string으로 바꾼 후 출력해야 에러가 안난다.
const symbol1=Symbol('id');
const symbol2=Symbol('id');
console.log(symbol1==symbol2);
console.log(`value : ${symbol1}, type: ${typeof symbol1}`);
다음과 같은 상황일 경우에는 출력부분에 .description을 붙여보자!
console.log(`value : ${symbol1.description}, type: ${typeof symbol1.description}`);
결과가 잘 나오는 모습 ^_^
10. dynamically VS statically
c, 자바언어는 statically typed language이다.
즉, 변수를 선언할 때 어떤 타입인지 결정해서 타입을 같이 선언한다.
자바스크립트는 dynamically typed language이다.
즉, 선언할 때 어떤 타입인지 선언하지 않는다.
프로그램이 동작할때 할당된 값에 따라서 타입이 변경가능하다.
JS는 프로토타입할 수 있을 땐 유용하나, 규모가 있는 프로젝트는 다이나믹 타입은 발등에 불똥이 떨어질 수 있다.
그 이유는 아래의 예시를 보자.
let text = 'hello';
console.log(text.charAt(0));//h
console.log(`value : ${text}, type: ${typeof text}`);
text=1;
console.log(`value : ${text}, type: ${typeof text}`);
text='7'+5;
console.log(`value : ${text}, type: ${typeof text}`); // string으로 타입변환
text = '8'/'2';
console.log(`value : ${text}, type: ${typeof text}`);//number로 타입 변환
console.log(text.charAt(0));//에러가 런타임으로 발생
처음 코드부터 순차적으로 보면,
text라는 let변수는 문자열로 시작했다.
그래서 .chatAt이라는 명령어에 문자열 0번째 자리가 도출되었다.
하지만 let 타입의 text변수는 숫자로 할당해주면 number로 타입이
변경된다.
그럼 만약 숫자와 문자열을 더한 결과는?
재밌게도 문자열 타입으로 연산하여 타입이 변환된다.
그럼 문자열을 나눌 때도 문자로 인식할까?
아니다. 문자열은 나눌 수 없는데 어떻하지? 라고 하며 숫자타입으로 바뀐다.
그 결과로 .chatAt이라는 명령어에 문자열 0번째 자리가 도출되지 않았다.
정말 다양한 값을 입력함에 따라 위험해질 수 있는 다이나믹 언어.
그래서 ts 타입 스크립트가 등장 한 것!
ts란?
js위에 타입이 올려진 언어이다.
js를 충분히 배우고 ts로 넘어가도 된다.
ts는 브라우저가 이해할 수 있는 언어로 트랜스컴파일러를 이용해야하므로
브라우저가 이해하는 언어인 js를 먼저배우자
와... 한 강에 정말 유익한 정보를 가득담고 있어서
끝이 없는 지식...
정말 오늘도 많은 것을 배워간다. ㅜㅜ
'프로그래밍 언어 > Javascript' 카테고리의 다른 글
| 드림코딩 엘리와 함께하는 자바스크립트 기초 다지기 : 번외. 반응형 헤더 만들기 위해 필요한 요소들, 프로젝트 할 때 필수 사이트 모음 (0) | 2021.11.08 |
|---|---|
| 드림코딩 엘리와 함께하는 자바스크립트 기초 다지기 : 4. 반복문, operator (0) | 2021.11.07 |
| 드림코딩 엘리와 함께하는 자바스크립트 기초 다지기 : 2. async vs defer (0) | 2021.11.05 |
| 드림코딩 엘리와 함께하는 자바스크립트 기초 다지기 : 1. Node.js 다운받기 (0) | 2021.11.04 |
| 인프런으로 자바스크립트 기초 다지기 : 3. 콜백함수 & 익명함수 (2) | 2021.07.26 |
