1. 이름 짓기
let message = "Hello", age = 25, num = 1;
이와 같이 한줄에 여러 변수의 이름을 지정할수 있다. 하지만 가독성을 위해 권장하는 방법은 아니다.
userName = "홍길동";
이처럼 var, let , const를 안쓰고 할당을 해줄수 있지만 이 또한 권장하지 않는다.
let my_Name = "홍길동"
let my-Name = "허준"
첫번째줄의 언더바( _ )는 변수의 이름으로 선언할 수 있지만 하이픈( - )은 변수의 이름으로 선언할 수 없다. 대소문자도 구별해줘야 한다.
const COLOR_RED = "#F00";
const COLOR_GREEN = "#F0";
이처럼 기억하기 힘든것을 변수로 사용하는건 관습 중 하나이다. 보통 대문자로 표기한다.
또한, 변수를 지을때 사람이 읽을수 있도록 쓰는게 좋고 짧은 이름은 피하는게 좋다.
2. 연산자
이항 산술 연산자 : +, -, *, /, %, ** 등이 있다.
단항 산술 연산자 : ++, -- 등등
let x = 1;
x++; // x++ -> x = x+1 이다
(1) 선할당 후증가
let number = 5;
let result;
result = number++;
++가 number뒤에 있으므로 result값에 number를 할당 해주고난 후에 number = number + 1 을 적용한다.
따라서 result = 5, number = 6 이 된다.
(2) 선증가 후할당
let number = 5;
let result;
result = ++number;
++가 앞에 있으므로 result 값에 number +1 를 대입해준다. 따라서 result = 6, number = 6 이 된다.
(3) 선할당 후감소
let number = 5;
let result;
result = number--;
// result = 5, number = 4
(4) 선감소 후할당
let number = 5;
let result;
result = --number;
// result = 4, number = 4 가 된다.
[1] 할당 연산자
= | x = 5 |
+= | x += 5 -> x = x + 5 |
-= | x -= 5 -> x = x - 5 |
*= | x *= 5 -> x = x * 5 |
/= | x /= 5 -> x = x / 5 |
%= | x %= 5 -> x = x % 5 |
[2] 비교 연산자
== | 값이 같다 |
=== | 값과 타입이 같다 |
!= | 값이 다르다 |
!== | 값과 타입이 다르다 |
(예시)
1번 : 5 == "5"
2번 : "0" == ""
3번 : 0 == ""
4번 : 5 === "5"
5번 : 0 === ""
6번 : 5 != 8
7번 : 5 != "5"
8번 : 5 !== "5"
(1번) 왼쪽 5의 타입은 number, 오른쪽 5의 타입은 string 이다. ==기호는 값만 비교하기 때문에 두 값은 같은것으로 처리된다. 따라서 1번은 true 이다.
(2번) string 0 과 ""(공백) 은 값이 같지 않다. 그래서 false이다.
(3번) 왼쪽0은 number, 오른쪽은 string 공백이다. 값만 놓고 따지면 둘다 0이 되어 같게 된다. 따라서 true
(4번) 왼쪽은 number 5, 오른쪽은 string 5이기 때문에 값은 같지만 타입이 달라 false 이다.
(5번) 3번과 비슷하지만 ===으로 비교해줘서 타입이 달라 false가 된다.
(6번) 5는 8과 같지 않기 때문에 true가 된다
(7번) number 5와, string 5 타입이 다르지만 값만 비교하면 같은 값이기 때문에 false
(8번) 7번과 비교해 !== 비교연산자를 사용해서 타입이 다르기 때문에 true가 된다.
[3] 대소비교 연산자
> | a>b | a는 b보다 크다 |
< | a<b | a는 b보다 작다 |
>= | a>=b | a는 b보다 크거나 같다 |
<= | a<=b | a는 b보다 작거나 같다 |
[4] 논리 연산자
|| 논리합(OR) : 둘중 하나라도 true면 true (0은 false 1은 true)
0 || 0 : false
1 || 0 : true
0 || 1 : true
1 || 1 : true
&& 논리곱(AND) : 둘다 true여야 true
0 && 0 : false
1 && 0 : false
0 && 1 : false
1 && 1 : true
! 부정(NOT)
[5] 삼항 연산자
let z = 3;
let res = z % 2 ? "홀수" : "짝수" ;
-> z를 2로 나눈 나머지가 1(true)이면 앞에 홀수 출력, 0(false)이면 뒤에 짝수 출력
3. if 문
if (조건) {조건이 true이면 실행할 것}
const age = 10;
const age1 = 20;
if (age<age1){
console.log("age는 age1보다 작다")
}
기본구조는 위와 같다.
좀더 많은 조건을 넣고 싶다면 아래와 같은 구조를 사용하면 된다.
if (조건) {실행할 값}
else if (조건) {위 if 문이 false이고 esle if 조건이 true이면 실행할 값}
else if (조건) {위 조건들이 모두 false이고 조건이 true이면 실행할 값}
else {모든 조건을 만족하지 않는다면 실행할 값}
ex) 점수 4개를 받아 평균값과 학점구하기
평균값이 70~79점 : C학점
80~89점 : B학점
90~100점 : A학점
70점 미만 : 낙제
const korean = Number(prompt("국어 점수를 입력하세요."));
const math = Number(prompt("수학 점수를 입력하세요."));
const english = Number(prompt("영어 점수를 입력하세요."));
const science = Number(prompt("과학 점수를 입력하세요."));
const totalscore = korean + math + english + science
const averagescore = totalscore /4
console.log("평균 점수는 ", averagescore , "점 입니다.");
if (averagescore>=70 && averagescore <80){
console.log("C학점입니다.");
}
else if (averagescore>=80 && averagescore<90){
console.log("B학점입니다.");
}
else if (averagescore>=90 && averagescore<=100){
console.log("A학점입니다.");
}
else if (averagescore>=0 && averagescore<70) {
console.log("낙제입니다.");
}
else {
console.log("잘못된 점수를 입력하였습니다. 다시 입력해주세요");
}
4. switch 문
switch (조건을 설정할 변수) {
case 조건: 조건을 만족하면 실행할 값
break;
case 조건2 :
break;
default: 조건이 만족하지 않으면 실행할 값
break;
}
ex)
let input = Number(prompt("숫자입력해라"));
const COMPARENUM = 1;
const COMPARENUM_1 = 2;
switch (input) {
case COMPARENUM:
console.log("1번째 케이스 실행");
console.log("내가 입력한 숫자 : ", input);
//break;
case COMPARENUM_1:
console.log("2번째 케이스 실행");
input++;
console.log("내가 입력한 숫자 : ", input);
break;
default:
console.log("디폴트 실행");
break;
case 끝에 break는 조건이 맞다면 {}안에 있는 값을 실행하고 멈추는 역할이다. break가 없다면 다음 조건이 맞든 안맞든 일단 실행한다.
if문과 비교해보면 case가 눈에 더 쉽게 들어온다는 장점이 있다. 본인 취향에 따라 갈리겠지만 조건이 적고 비교적 간단한 코드라면 if문, 조건이 많다면 switch문을 써주는게 가독성이 더 뛰어나다.
5. Math.random, Math.floor
Math.random : 0~1사이의 무작위 난수 생성
Math.floor : 소수점 숫자를 버림 - 정수단위로 맞춤
let randomNumber = Math.random(); //0~1사이에 난수 발생
let rand1 = Math.floor(Math.random()); // 소수점 버림
let rand2 = Math.floor(Math.random()*10); //0~9사이에 난수 발생
'개발 > html, css, js' 카테고리의 다른 글
[JavaScript] 지역변수, 전역변수 (0) | 2022.05.25 |
---|---|
[JavaScript] 컴퓨터랑 가위바위보 만들기 (0) | 2022.05.23 |
[JavaScript] 변수 (0) | 2022.05.20 |
[HTML] 형제 선택자, 속성 선택자 (0) | 2022.05.20 |
[HTML] CSS display, position (0) | 2022.05.19 |