Javascript 스터디
자료: https://ko.javascript.info/
2.8 -2.11
2.8 기본 연산자와 수학
자바스크립트에서 지원하는 수학 연산자는 다음과 같습니다.
덧셈 연산자 +,
뺄셈 연산자 -,
곱셈 연산자 *,
나눗셈 연산자 /,
나머지 연산자 %,
거듭제곱 연산자 **
가 있다.
이항 연산자 +를 사용할 때는 피연산자 중 하나가 문자열이면 다른 하나도 문자열로 변환된다는 점에 주의해야 합니다.
예시)
alert('1' + 2); //"12"
그러나
alert(2 + 2 + '1' ); // '221'이 아니라 '41'이 출력됩니다.
--> 왜냐하면, 왼쪽에서 오른쪽으로 순차적으로 진행되기 때문에 이런 결과가 나왔습니다. 두 개의 숫자 뒤에 문자열이 오는 경우, 숫자가 먼저 더해지고, 그 후 더해진 숫자와 문자열과의 병합이 일어납니다.
단항 연산자 +와 숫자형으로의 변환
let apples = "2";
let oranges = "3";
alert( apples + oranges ); // 23, 이항 덧셈 연산자는 문자열을 연결합니다.
원하는 대로 값을 더해주려면, 단항 덧셈 연산자를 사용해 피연산자를 숫자형으로 변화시키면 됩니다.
let apples = "2";
let oranges = "3";
// 이항 덧셈 연산자가 적용되기 전에, 두 피연산자는 숫자형으로 변화합니다.
alert( +apples + +oranges ); // 5
alert( Number(apples) + Number(oranges) ); // 5
이항 덧셈 연산자가 적용되기 전에 단항 덧셈 연산자가 먼저 적용
증가·감소 연산자
++와-- 연산자는 변수 앞이나 뒤에 올 수 있습니다.
-
counter++와 같이 피연산자 뒤에 올 때는, '후위형(postfix form)'이라고 부릅니다.
let counter = 1;
let a = ++counter; // (*)
alert(a); // 2 -
++counter와 같이 피연산자 앞에 올 때는, '전위형(prefix form)'이라고 부릅니다.
let counter = 1;
let a = counter++;
alert(a); // 1
반환 값을 사용하지 않는 경우라면, 전위형과 후위형엔 차이가 없습니다.
let counter = 0;
counter++;
++counter;
alert( counter ); // 2
쉼표연산자
쉼표 연산자 ,는 여러 표현식을 코드 한 줄에서 평가할 수 있게 해줍니다. 이때 표현식 각각이 모두 평가되지만, 마지막 표현식의 평가 결과만 반환되는 점에 유의해야 합니다.
let a = (1 + 2, 3 + 4);
alert( a ); // 7 (3 + 4의 결과)
과제
1.
전위형과 후위형
아래 코드가 실행된 후, 변수 a, b, c, d엔 각각 어떤 값들이 저장될까요?
let a = 1, b = 1;
let c = ++a; // 2
let d = b++; // 1
답 : a = 1, b = 2, c = 2 , d = 1
++a는 전위형이기 때문에, ++를 먼저 시행해 a를 먼저 증가 시킨 후 c에 값을 할당함
b++는 후위형이기 때문에, b를 먼저 d에 할당 후, ++를 통해 "b"를 증가시킴.
2.
할당 후 결과 예측하기
아래 코드가 실행되고 난 후, a와 x엔 각각 어떤 값이 저장될까요?
let a = 2;
let x = 1 + (a *= 2);
해설: let x = 1 + (a = a*2) 이고,
(a = a+2) 를 먼저 풀어보면, a = 4이다.
let x = 1+4를 하면, x = 5가 된다
즉, 답은 a =4, x =5 이다.
3.
형 변환
아래 표현식들의 결과를 예측해 보세요.
"" + 1 + 0 // "10"
"" - 1 + 0 // -1 (0-1+0)
뺄셈 연산자 -는 기타 수학 연산자처럼 숫자형만을 인수로 받습니다. 빈 문자열 ""는 숫자 0으로 변환되기 때문에 결과는 -1이 됩니다.
true + false // 1 (1+0)
숫자형으로 변화합니다.
6 / "3" // 2
"2" * "3" // 6
4 + 5 + "px"// "9px"
"$" + 4 + 5// "$45"
"4" - 2 // 2
"4px" - 2 // NaN(not a number)
7 / 0 // Infinity
" -9 " + 5 // " -9 5"
" -9 " - 5 // -14
null + 1 // 1 (null을 숫자형으로 변환시 0)
undefined + 1 // NaN
" \t \n" - 2 // -2
문자열이 숫자형으로 변할 땐 문자열 앞뒤의 공백이 삭제됩니다. 뺄셈 연산자 앞의 피연산자는 공백을 만드는 문자 \t와 \n, 그 사이의 “일반적인” 공백으로 구성됩니다. 따라서 " \t \n"는 숫자형으로 변환 시 길이가 0인 문자열로 취급되어 숫자 0이 됩니다.
- 덧셈 고치기
let a = prompt("덧셈할 첫 번째 숫자를 입력해주세요.", 1);
let b = prompt("덧셈할 두 번째 숫자를 입력해주세요.", 2);
alert(+a + +b); // 3
2-9
비교 연산자
과제 1. 비교
아래 표현식들의 결과를 예측해보세요.
5 > 4 // true
"apple" > "pineapple" //false , 사전에 뒤에 잇을 수록 큼
"2" > "12" // true (문자열이기 때문에, 사전순 2>1)
undefined == null //true
undefined === null // false
null == "\n0\n" // false 오직 undefined와 같음
null === +"\n0\n" // false( 형이 다름)
2.10
if와 '?'를 사용한 조건 처리
'삼항(ternary) 연산자’
let result = condition ? value1 : value2;
평가 대상인 condition이 truthy라면 value1이, 그렇지 않으면 value2가 반환됩니다.
과제
1.
ㅇㅇ
안 비어 있어서 "0" 도 뭔가 들어잇는 문자열임
let officialName = prompt("what's the official name of JavaScript?", " ")
if(officialName == "ECMAScript"){
alert("Right!")
}
else{
alert("You don't know? "ECMAScript"!")
}
let result= (a+b<4) ? '미만' : '이상';
- let message = (login == '직원') ? '안녕하세요.' :
(login == '임원') ? '환영합니다.' :
(login == '') ? '로그인이 필요합니다.' :
'';
2-11
논리 연산자
자바스크립트엔 세 종류의 논리 연산자 ||(OR), &&(AND), !(NOT)
&&의 우선순위가 ||보다 높습니다.
AND 연산자 &&의 우선순위는 OR 연산자 ||보다 높습니다.
따라서 a && b || c && d는 (a && b) || (c && d)와 동일하게 동작합니다.
과제
1. 2
2. 1, 2
-
null
-
1, undefined
-
2&&3에서 둘 다 true이기 때문에, 마지막 3을 출력
alert( null || 3 || 4);
그러면 3
-
if( age >=14 && age <=90)
if( !(age >=14 && age <=90))
if( age < 14 || age>90)
||쓴 이유는 그냥 반대로 && 로 하면 반대
- -1
0 -> false -> 안됨
1
alert 1,3번째 꺼만
