2023.01.28
0. 시작하기전
오늘은 자바스크립트의 데이터타입, 연산자, 제어문에 관해 공부해보자 :)
1. 데이터 타입
자바스크립트는 원시 타입과 객체 타입으로 분류할 수 있다.
✔ 원시 타입 - 숫자, 문자열, 불리언(boolean), undefined, null, 심벌(symbol)
✔ 객체 타입 - 객체, 함수, 배열
❓ 데이터 타입이 필요한 이유
1. 값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해
2. 값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해
3. 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해
1-1 숫자 타입
✔ 자바스크립트는 모든 수를 실수로 처리한다.
✔ 숫자 타입의 특별한 세가지 값
1. 양의 무한대: Infinity ex) 10/0
2. 음의 무한대: -Infinity ex)10/-0
3. 산술 연산 불가:NaN
1-2 문자열 타입
✔ 문자열은 작은따옴표(''), 큰따옴표(""), 백틱(``)으로 텍스트를 감싼다.
(일반적으로 작은따옴표 사용)
✔ 따옴표로 감싸지 않으면 식별자로 인식
🎯 템플릿 리터럴
✔ 멀티라인 문자열, 표현식 삽입, 태그드 템플릿등 편리한 문자열 처리 가능을 제공
✔ 런타임에 일반 문자열로 변환되어 처리됨
✔ 일반적으로 백틱(``)사용
-
멀티라인 문자열
✔ 일반 문자열에서는 개행이 허용되지 않음 -> 이스케이프 시퀀스 사용
✔ 이스케이프 시퀀스
＼0 - null
＼b - backspace
＼f - 폼 피드
＼n - 개행, 다음 행으로 이동
＼r - 개행, 커서를 처음으로 이동
＼t - 탭(수평)
＼v - 탭(수직)
＼uXXXX - 유니코드
＼' - 작은따옴표
＼" - 큰따옴표
＼＼ - 백슬래시 -
표현식 삽입
✔ +연산자는 피연산자 중 하나 이상이 문자열이면 연결 연산자로 동작
✔ 반드시 템플릿 리터럴에서만 사용 -> 일반 문자열에서의 표현식 삽입은 문자열로 취급
var first = 'Ji-Yoon';
var last = 'Lee';
console.log(`My name is ${first} ${last}.`); // My name is Lee Ji-Yoon.1-3 불리언(boolean) 타입
✔ 논리적 참(True), 거짓(False)를 나타냄
1-4 undefined 타입
✔ undefined가 유일
1-5 null 타입
✔ null이 유일
✔ 변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않음을 의미
1-6 심벌(symbol) 타입
✔ 다른 값과 중복되지 않는 유일무이한 값
// 객체 생성 symbol 함수 사용
var key = Symbol('key'); //심벌값 생성
console.log(typeof key);
var obj = {}; // 객체 생성
obj[key] = 'value'; //이름이 충돌할 위험이 없는 유일무이한 값을 프로퍼티 키로 사용
console.log(obj[key]); //value1-7 객체 타입
✔ 데이터 타입 이외의 값은 모두 객체 타입
✔ 자바스크립트를 이루고 있는 거의 모든 것이 객체
2. 연산자
연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교등을 수행해 하나의 값을 만든다.
부수효과가 있는 연산자는(=,++,--,delete)이다.
2-1 산술 연산자
✔ 산술 연산이 불가능한 경우 NaN 반환
✔ 이항 산술 연산자(+,-,*,/,%)
✔ 단항 산술 연산자(++,--,+,-)
++와 --는 부수 효과가 있다. (부수효과 - 피연산자의 값을 변경)
var x = 5, result;
result = x++;
console.log(result,x); // 5, 6
result = ++x;
console.log(result,x); // 7, 7
result = x--;
console.log(result,x); // 7, 6
result = --x;
console.log(result,x); // 5 5숫자 타입이 아닌 피연산자에 +,- 연산자를 사용하면 피연산자를 숫자 타입으로 변환하여 반환
✔ 문자열 연결 연산자
+연산자는 피연산자 중 하나 이상이 문자열이면 연결 연산자로 동작
그 외에는 산술 연산자로 동작
2-2 할당 연산자
✔ 모두 부수효과가 있다.
✔ =, +=, -=, *=, /=, %=
2-3 비교 연산자
✔ ==(동등 비교, 값이 같음),===(일치 비교, 값과 타입이 같음),!=,!==
✔ 동등 비교 연산자는 좌항과 우항을 비교할때 암묵적 타입 변환을 통해 먼저 타입을 일치 시킨 후 같은 값인지 비교함
✔ 일치 비교 연산자를 사용하는 것이 좋음
✔ NaN은 자신과 일치하지 않은 유일한 값 (NaN===NaN // False)
-> Number.isNaN을 사용하여 숫자가 NaN인지 비교
✔ 대소 관계 비교 연산자 (>,<,>=,<=)
2-4 삼항 조건 연산자
✔ 조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값
✔ 표현식인 문
var x= 10;
var result = x % 2 ? '홀수' : '짝수';
console.log(result); //짝수2-5 논리 연산자
✔ ||(or), &&(and), !(not)
2-6 쉼표 연산자
✔ 왼쪽 피연산자 부터 차례대로 평가하고 마지막 피연산자의 평가 결과를 반환
var x,y,z;
x=1, y=2, z=3; //32-7 그룹 연산자
✔ 연산자 우선순위가 가장 높음
✔ ( )
2-8 typeof 연산자
✔ 피연산자의 데이터 타입을 문자열로 반환
✔ string, number, boolean, undefined, symbol, object, function중 하나 반환
✔ null 은 object를 반환
-> null 타입인지 확인할때는 일치연산자(===)를 사용
var foo = null;
typeof foo === null; //false
foo === null; //true2-9 지수 연산자
✔ **
✔ Math.pow(2,0) = 1
✔ 음수 거듭제곱의 밑은 ()로 묶기
✔ 이항 연산자 중에서 우선순위가 가장 높음
2-10 그외 연산자
- ?. - 옵셔널 체이닝 연산자
- ?? - null 병합 연산자
- delete - 프로퍼티 삭제
- new - 생성자 함수를 호출할 때 사용하여 인스턴스를 생성
- instanceof - 좌변의 객체가 우변의 생성자 함수와 연결된 인스턴스인지 판별
- in - 프로퍼티 존재 확인
3. 제어문
조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용한다.
3-1 조건문
✔ if ~ else문
if(조건식1){
//조건식1이 참이면 코드 블럭 실행
}else if(조건식2){
//조건식2가 참이면 코드 블럭 실행
}else{
//조건식1과 2 모두 거짓이면 코드 블럭 실행
}✔ switch문
switch(표현식){
case 표현식1:
switch 문의 표현식과 표현식1이 일치하면 실행될 문;
break;
case 표현식2:
switch 문의 표현식과 표현식2가 일치하면 실행될 문;
break;
default:
switch 문의 표현식과 일치하는 case문이 없을 때 실행될 문;
}3-2 반복문
✔ for문 - 반복 횟수가 명확
for(변수 선언문 또는 할당문; 조건식 ;증감식){
조건식이 참인 경우 반복 실행될 문;
}for(;;){...} // 무한루프✔ while문 - 반복 횟수 불명확
while(조건식){
반복실행문;
break; //탈출조건
}while(true){...} // 무한루프✔ do ~ while문 - 무조건 한 번 이상 실행
do{
반복실행문;
}while(조건식);3-3 break문
✔ 코드 블록을 탈출할 수 있게 해줌
3-4 continue문
✔ 반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동
✔ break문 처럼 반복문을 탈출하지는 않음
4. To be continued..
오늘은 자바스크립트의 데이터 타입, 연산자, 제어문에 관해 공부했다.
작심삼일 되지 않도록 마음을 잘 잡아야겠다 :)
이전 포스트 JavaScript-1 https://velog.io/@jiyoon2/JavaScript
다음 포스트 JavaScript-3 https://velog.io/@jiyoon2/JavaScript-3
