+) 난수 발생시키는 방법
이건 자바스크립트의 기본이라기 보다 그냥 컴파일 언어의 기본이라고 할 수 있겠다.
- 변수를 선언할 때 한줄에 여러개를 동시에 선언 할 수 있다.
let message = "Hello", age = 25, num = 1;
//////////////////////////////////////////////
let message = "Hello";
let age = 25;
let age = 1;
주석 라인을 기준으로 위와 아래가 같은 코드이다.
물론 한줄에 선언이 가능하지만 가독성이 좋지 않아 저렇게 짜지는 않을듯
그리고 자바스크립트에 한한 경우이긴 한데 자료형을 명시해주지 않아도 알아서 잡아준다
userName = "홍길동";
이렇게 써도 오류가 나지 '는' 않는다. 하지만 써주는게 좋다
그리고 변수의 네이밍 주의사항이다.
생각보다 변수의 이름을 지을때 일관성이 없으면 본인도 협업하는 사람도 힘들다 주의하자
변수의 이름을 지을때 주의사항
1. 누가봐도 알아볼 수 있게 지을 것
2. 변수명은 한글로 지으면 안된다.
3. 알파벳의 대소문자를 구분한다. 즉 apple 과 Apple은 다른 변수라는 뜻이다.
4. 풀네이밍(나만 알 수 있게 줄여쓰지 않는다. 나중에 본인도 못알아봄)
5. 언더바 ' _ '는 문자 중간에 사용가능하지만 하이픈 ' - '은 사용 불가능
6. 이름 맨앞자리에 숫자가 올 수 없다.(그리고 왠만하면 num1, num2, num3 이런식보다 )
7. 에어비앤비 코딩컨벤션 참고 => 이름 및 참고하면 좋은 여러 규칙을 찾아볼 수 있다.
이항산술연산자
+ , - , * , /, %
: 단순연산을 할때 쓰는 기호들이다. 이전 글에서 %와 / 의 차이를 언급했었었는데
% : 나누기 연산 후 나머지만 취하는 것
/ : 나누기 연산 후 몫만 취하는 것 (자바스크립트에서는 정수, 실수 둘다 number라는 자료형으로 묶어서인지 실수부분까지 같이 나왔었다.)
단항산술연산자
++ , - -
: 위치가 어디에 있는가에 따라 결과값이 달라진다. 이건 예시와 함께 보자
<예시코드> 단항산술연산자가 어떻게 결과값을 내는지 볼 수 있다.
let x = 1;
x++; // x = x+1과 동일하다
console.log("++후 x의 값은 : ", x); //x = 2
x--; // x = x-1과 같다
console.log("--후 x의 값은? : ", x); // x= 1
<예시코드> 선할당 후증가
//선할당후 후증가
result = number++; //후위연산자 : 뒤쪽에있는 연산자. => result = number+1
console.log(result, number);// 5, 6
//선증가 후할당
result = ++number; //선위연산자 : 뒤쪽에있는 연산자. => result = number 할당해준 후에 number = number+1
console.log(result, number); // 7, 7
//선할당 후 감소
result = number--; // result = result-1
console.log(result, number);// 7, 6
//선감소 후할당
result = --number; // result = number 할당해준 후 number = number-1
console.log(result, number);// 5, 5
이렇게 위치에 따라서 결과값이 달라지니 주의하자!
할당연산자
+) 피연산자 : 연산의 대상
= : 우항에 있는 데이터를 좌항에 대입시킨다
+= : 우항에 있는 피연산자(=데이터)의 값을 왼쪽 피연산자에 더해서 저장합니다.
(쉽게 말해서 =>오른쪽에 있는 값을 왼쪽에 있는 변수에 저장되어있던 값과 더해서 왼쪽의 변수 명으로 업데이트)
- = : 우항에 있는 피연산자(=데이터)의 값을 왼쪽 피연산자에 빼서 저장합니다.
*= : 우항에 있는 오른쪽 피연산자의 값을 왼쪽 피연산자와 곱해서 왼쪽 피연산자에 저장합니다.
/ = : 좌항에 있는 피연산자를 오른쪽 피연산자로 나눠서 왼쪽 피연산자에 저장합니다.
%= : 왼쪽 피연산자에서 오른쪽 피연산자로 나눈 나머지만 취해서 왼쪽 연산자에 저장합니다.
비교연산자
== : 좌항과 우항의 값만 비교
=== : 좌항과 우항의 값과 타입이 같은지 비교해준다.
!= : 좌항과 우항의 값이 같지 않다.
!== : 좌항과 우항의 값과 타입이 다르다.
대소비교연산자
> : 좌항의 값이 우항보다 크다.( = 우항이 좌항의 값보다 작다)
< : 좌항의 값이 우항보다 작다. (= 우항이 좌항의 값보다 크다)
>= : 좌항이 우항보다 크거나 같다. (= 우항이 좌항보다 작거나 같다)
<= : 좌항이 우항보다 작거나 같다. (= 우항이 좌항보다 크거나 같다)
삼항조건연산자
요건 예시와 함께보는게 이해가 편하기 때문에 바로 예시코드 투척!
let num = 3;
let res = num % 2 ? '홀수' : '짝수';
// ? 를 기준으로 왼쪽의 조건문의 결과가 참이면 ? 앞의 값이 나온다.
// false는 뒤의 것이 출력됨. 가독성이 떨어지는게 단점
논리연산자
| | : 논리합(OR) ex) a | | b => 둘중 하나라도 true면 참(true)이다
ex) 0 | | 0 : false
1 | | 1 : true
0 | | 1 : true
1 | | 1 : true
&& : 논리곱(AND) : 둘다 true 여야 true 값을 반환함
ex) 0 && 0 : false
1 && 0 : false
0 && 1 : false
1 && 1 : true
부정(NOT)
으...... 뭔가 복잡해보이지만...... 보다보면 언젠간 익숙해 지겠지.....
복잡해 보이지만 계속 쓰다보면 익숙해 지겠지....
< 조건문 >
SWITCH 구문
구글링하면 바로 나오긴 하지만ㅋㅋㅋ switch 구문의 기본 형식은 이러하다.
아! 그리고 switch문의 조건식은 보통 상수이다.(상수=항상 정해져있는 값, 변하지 않는 수)
switch(표현식){
case 표현식1:
break;
case 표현식2:
break;
case 표현식3:
break;
.
.
.
.
case 표현식 마지막번째:
break;
default :
break;
}
기본 형태가 이렇다.
IF 구문
if(조건식1){
실행문 1
} else if(조건문2){
실행문2
} else if(조건문3){
실행문3
}
.
.
.
.
else if(조건문 마지막){
실행문 마지막-1 번째
}else{
마지막 실행문
}
요렇게 생겼다.
if(조건식){
실행문
}
물론 이렇게만도 사용가능하다.
그리고 마지막 실습문제!
학점 판별기
조건
1. 4과목의 점수를 입력받고
2. 평균값을 구한다.
* 점수별 학점의 범위는 이러하다
- 90~100점 A
- 80~89점 B
- 70~79점 C
- 70점 미만이면 낙제
<학점 판별기>
/*
1. 4과목의 점수를 입력 받고
2. 평균값을 구한다.
평균값이 70~79 C
80~89 B
90~100 A
70미만이다 낙제
*/
let ko = Number(prompt("국어 점수를 입력하세요"));
let math = Number(prompt("수학 점수를 입력하세요"));
let engl = Number(prompt("영어 점수를 입력하세요"));
let sience = Number(prompt("과학 점수를 입력하세요"));
const avg = (ko + math + engl + sience)/4 ;
if(avg>=90 || avg<=100){
alert( "당신의 학점은 A입니다.");
}
else if( avg>=80 || avg <=89){
alert( "당신의 학점은 B입니다.");
}
else if( avg>=70 || avg <=79){
alert( "당신의 학점은 C입니다.");
}
else{
alert( "당신은 낙제입니다.");
}
'블록체인기반 SW 개발자 과정(feat.경일게임아카데미)' 카테고리의 다른 글
<JAVASCRIPT> 22.05.26일자 기록 / 고차함수 / sort 배열 오름차순정렬 (0) | 2022.05.31 |
---|---|
<JAVASCRIPT> 22.05.24일 7일차 기록 / for 반복문 / 삼각형 찍기 (0) | 2022.05.24 |
<JAVASCRIPT> 22.05.20 5일차 기록 / 자바스크립트의 기본 / 자바스크립트의 자료형 (0) | 2022.05.20 |
<HTML> 22.05.19 4일차 기록 - 2 / 컨텐츠(요소) 가로로 배치하기 display : flex 와 float의 차이, 브라우저 창에 빈틈 없이 컨텐츠 붙이기 (0) | 2022.05.20 |
<HTML> 22.05.19 4일차 기록 - 1 / 각 요소의 크기를 계산해서 설계해야하는 이유 (feat.영화 포스트) (0) | 2022.05.19 |