연산자

* 용어정리 - 단항, 이항, 피연산자, 연산자

피연산자(operand)는 연산을 수행하는 대상이다. 연산자(operator)는 피연산자에 대한 연산을 수행하는 기호이다. 

let x = 1;

x = -x;
alert( x ); // -1, 단항 마이너스 연산자는 부호를 뒤집습니다.

위 코드에서 피연산자는 x이고, 연산자는 마이너스(-)이다. 해당 연산자는 피연산자를 하나만 가지는 단항 연산자이다. 

let x = 1, y = 3;
alert( y - x ); // 2, 이항 마이너스 연산자는 뺄셈을 해줍니다.

위 코드에서 피연산자는 x  y이고, 연산자는 마이너스(-)이다. 해당 연산자는 피연산자를 두개 가지는 이항 연산자이다.  

 

* 산술연산자

자바스크립트에서 지원하는 산술연산자 종류는 아래와 같다.

덧셈 연산자 +,
뺄셈 연산자 -,
곱셈 연산자 *,
나눗셈 연산자 /,
나머지 연산자 %,
거듭제곱 연산자 **

alert( 5 % 2 ); // 5를 2로 나눈 후의 나머지인 1을 출력
alert( 8 % 3 ); // 8을 3으로 나눈 후의 나머지인 2를 출력

나머지 연산자는 a % b 는 a를 b로 나눈 나머지를 정수로 반환한다.

alert( 2 ** 2 ); // 4  (2 * 2)
alert( 2 ** 3 ); // 8  (2 * 2 * 2)
alert( 2 ** 4 ); // 16 (2 * 2 * 2 * 2)

거듭제곱 연산자는 익스포넨셜(exponential)이다.  a ** b 는 a를 b번 곱한 값이 반환된다.

alert( 4 ** (1/2) ); // 2 (1/2 거듭제곱은 제곱근)
alert( 8 ** (1/3) ); // 2 (1/3 거듭제곱은 세제곱근)

거듭제곱 연산자는 정수가 아니라도 계산이 가능하다. 

 

* 문자열 연결과 자동형변환

alert( '1' + 2 ); // "12"
alert( 2 + '1' ); // "21"

피연산자 중 하나가 문자열이면 연산자 플러스(+)를 사용할때 문자열이 아닌 값은 문자열로 자동 형변환 된다.

alert(2 + 2 + '1' ); // '221'이 아니라 '41'이 출력됩니다.

연산은 왼쪽에서 오른쪽으로 순서대로 진행되므로, 2 + 2 를 먼저 수행한 다음 4 + '1'을 한다. 4는 문자열로 변환되어 문자열이 연결된다.

alert( 6 - '2' ); // 4, '2'를 숫자로 바꾼 후 연산이 진행됩니다.
alert( '6' / '2' ); // 3, 두 피연산자가 숫자로 바뀐 후 연산이 진행됩니다.

이에 반해 플러스 연산자(+)를 제외한 나머지 연산자의 경우 피연산자가 숫자가 아니면 숫자형으로 자동형변환 한다.

결론적으로 플러스(+) 연산자는 문자열이 아닌 값을 문자열로 변환하고, 나머지 연산자들은 숫자가 아니면 숫자형으로 변환한다.

 

* 단항연산자와 숫자형으로의 변환

// 숫자에는 아무런 영향을 미치지 않습니다.
let x = 1;
alert( +x ); // 1

let y = -2;
alert( +y ); // -2

// 숫자형이 아닌 피연산자는 숫자형으로 변화합니다.
alert( +true ); // 1
alert( +"" );   // 0

단항연산자의 플러스 기호를 사용하면 숫자가 아닌 값은 숫자형으로 자동형변환 된다. 웹 개발시 문자열로 된 숫자("17")를 실제 숫자(17)로 바꾸어서 연산해주어야 하는데 이때 사용가능하다. 왜냐하면 웹 개발시 사용자로부터 받는 입력이나 값은 모두 문자열이기 때문이다. 

let apples = "2";
let oranges = "3";

alert( apples + oranges ); // 23, 이항 덧셈 연산자는 문자열을 연결합니다.

위 코드는 문자열을 연결한다.

let apples = "2";
let oranges = "3";

// 이항 덧셈 연산자가 적용되기 전에, 두 피연산자는 숫자형으로 변화합니다.
alert( +apples + +oranges ); // 5

 

* 연산자 우선순위

수학시간에 연산자 우선순위에 대하여 배운 적이 있을 것이다. 곱셈과 나눗셈이 우선순위가 높고, 덧셈과 뺄셈이 우선순위가 낮다. 또한, 괄호는 우선순위가 가장 높다. 자바스크립트에서도 우선순위가 높은 연산자가 먼저 실행되고, 우선순위가 동일하면 왼쪽에서 오른쪽에서 연산이 수행된다. 

연산자 우선순위

 

* 할당 연산자 

값을 메모리에 저장하거나 변수에 할당(assignment)할때 사용되는 연산자이다. 

let x = 2 * 2 + 1;

alert( x ); // 5

할당 연산자는 우선순위가 낮으므로 산술연산자 계산이 모두 끝나고 값이 변수에 할당된다. 

let a = 1;
let b = 2;

let c = 3 - (a = b + 1);

alert( a ); // 3
alert( c ); // 0

위 코드는 b + 1 연산을 수행한 다음 결과값을 a 변수에 할당한다. 또한, 할당과 동시에 결과값을 반환하기 때문에 3 - a 연산의 결과값을 c 에 할당한다. 하지만 이러한 코드는 가독성이 떨어지므로 가급적 사용하지 않는 것이 좋다. 

let a, b, c;

a = b = c = 2 + 2;

alert( a ); // 4
alert( b ); // 4
alert( c ); // 4

위 코드는 산술연산자가 할당연산자보다 우선순위가 높기 때문에 2 + 2 연산을 먼저 수행한 후, 연산에 대한 결과값이 c, b, a 변수에 순차적으로 할당된다. 

c = 2 + 2;
b = c;
a = c;

하지만 가급적 위와 같이 줄을 나눠 순차적으로 코드를 작성하는 것이 가독성이 좋다. 

 

* 복합 할당 연산자

복합 할당 연산자는 연산에 대한 결과값을 동일한 변수에 다시 할당해야 할때 사용한다. 

let n = 2;
n = n + 5;
n = n * 2;

위 코드는 아래와 같이 복합 할당 연산자를 이용하여 축약형으로 작성할 수 있다.

let n = 2;
n += 5; // n은 7이 됩니다(n = n + 5와 동일).
n *= 2; // n은 14가 됩니다(n = n * 2와 동일).

alert( n ); // 14

복합 할당 연산자의 우선순위는 할당 연산자와 동일하므로 산술연산이 먼저 수행된 이후에 복합 할당 연산자가 나중에 실행된다. 

let n = 2;

n *= 3 + 5;

alert( n ); // 16  (*=의 우측이 먼저 평가되므로, 위 식은 n *= 8과 동일합니다.)

 

* 증감연산자

숫자를 1만큼 증가시키거나 감소시키는 연산자이다. 

let counter = 2;
counter++;      // counter = counter + 1과 동일하게 동작합니다. 하지만 식은 더 짧습니다.
alert( counter ); // 3

증가 연산자는 변수를 1만큼 증가시킨다.

let counter = 2;
counter--;      // counter = counter - 1과 동일하게 동작합니다. 하지만 식은 더 짧습니다.
alert( counter ); // 1

감소 연산자는 변수를 1만큼 감소시킨다. 

let counter = 1;
let a = ++counter; // 전위형(prefix form)

alert(a); // 2

++ 기호가 피연산자 앞에 오면 전위형이라고 한다. 전위형은 증가/감소 후의 새로운 값을 반환한다.

let counter = 1;
let a = counter++; // 후위형(postfix form)

alert(a); // 1

++ 기호가 피연산자 뒤에 오면 후위형이라고 한다. 후위형은 기존값을 먼저 반환하고, 증가/감소는 나중에 한다. 

let counter = 0;
counter++;
++counter;
alert( counter ); // 2, 위 두 라인은 동일한 연산을 수행합니다.

반환값을 사용하지 않으면 전위형과 후위형은 차이가 없다.

let counter = 0;
alert( ++counter ); // 1

반환값이 있으면 전위형은 연산을 수행하고 나서 결과를 반환한다.

let counter = 0;
alert( counter++ ); // 0

반환값이 있으면 후위형은 기존값을 먼저 반환하고, 연산은 나중에 수행한다.

let counter = 1;
alert( 2 * ++counter ); // 4

증감연산자는 산술연산자보다 우선순위가 높기 때문에 ++counter 로 값을 1만큼 증가시킨 후에 곱셈이 수행된다. 

let counter = 1;
alert( 2 * counter++ ); // counter++는 '기존'값을 반환하기 때문에 2가 출력됩니다.

후위형은 기존값을 먼저 반환한 후에 증감연산을 수행하므로 2 * counter 가 먼저 수행되고 나중에 counter 값이 증가한다.

let counter = 1;
alert( 2 * counter );
counter++;

코드 가독성을 위하여 위와 같이 작성하는 것이 더 좋다. 

 

* 쉼표 연산자

쉼표 연산자는 코드를 짧게 작성하기 위하여 여러 표현식을 한줄에 작성한다. 이때 표현식이 모두 실행되지만, 마지막 표현식의 연산 결과만 반환된다. 

let a = (1 + 2, 3 + 4);

alert( a ); // 7 (3 + 4의 결과)

1 + 2 나 3 + 4 를 표현식이라고 한다. 마지막 표현식의 연산결과만 반환되므로 7이 된다. 

let a = 1 + 2, 3 + 4

alert(a) // 3

괄호가 없으면 다른 결과가 반환된다. 쉼표 연산자의 우선순위는 할당연산자보다 낮다. 그렇기 때문에 산술연산 1 + 2 가 먼저 수행되고, a 변수에 3이 할당된다. 이후 3 + 4 결과는 무시된다. 

// 한 줄에서 세 개의 연산이 수행됨
for (a = 1, b = 3, c = a * b; a < 10; a++) {
 ...
}

반복문에서 초기값을 설정할때 가끔씩 쉼표 연산자를 사용하기도 한다. 위 코드는 a = 1 할당연산이 수행되고, b = 3 할당연산이 나중에 수행된다. 이후 a * b 산술연산이 수행되고, c 에 결과값이 할당된다. 

 

* 비교 연산자 

자바스크립트에서 사용되는 비교 연산자는 아래와 같다.

a > b // a 가 b 보다 크다
a >= b // a 가 b 보다 크거나 같다
a == b // a 와 b 는 동일하다
a != b // a 와 b 는 같지 않다

alert( 2 > 1 );  // true
alert( 2 == 1 ); // false
alert( 2 != 1 ); // true

비교 연산자는 불린형 값을 반환한다. 

let result = 5 > 4; // 비교 결과를 변수에 할당
alert( result ); // true

비교 연산의 결과값은 변수에 할당할 수 있다.

 

* 문자열 비교

자바스크립트는 사전순으로 문자열을 비교한다. 사전에서 뒤쪽에 나오는 문자열이 앞쪽에 나오는 문자열보다 크다.

alert( 'Z' > 'A' ); // true
alert( 'Glow' > 'Glee' ); // true
alert( 'Bee' > 'Be' ); // true

문자열 비교 알고리즘은 다음과 같다.

1. 문자열의 첫글자를 비교한다.
2. 첫글자가 크거나 작으면 비교는 종료된다.
3. 첫글자가 같으면 두번째 글자를 비교한다.
4. 글자마다 순서대로 반복해서 비교한다.
5. 비교가 종료되고 문자 갯수도 같으면 두 문자열은 동일하다고 판단한다.
6. 비교가 종료되고 문자 갯수가 다르면 긴 문자열이 크다고 판단한다.

 

* 다른 형을 가진 값끼리의 비교연산

비교하려는 값의 자료형이 다르면 숫자형으로 변환한 후 비교한다.

alert( '2' > 1 ); // true, 문자열 '2'가 숫자 2로 변환된 후 비교가 진행됩니다.
alert( '01' == 1 ); // true, 문자열 '01'이 숫자 1로 변환된 후 비교가 진행됩니다.

true 는 1로 변환하고, false 는 0으로 변환한 후 비교한다. 

alert( true == 1 ); // true
alert( false == 0 ); // true

a, b 두 변수는 불리언으로 변환하면 값이 서로 다른다. 0 은 false 로 변환되고, "0"은 true 로 변환된다. 문자열에서 문자의 갯수가 1보다 큰 경우 불리언으로 변환하면 true 가 된다. 하지만, a == b 를 비교하면 true 가 된다. 이유는 동등비교(==)의 경우 자료형을 그대로 비교하는 것이 아니라 문자열 "0"은 숫자형(0)으로 변환한 다음 비교하기 때문이다. 

let a = 0;
alert( Boolean(a) ); // false

let b = "0";
alert( Boolean(b) ); // true

alert(a == b); // true!

 

* 동등 연산자 (==)

동등 연산자는 자료형은 비교하지 않고, 값만 비교한다. 동등 연산자는 숫자형으로 변환한 다음 비교한다. 

alert( 0 == false ); // true

false 는 0 으로 변환된 후 비교한다. 

alert( '' == false ); // true

빈 문자열('')은 0으로 변환하고, false 도 0으로 변환한 다음 비교한다. 

 

* 일치 연산자(===)

일치 연산자는 자료형과 값을 모두 비교한다. 형 변환이 이루어지지 않고 그대로 비교한다. 일치 연산자는 자료형도 함께 검사하므로 코드에러를 줄여준다. 

alert( 0 === false ); // false, 피연산자의 형이 다르기 때문입니다.

0 과 false 는 형이 다르므로 비교결과는 false 이다. 

 

* null 이나 undefined 를 다른 값과 비교하기

alert( null === undefined ); // false

일치 연산자를 사용하는 경우 null 과 undefined 는 자료형이 다르므로 false 를 반환한다. 

alert( null == undefined ); // true

동등 연산자를 사용하는 경우 null 과 undefined 는 true 를 반환한다.

< > <= >= 연산자를 이용하여 null 과 undefined 비교
null은 0, undefined는 NaN로 변환됨

null 은 > 나 >= 연산자로 비교하면 0으로 변환되므로 (1)의 경우는 false 이고, (3)의 경우는 true 가 된다. 

alert( null > 0 );  // (1) false
alert( null == 0 ); // (2) false
alert( null >= 0 ); // (3) true

그러나 null 을 동등 연산자(==)로 비교하는 경우에는 형변환이 일어나지 않는다. 그러므로 (2)의 경우는 false 가 된다.

alert( undefined > 0 ); // false (1)
alert( undefined < 0 ); // false (2)
alert( undefined == 0 ); // false (3)

undefined 는 > 나 < 연산자로 비교하면 NaN로 변환되며, NaN 가 피연산자인 경우에는 항상 false를 반환한다. 그러므로 (1)과 (2)의 경우는 모두 false 이다. 그러나 undefined 를 동등 연산자(==)로 비교하는 경우에는 형변환이 일어나지 않으며 null 을 제외하면 모두 같지 않기 때문에 (3)의 경우에는 false 를 반환한다.  

 

* 함정 피하기

위와 같은 특수한 경우를 모두 암기할 필요는 없다. 그렇지만 이러한 상황을 피하기 위한 요령은 다음과 같다.

1. 값을 비교할때 일치 연산자(===)를 제외하면 피연산자로 null이나 undefined가 오지 않도록 한다.
2. null이나 undefined가 될 가능성이 있는 변수는 <, >, <=, >=의 피연산자가 되지 않도록 주의한다.
3. null인 undefined가 될 가능성이 있는 변수는 따로 예외처리를 한다.

 

* 요약정리

비교 연산자는 불린값을 반환합니다.
문자열은 문자 단위로 비교되는데, 이때 비교 기준은 ‘사전’ 순입니다.
서로 다른 타입의 값을 비교할 땐 숫자형으로 형 변환이 이뤄지고 난 후 비교가 진행됩니다(일치 연산자는 제외).
null과 undefined는 동등 비교(==) 시 서로 같지만 다른 값과는 같지 않습니다.
null이나 undefined가 될 확률이 있는 변수가 > 또는 <의 피연산자로 올 때는 주의를 기울이시기 바랍니다. null, undefined 여부를 확인하는 코드를 따로 추가하는 습관을 들이길 권유합니다.

 

* 논리연산자 - OR(||)

result = a || b;

OR 연산자는 두개의 수직선으로 작성한다.

alert( true || true );   // true
alert( false || true );  // true
alert( true || false );  // true
alert( false || false ); // false

피연산자 중에서 어느 하나라도 참이면 전체는 true 이다. 즉, 피연산자가 모두 false 인 경우를 제외하면 항상 true 이다. 

if (1 || 0) { // if( true || false ) 와 동일하게 동작합니다.
  alert( 'truthy!' );
}

피연산자가 불린형이 아니면 불린형으로 변환된다. 

let hour = 9;

if (hour < 10 || hour > 18) {
  alert( '영업시간이 아닙니다.' );
}

OR 연산자는 조건문에서 자주 사용된다. 주어진 조건 중에서 어느 하나라도 참인지 판단할때 사용된다. 

let hour = 12;
let isWeekend = true;

if (hour < 10 || hour > 18 || isWeekend) {
  alert( '영업시간이 아닙니다.' ); // 주말이기 때문임
}

위 코드는 아래와 동일하다.

let hour = 12;
let isWeekend = true;

if (false || false || true) {
  alert( '영업시간이 아닙니다.' ); // 주말이기 때문임
}

 

* 첫번째 truthy 를 찾는 OR 연산자

result = value1 || value2 || value3;

피연산자가 여러개인 경우에는 아래와 같은 순서로 연산을 수행한다. 

1. 왼쪽부터 오른쪽으로 이동하면서 피연산자를 평가한다.
2. 피연산자를 불린형으로 변환후 true 이면 연산을 종료하고, 해당 피연산자의 원래값을 반환한다.
3. 모든 피연산자가 false 로 평가되는 경우에는 마지막 피연산자의 원래값을 반환한다.

정리하면 OR 연산자를 여러개 사용한 경우에는 첫번째 truthy 값을 반환한다. 피연산자에 truthy 값이 없으면 마지막 피연산자를 반환한다. 

alert( 1 || 0 ); // 1 (1은 truthy임)

alert( null || 1 ); // 1 (1은 truthy임)
alert( null || 0 || 1 ); // 1 (1은 truthy임)

alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을 반환함)

아래 코드는 변수나 표현식에서 처음 등장하는 truthy 값을 검색한다. 현재는 nickName 이 검색된다. 빈 문자열은 falsy 값이다. 이렇게 하면 실제 값이 들어있는 변수를 찾을수 있다. 만약 모든 변수나 표현식이 falsy 값이면 "익명"이 반환된다. 

let firstName = "";
let lastName = "";
let nickName = "바이올렛";

alert( firstName || lastName || nickName || "익명"); // 바이올렛

OR 연산자의 또다른 기능은 단락평가(short circuit evaluation)이다. OR 연산자는 왼쪽부터 시작해서 오른쪽으로 평가를 진행하면서 truthy 값을 찾는다. 만약 truthy 값을 찾게 되면 평가를 멈추고 실행을 종료한다. 이를 단락평가라고 한다. 

true || alert("not printed");
false || alert("printed");

첫번째 줄의 OR 연산자는 true 를 반환하고 실행을 종료한다. 그러므로 "not printed" 는 출력되지 않는다. 두번째 줄의 OR 연산자는 false 를 만나면 truthy 값을 아직 찾지 못하였기 때문에 그 다음에 등장하는 "printed"를 화면에 보여준다. 

 

* 논리연산자 - AND(&&)

result = a && b;

 AND 연산자는 두개의 앰퍼센드(&)로 작성한다.

alert( true && true );   // true
alert( false && true );  // false
alert( true && false );  // false
alert( false && false ); // false

피연산자 모두 참이면 전체는 true 이다. 즉, 피연산자 중 어느 하나라도 false 인 경우 전체는 false 이다.

let hour = 12;
let minute = 30;

if (hour == 12 && minute == 30) {
  alert( '현재 시각은 12시 30분입니다.' );
}

AND 연산자는 조건문에서 자주 사용된다. 주어진 조건이 모두 참인지 판단할때 사용된다. 해당 코드는 아래와 같다.

let hour = 12;
let minute = 30;

if (true && true) {
  alert( '현재 시각은 12시 30분입니다.' );
}

AND 연산자의 피연산자로 타입에 제약이 없다. 논리비교시 숫자는 불린형으로 변환된다. 

if (1 && 0) { // 피연산자가 숫자형이지만 논리형으로 바뀌어 true && false가 됩니다.
  alert( "if 문 안에 falsy가 들어가 있으므로 alert창은 실행되지 않습니다." );
}

 

* 첫번째 falsy 값을 찾는 AND 연산자

result = value1 && value2 && value3;

피연산자가 여러개인 경우에는 아래와 같은 순서로 연산을 수행한다. 

1. 왼쪽부터 오른쪽으로 이동하면서 피연산자를 평가한다.
2. 피연산자를 불린형으로 변환후 false 이면 연산을 종료하고, 해당 피연산자의 원래값을 반환한다.
3. 모든 피연산자가 true 로 평가되는 경우에는 마지막 피연산자의 원래값을 반환한다.

정리하면 AND 연산자를 여러개 사용한 경우에는 첫번째 falsy 값을 반환한다. 피연산자에 falsy 값이 없으면 마지막 피연산자를 반환한다. 

// 첫 번째 피연산자가 truthy이면,
// AND는 두 번째 피연산자를 반환합니다.
alert( 1 && 0 ); // 0
alert( 1 && 5 ); // 5 (마지막 피연산자 반환)

// 첫 번째 피연산자가 falsy이면,
// AND는 첫 번째 피연산자를 반환하고, 두 번째 피연산자는 무시합니다.
alert( null && 5 ); // null
alert( 0 && "아무거나 와도 상관없습니다." ); // 0

1 && 5 의 경우에는 모두 truthy 값이므로 마지막 피연산자 5를 반환한다.

alert( 1 && 2 && null && 3 ); // null

첫번째 falsy 값인 null 이 반환된다.

alert( 1 && 2 && 3 ); // 마지막 값, 3

피연산자가 모두 truthy 값이므로 마지막 피연산자가 반환된다.

 

* 논리연산자 - NOT(!)

result = !value;

NOT 연산자는 한개의 느낌표(!)로 작성한다.

1. 피연산자를 불린형으로 변환한다.
2. 1에서 변환된 불린값을 반전시킨다.

NOT 연산자는 위와 같은 알고리즘에 따라 연산을 수행한다. 

alert( !true ); // false
alert( !0 ); // true

두번째 줄은 우선 0을 불린형 false 로 변환한 다음 !false 를 수행해서 true 로 반전시킨다. 

alert( !!"non-empty string" ); // true
alert( !!null ); // false

NOT 을 두개 연속해서 사용하면 불린형으로 형변환이 가능하다. 첫번째 줄의 문자열은 true 로 변환된후 먼저 !true 를 수행한다. 그런 다음 !false 를 수행하면 결과적으로 true 가 된다. 두번째 줄은 null 을 false 로 변한한후 먼저 !false 를 수행한다. 그런 다음 !true 가 실행되므로 결국 false 가 된다. 

 

* 논리연산자 우선순위

NOT > AND > OR

 NOT 연산자의 우선순위가 가장 높다. 그 다음은 AND 연산자가 OR 연산자보다 우선순위가 높다. 

 

* 좋지않은 코드 

let x = 1;

(x > 0) && alert( '0보다 큽니다!' );

어떤 개발자는 AND 연산자를 조건문 대신에 사용하기도 한다. x > 0 은 truthy 이므로 falsy 값을 찾기 위하여 alert 함수가 실행된다. 이렇게 되면 조건이 true 인 경우 뒤에 오는 코드가 실행되므로 조건문과 유사하다. 하지만 이러한 코드는 가독성이 떨어지므로 좋지 않은 코드이다. 아래와 같이 조건문을 사용하여 명확히 작성하는 것이 좋다. 

let x = 1;

if (x > 0) alert( '0보다 큽니다!' );

 

연습과제 1

아래 코드가 실행된 후, 변수 a, b, c, d엔 각각 어떤 값들이 저장될까요?

let a = 1, b = 1;

let c = ++a; // ?
let d = b++; // ?

 

연습과제 2

아래 코드가 실행되고 난 후, a와 x엔 각각 어떤 값이 저장될까요?

let a = 2;

let x = 1 + (a *= 2);

 

연습과제 3

아래 표현식들의 결과를 예측해 보세요.

"" + 1 + 0
"" - 1 + 0
true + false
6 / "3"
"2" * "3"
4 + 5 + "px"
"$" + 4 + 5
"4" - 2
"4px" - 2
7 / 0
"  -9  " + 5
"  -9  " - 5
null + 1
undefined + 1
" \t \n" - 2

 

연습과제 4

아래 코드는 사용자에게 숫자 2개를 입력받은 다음 그 합을 보여줍니다.

그런데 의도한 대로 예시가 동작하지 않습니다. 프롬프트 창에 세팅한 기본값을 수정하지 않은 경우 덧셈의 결과는 12가 됩니다.

왜 그럴까요? 예시가 제대로 동작하도록 코드를 수정해 보세요. 결과는 3이 되어야 합니다.

let a = prompt("덧셈할 첫 번째 숫자를 입력해주세요.", 1);
let b = prompt("덧셈할 두 번째 숫자를 입력해주세요.", 2);

alert(a + b); // 12

 

연습과제 5

아래 표현식들의 결과를 예측해보세요.

5 > 4
"apple" > "pineapple"
"2" > "12"
undefined == null
undefined === null
null == "\n0\n"
null === +"\n0\n"

 

연습과제 6

아래 코드의 결과를 예측해 보세요.

alert( null || 2 || undefined );

 

연습과제 7

아래 코드의 결과를 예측해 보세요.

alert( alert(1) || 2 || alert(3) );

 

연습과제 8

아래 코드의 결과를 예측해 보세요.

alert( 1 && null && 2 );

 

연습과제 9

아래 코드의 결과를 예측해 보세요.

alert( alert(1) && alert(2) );

 

연습과제 10

아래 코드의 결과를 예측해 보세요.

alert( null || 2 && 3 || 4 );

 

연습과제 11

조건문으로 아래의 조건을 작성하시오.

age(나이)가 14세 이상 90세 이하에 속하는지를 확인하는 if문을 작성하세요.

"이상과 이하"는 age(나이) 범위에 14나 90이 포함된다는 의미입니다.

 

연습과제 12

조건문으로 아래의 조건을 작성하시오.

age(나이)가 14세 이상 90세 이하에 속하지 않는지를 확인하는 if문을 작성하세요.

답안은 NOT ! 연산자를 사용한 답안과 사용하지 않은 답안 2가지를 제출해 주세요.

 

연습과제 13

아래 표현식에서 어떤 alert가 실행될까요?

if(...) 안에 표현식이 있으면 어떤 일이 일어날까요?

if (-1 || 0) alert( 'first' );
if (-1 && 0) alert( 'second' );
if (null || -1 && 1) alert( 'third' );

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

수학 연산자, 할당 연산자(비구조화 할당) - 수학연산자(산술연산자)에서 나머지를 표현하는 % 설명하기 

선행연산자, 후행연산자

비교연산자

논리연산자(단락평가 - Short-Circuit Evaluation, Conditional Operator)

삼항연산자

단락평가는 자바스크립트 인포 참고하기 - 리액트 예제로 단락평가 설명해도 좋을듯 

문자열 비교