Ch7. 연산자
-
산술 연산자
: 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만듦
산술 연산이 불가능한 경우 NaN 반환1. 이항 산술 연산자
피연산자의 값이 변경되지 않고 언제나 새로운 값을 만듦 ( + - * / % )2. 단항 산술 연산자
1개의 피연산자를 산술 연산하여 숫자 값을 만듦
피연산자 값을 변경하는 부수 효과가 있음//위치에 따른 증감 연산자(++, --)의 의미 var x=5, result; //선할당 후증가 result = x++; //5 6 //선증가 후할당 result = ++x; //7 7 //선할당 후감소 result = x--; //7 6 //선감소 후할당 result = --x; //5 5+/- 단항 연산자는 피연산자에 어떤 효과도 없다. +단항 연산자는 피연산자를 숫자로 변환 후 생성하여 반환하며 -단항 연산자는 부호를 반전한 값을 생성해 반환한다.
이때 문자열은 숫자로 타입 변환할 수 없으므로 NaN을 반환한다.3. 문자열 연결 연산자
+연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작
이때 true/false/null은 각각 1/0/0으로 타입을 강제로 변환한 후 연산을 수행한다. (=암묵적 타입 변환, 타입 강제 변환)
-
할당 연산자
좌항의 변수에 값을 할당하므로 변수 값이 변하는 부수 효과가 있다. ( = += -= *= /= %= )
할당문은 할당된 값으로 평가되어 표현식인 문이다. -
비교 연산자
1. 동등/일치 비교 연산자
: 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 boolean 값 반환동등(==) : 값이 같음 (암묵적 타입 변환 후 같은 값이 될 수 있다면
true반환)
일치(===) : 값과 타입이 같음
부동등(!=) : 값이 다름
불일치(!==) : 값과 타입이 다름동등 비교 연산자는 예측하기 어려운 결과를 만들어내므로 일치 비교 연산자 권장
NaN은 자신과 일치하지 않는 유일한 값
NaN을 비교하고 싶을 때는Number.isNaN사용Object.is
예측 가능한 정확한 비교 결과 반환
NaN이나 +0/-0 비교 가능2. 대소 관계 비교 연산자
(> >= <= < ) -
삼항 조건 연산자
```javascript 조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값 ```조건식이 boolean이 아니면 암묵적 타입 변환되어 평가
삼항조건 연산자는 값으로 평가할 수 있는 표현식인 문
∴ 조건에 따라 값을 정해야할 때 유용 -
논리 연산자
AND(&&), OR(||) , NOT(!)
논리 부정 연산자는 언제나 boolean 값 반환(피연산자가 boolean이 아니면 암묵적 타입 변환됨)
논리합 또는 논리곱 연산자 표현식의 평가 결과는 boolean이 아닐 수 있음. 언제나 2개의 피연산자 중 하나로 평가됨 -
쉼표 연산자
왼쪽부터 차례대로 평가 후 마지막 평가 결과 반환 -
그룹 연산자
: 소괄호로 피연산자를 감쌈
연산자 우선순위가 가장 높다. -
typeof 연산자
피연산자의 데이터 타입을 문자열로 반환
string, number, boolean, undefined, symbol, object, function
주의! null도 object로 반환, 선언하지 않은 식별자를 undefined로 반환 -
지수 연산자(**)
: 좌항을 밑으로 우항을 지수로 거듭제곱한 숫자 값 반환
음수는 괄호 묶기 필요 -
기타
연산자 개요 ?. 옵셔널 체이닝 연산자 ?? null 병합 연산자 delete 프로퍼티 삭제 new 생성자 함수를 호출할 때 사용해 인스턴스 생성 instanceof 좌변 객체가 우변 생성자 함수와 연결된 인스턴스인지 판별 in 프로퍼티 존재 확인 -
연산자 우선순위/결합 순서
종류가 많으므로 순위가 가장 높은 그룹 연산자를 사용해 우선순위 명시적 조절
종류에 따라 어느 쪽부터 평가를 수행할 것인지 나타내는 순서가 달라짐
Ch8. 제어문
위에서 아래로 실행되는 코드의 흐름을 인위적으로 제어 가능
-
블록문
: 0개 이상의 문을 중괄호로 묶은 것(=코드 블록, 블록)
js는 블록문을 하나의 실행 단위로 취급
세미콜론을 붙이지 않음 -
조건문
: 주어진 조건식의 평과 결과에 따라 블록문의 실행을 결정
조건식 : boolean 값으로 평가될 수 있는 표현식1. if ... else 문
조건식의 평가 결과가 true면 if 문의 코드블록이 실행, false면 else문의 코드가 실행됨.
(조건식이 boolean 값이 아닌 값으로 평가될 경우 암묵적 타입 변환이 일어남.)
대부분의 if...else문은 삼항 조건 연산자로 바꿔 쓸 수 있다.//if...else문 var x=2; var result; if(x%2) { result = '홀수'; } else { result = '짝수'; } //삼항 조건 연산자 var result = x % 2 ? '홀수' : '짝수';2. switch 문
주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 실행 흐름을 옮김. 실행할 case가 없다면 default 문으로 이동.
case 문에 해당하는 문의 마지막에는 break 문을 사용하는 것이 일반적.
break문을 사용하지 않으면 문을 실행한 이후 switch문을 탈출하지 않고 이후의 모든 case 문과 default 문을 실행하면서 변수에 재할당을 함.(=fall through)
경우에 따라 폴스루가 유용한 경우가 있음
-
반복문
조건식의 평가 결과가 참인 경우 코드 블록을 실행.1. for문
조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행.
for 문의 변수 선언문, 조건식, 증감식은 모두 옵션, 반드시 사용할 필요 X
단, 어떤 식도 선언하지 않으면 무한루프가 됨.
중첩 for문 : for 문 내에 for 문을 중첩해 사용하는 것2. while문
조건식의 평가 결과가 참이면 코드 블록을 계속해서 반복 실행
for문은 반복 횟수가 명확할 때, while문은 반복 횟수가 불명확할 때 주로 사용
while문은 조건문의 평가 결과가 거짓이 되면 코드 블록을 실행하지 않고 종료.3. do...while 문
do...while문은 코드 블록을 먼저 실행하고 조건식 평가.
∴ 코드 블록은 무조건 한 번 이상 실행됨4. break 문
레이블 문, 반복문, switch 문의 코드 블록을 탈출
(이 외의 코드 블록에 break 문을 사용하면 SyntaxError가 발생함)
레이블 문 : 식별자가 붙은 문(실행 순서를 제어할 때 사용)//foo라는 레이블 식별자가 붙은 레이블 문 foo: console.log('foo');중첩 for문의 내부 for문에서 break문 실행 시 외부 for문으로 탈출함. 이때 외부 for문을 탈출하려면 레이블 문 사용.
5. continue문
continue 문은 반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동시킴.
Ch9. 타입 변환과 단축 평가
명시적 타입 변환 : 개발자가 의도적으로 값의 타입을 변환하는 것(=명시적 타입 변환)
암묵적 타입 변환 : js 엔진에 의해 암묵적으로 타입이 자동 변환되는 것(=타입 강제 변환)
➖ 타입 변환은 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것
➖ 암묵적 타입 변환은 기존 변수 값을 재할당하는 것이 아님
ex)
x + ''을 계산할 때 js 엔진은 이를 평가하기 위해 x 변수의 숫자값을 바탕으로 새로운 문자열 값 '10' 생성하여 '10'+'' 평가
이때 암묵적으로 생성된 문자열 '10'은 x에 재할당되지 않음.
-
암묵적 타입 변환
표현식이 코드의 문맥에 부합하지 않은 상황에서 에러를 발생시키지 않도록 암묵적으로 타입 변환을 통해 표현식을 평가.1. 문자열 타입으로 변환
➖ 피연산자 중 하나 이상이 문자열일 때
➖ 템플릿 리터럴의 표현식 평가 결과2. 숫자 타입으로 변환
➖ + 이외의 산술 연산자
➖ 비교 연산자
➖ + 단항 연산자
피연산자를 숫자 타입으로 변경할 수 없는 경우 평가 결과는 NaN이 됨
빈 문자열, 빈 배열, null, false → 0
true → 1
객체, 빈 배열이 아닌 배열, undefined → NaN3. boolean 타입으로 변환
js 엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 Falsy 값(거짓으로 평가되는 값) 으로 구분
boolean 값으로 평가되어야 할 문맥에서 Truthy 값은 true로, Falsy 값은 false로 암묵적 타입 변환 됨.
false로 평가되는 Falsy값 : false, undefined, null, 0/-0, NaN, ''
Falsy 값 외의 모든 값은 모두 Truthy 값이다.//Truthy/Falsy 값을 판별하는 함수 function isFalsy(v){ return !v; } function isTruthy(v) { return !!v; } -
명시적 타입 변환
1. 문자열 타입으로 변환//1. String 생성자 함수를 new 연산자 없이 호출 String(1234); //-> "1234" String(true); //-> "true" //2. Object.prototype.toString 메소드를 사용 (1234).toString(); //-> "1234" (true).toString(); //-> "true" //3. 문자열 연결 연산자 이용 1234 + '' //-> "1234" true + '' //-> "true"2. 숫자 타입으로 변환
//1. Number 생성자 함수를 new 연산자 없이 호출 Number('1234'); //-> 1234 Number(true); //-> 1 //2.parseInt, parseFloat 함수 사용(문자열만 가능) parseInt('1234'); //-> 1234 parseFloat('10.2'); //-> 10.2 //3. + 단항 산술 연산자 이용 +'1234'; //-> 1234 +true; //-> 1 //4. * 산술 연산자 이용 '1234' * 1; //-> 1234 true * 1; //-> 13. boolean 타입으로 변환
//1. Boolean 생성자 함수를 new 연산자 없이 호출 Boolean(null); //-> false //2. ! 부정 논리 연산자를 두 번 사용 !!null; //-> false -
단축 평가
: 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것
1. 논리 연산자를 사용한 단축 평가
논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환단축 평가 표현식 평가 결과 true || anything true false || anything anything true && anything anything false && anything false 이를 이용해 if 문 대체 가능
<유용한 상황>
➖ 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때
➖ 함수 매개변수에 기본값을 설정할 때2. 옵셔널 체이닝 연산자(?.)
좌항의 피연산자가 null/undefined -> undefined
그렇지 않으면 우항의 프로퍼티 참조를 이어감(Falsy값이더라도)//예시 var elem = null; var value = elem?.value; console.log(value); // undefined3. null 병합 연산자(??)
좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자 반환
그렇지 않으면 좌항의 피연산자 반환//예시 var foo = ''||'default string'; console.log(foo); //"default string"
