JavaScript의 변수 선언 방법:
자바스크립트는 변수를 선언할 때 변수 타입을 명시하지 않음!
변수의 타입은 문장이 실행될 때(변수에 값이 할당될 때) 결정됨.
변수에 저장된 값을 변경할 때 다른 타입의 값을 할당하는 것이 가능.
int x = 1, x = "abc";
자바스크립트는 동적 타입핑(dynamic typing) 언어.
(비교) 자바는 정적 타입핑(static typing) 언어.
(1) var 변수이름 = 값; << 사용 권장XXX
- 값을 변경할 수 있는 변수. 스크립트 전체에서 사용 가능한 변수.
(2) let 변수이름 = 값;
- 값을 변경할 수 있는 변수. 선언된 블록{}안에서만 사용 가능한 변수.
let y = 10;
console.log('y =', y, typeof y);
y = 'hello'; //let으로 선언된 변수는 값을 재할당할 수 있음. 다른 타입의 값도 재할당할 수 있다.
console.log('y =', y, typeof y);(3) const 변수이름 = 값;
- 값을 변경할 수 없는 변수(상수). 선언된 블록 안에서만 사용 가능한 변수.
(주의) var는 같은 이름으로 변수를 여러번 선언할 수 있음.
let, const는 같은 이름으로 변수를 선언할 수 없음.
const x = 1;
console.log('x =', x, typeof x);
// x = 2; /* 상수 변수는 값을 재할당할 수 없다. 콘솔창에서 에러 확인: peError: Assignment to constant variable.*/자바스트립트의 비교 연산자:
== , ===, !=, !==, >, >=, <, <=
==, !=: 피연산자들의 타입을 자동으로 변환한 후 값이 같은지/다른지를 비교.
===, !==: 피연산자들의 타입으로 변환하지 않고, 타입과 값이 같은지/다른지를 비교.
논리 연산자:
&&, ||, !
자바 스크립트의 사칙 연산
자바 스크립트는 사칙연산을 수행할 때 타입을 자동으로 변환.
string 타입의 number 변수를 number 타입으로 변환한 후 2로 나눈 나머지를 계산
자바는 if 조건식에서 조건식의 결과가 반드시 boolean(true/false)이어야만 함.
자바스크립트는 false value(false로 취급하는 값)이 있음.
(1) 숫자인 경우 0
(2) 문자열 (String)인 경우, 빈 문자열('')
(3) 배열인 경우, 빈 배열 ([])
(4) 객체인 경우, null
(5) undefined(값이 할당되지 않은 변수)
삼항연산자
(조건식) ? (참일 때 값): (거짓일 때 값)
(조건식1) ? (참일 때 값) : ((조건식2)? (참일때 값) : (거짓일 때 값))
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Insert title here</title>
</head>
<body>
<h1>자바스크립트 조건문</h1>
<input type="number" id="numberInput" placeholder="정수 입력" >
<button onclick="checkEven()">짝수? 홀수?</button>
<button onclick="checkPositive()">양수? 음수?</button>
<button onclick="checkEven2()">삼항연산자</button>
<div id="result">짝/홀 결과</div>
<div id="result2">양/음 결과</div>
<div id="result3">삼항 결과</div>
<script>
const x = 1;
console.log('x =', x, typeof x);
// x = 2; /* 상수 변수는 값을 재할당할 수 없다. 콘솔창에서 에러 확인: peError: Assignment to constant variable.*/
let y = 10;
console.log('y =', y, typeof y);
y = 'hello'; //let으로 선언된 변수는 값을 재할당할 수 있음. 다른 타입의 값도 재할당할 수 있다.
console.log('y =', y, typeof y);
// id="numberInput"인 html element를 찾음.
const numberInput = document.getElementById('numberInput');
//console.log(numberInput);
// id="result"인 div element를 찾음.
const result = document.getElementById('result');
//console.log(result);
function checkEven() {
const number = numberInput.value; //input에 입력된 값을 읽음.
console.log(number, typeof number); //input에 입력된 값의 타입.
//if (number%2 === 1){
if (number % 2){
result.innerHTML = number + ': 홀수';
} else {
result.innerHTML = number + ': 짝수';
}
}
function checkPositive() {
const number = numberInput.value;
console.log(number);
if(number < 0){
result2.innerHTML = number + ': 음수'
} else if(number == 0) {
result2.innerHTML = number + ': 0'
} else if(number > 0) {
result2.innerHTML = number + ': 양수'
}
}
function checkEven2() {
const number = numberInput.value;
result3.innerHTML = (number % 2) ? '홀수' : '짝수';
}
</script>
</body>
</html>