2일차
연산자와 제어문
단어
- 연산자(Operator) : 어떠한 기능을 수행하는 기호
- 피연산자(Operand) : 연산자의 작업 대상
연산자의 종류
- 단항 연산자: +, ``, (type), ++, -, ~, !
- 이항 산술 연산자: +, , , /, %, <<, >>, >>>
- 이항 비교 연산자: >, <, >=, <=, ==, !=
- 이항 논리 연산자: &&, ||, &, ^, |
- 삼항 연산자: ? :
- 대입 연산자: =, operator=
연산자의 우선순위
- 괄호의 우선순위가 가장 높음
- 산술 > 비교 > 논리 > 대입
- 단항 > 이항 > 삼항
- 연산자의 연산 진행방향은 왼쪽에서 오른쪽
- 단항, 대입 연산자는 오른쪽에서 왼쪽
단항 연산자 ++, —
- ++ : 증가 연산자, 피연산자의 값 +1
- -- : 감소 연산자, 피연산자의 값 -1
var num1 = 10;
var num2 = num1++;
결과값 : num1 = 11, num2 = 10이 됩니다.
이유 : num1++은 앞의 실행 후 증가한다. 반대로 ++num인 경우 증가 후
실행이 됩니다.
Ex)
var num1 = 10;
var num2 = ++num1;
결과값 : num1 = 11, num2 = 11이 됩니다.
마이너스도 똑같이 적용하여 증가를 감소로 바꾸기만 하면됩니다!
논리 부정 연산자!
불리언 타입의 피연산자를 반대로 바꾼다.
var str1 = true; // str1은 true라는 값을 가지고 있다.
var str2 = !str1
// !가 붙으면 값을 반대로 만들어준다.
// 참에 느낌표를 붙여 반대값인 거짓을 str2에 대입하게 됨
결과값 : str1 = true, str2 = false값이 된다
비트 시프트 연산자 (<<, >>)
- Left Shift Operator
ex1) var num = 2 // 2는 2진수로 0010
num << 2 // left shift를 2만큼 움직이면 1000으로 바뀌고
결과값 : num = 8이 된다.
2진수 참고 사진
설명 : 숫자 2가 0010인데 << 2를 하면 1을 왼쪽으로 2칸만큼 움직이라는 뜻이다. 그러므로 0010 << 2는 1000이 된다.
- Right Shift Operator
var num = 9; // 2진수로 1001이 된다.
num >> 2; // 0010이된다.
결과값 : num = 2가 된다.
결론 : Left Shift는 늘어나지만 Right Shift는 줄어든다.
비트 연산자( |, &, ^)
피연산자를 비트단위로 연산한다. 실수형을 제외한 모든 기본형에 사용이 가능하다.
- OR연산자(|) : 피연산자 중 어느 한 쪽이 1이면 1이다.
- AND연산자(&) : 피연산자 양 쪽이 모두 1이면 1이다.
- XOR(^) : 피연산자가 서로 다를 떄 1이다.
| x | y | x | y | x & y | x ^ y | | --- | --- | --- | --- | --- | | 1 | 1 | 1 | 1 | 0 | | 1 | 0 | 1 | 0 | 1 | | 0 | 1 | 1 | 0 | 1 | | 0 | 0 | 0 | 0 | 0 |
식2진수10진수
| 3 | 5 = 7 | 0000001100000101 |
| 00000111 | 7 | |
| 3 & 5 = 1 | 0000001100000101 | 35 |
| 00000001 | 1 | |
| 3 ^ 5 = 6 | 0000001100000101 | 35 |
| 00000110 | 6 |
제어문
- if(조건식)문
var num = 2; // num에 2를 대입 if(num === 2){ // 조건문에 num이 2랑 같은지 비교 true면 실행 false면 밖에 return이 실행 return document.write("num은 2이다."); } return document.write("num은 2가 아니다."); 결과 : num은 2이다. - 정의 : 만약 조건식이 참이면 실행해라. 거짓이면 밖에 걸 실행한다.
- if(조건문) ~else문
var num = 2; // num에 2를 대입 if(num === 2){ // 조건문에 num이 2랑 같은지 비교 true면 실행 false면 else의 return이 실행 return document.write("num은 2이다."); }else { return document.write("num은 2가 아니다."); } 결과 : num은 2이다. - 정의 : 만약 조건식이 참이면 실행해라. 거짓이면 else를 실행한다.
- switch(조건변수) ~case 값 : 실행문
예제1) var num = 2; switch(num){ case 1 : return document.write("num은 1이다."); break; case 2 : return document.write("num은 2이다."); break; default : return document.write("모르겠다"); } 결과값 : num은 2이다. 설명 : 조건변수가 num이고 num의 값은 2이다. 그래서 case중 같은 값을 가지고 있는 case의 값이 2를 가지는 case 2가 실행된다. 추가설명 : break문이 없으면 멈추지 않아서 실행이 되고 default는 위의 case가 다 넘어가면 실행이 된다. - 정의 : 조건변수가 case의 값과 같으면 실행문이 실행된다!
- for(초기화 변수; 조건식; 증감식)문
for( 초기화 변수; 조건식; 증감식 ){ 실행문 }예제1) *****를 만들기 var str = "*"; var str2 = ""; for(var i = 1; i < 6; i++){ // i는 1이고 i가 6보다 작으면 1씩 커지면서 반복해라 str2 += str; // str2 += str 은 str2 = str2 + str과 같은 뜻을 의미한다. } 결과값 : '*****' 설명 : i가 1일때 한번 실행되고 i = i +1(=> i++)한뒤 i는 2인데 i가 6보다 작기때문에 실행문이 실행된다. 이 것을 6보다 같거나 클때까지 반복한다. 예제2) ***** ***** ***** 를 만들기 var str = "*"; for( var j = 1; j < 4; j++ ) { var str2 = ""; for( var i = 1; i < 6; i++ ){ str2 += str; } document.write(str2 + "<br>"); } 결과값 : '*****' '*****' '*****' 이 된다. 설명 : 첫번째 반복문이 실행이 된다. => str2는 빈문자열을 준다. // 1번 루트 => 두번째 반복문이 실행이 된다. => str2 = str2 + str이 실행 => document.write문이 실행이된다. => j = j+1을 한 후 j값이 4보다 작은지 확인하고 작으면 다시 1번 루트로 돌아가 반복한다. - 정의 : for는 반복문입니다. 특정 조건만큼 변수를 증감하고 실행문을 반복합니다.
- while(조건식){ 실행문 }
ex) var num = 2; while(num < 4){ document.write(num + " "); num++; } 결과문 : 2 3 설명 num은 2이다. => num이 4보다 작냐 true => document.write문 실행 화면에 2출력 => num = num + 1 => 다시 조건문으로 돌아간다. 이 조건문이 false일 때 까지 반복한다. => ... num이 증가하여 4가되니 false가 되고 반복문은 종료 => 화면에 나온 결과 : 2 3 - while문 정의 : 조건식이 참이면 실행문이 실행되고 거짓이면 실행문이 실행이 안된다.
- do ~while문
ex1) var num = 2; do{ document.write(num + " "); num++; } while(num < 4); 결과문 : 2 3 설명 num은 2이다. => document.write문 실행 화면에 2출력 => num = num + 1 => num이 4보다 작냐 true => 이 조건문이 false일 때 까지 반복한다. => ... num이 증가하여 4가되니 false가 되고 반복문은 종료 => 화면에 나온 결과 : 2 3 ex2) var num = 1; do{ document.write(num + " "); num++; } while(num < 1); 결과물 : 1 이유 : 최초 1회는 무조건 실행 - 정의 : while문과 같지만 do ~while은 무조건 최초 1회는 실행한다.
출처
'프론트엔드 공부한 거 정리하는 장소' 카테고리의 다른 글
| Electron 프레임워크 기술에 대한 소개 및 구현? (0) | 2023.08.16 |
|---|---|
| 자바스크립트 5일차 배열 (0) | 2023.05.12 |
| 자바스크립트 4일차 데이터 타입과 객체 (2) | 2023.05.11 |
| 자바스크립트 3일차 함수선언과 호출 (0) | 2023.05.10 |
| 자바스크립트 1일차 정리 (1) | 2023.05.08 |