자바스크립트 강의 EP_17 | 연산자(Operator)1 | ES6+ 최신 문법 | DOM API | BOM API

자바스크립트 연산자의 종류와 특징은 무엇인가요?

자바스크립트 연산자는 크게 문자열 병합 연산자, 산술 연산자, 증감 연산자, 비교 연산자, 할당 연산자 로 나눌 수 있습니다

각 연산자의 주요 특징은 무엇인가요?

• 문자열 병합 연산자(+): 문자열끼리 연결하며, 숫자와 문자열이 함께 사용될 경우 숫자가 문자열로 변환되어 연결됩니다.
• 산술 연산자(+, -, *, /, %): 숫자 간의 덧셈, 뺄셈, 곱셈, 나눗셈, 나머지 연산을 수행합니다.
• 증감 연산자(++, --): 변수의 값을 1 증가시키거나 감소시키며, 연산자의 위치(전위/후위)에 따라 연산 시점이 달라집니다.
• 비교 연산자(, =, !=, !, <, >, <=, >=): 두 값을 비교하여 참(true) 또는 거짓(false)을 반환하며, '='와 '!=='는 값과 데이터 타입까지 엄격하게 비교합니다.
• 할당 연산자(=, +=, -=, *=, /=): 변수에 값을 할당하며, 산술 연산과 할당을 동시에 수행하는 단축 표현도 있습니다.

자바스크립트의 핵심 연산자들을 체계적으로 배우고 싶은 분들을 위한 필수 강의입니다. 문자열 병합부터 산술, 증감, 비교, 할당 연산자에 이르기까지, 각 연산자가 어떻게 작동하고 실제 코드에서 어떻게 활용되는지 구체적인 예시와 실습을 통해 명확하게 이해할 수 있습니다. 특히, ==와 ---처럼 헷갈리기 쉬운 비교 연산자의 미묘한 차이와 현업에서의 올바른 사용법을 정확히 짚어주어, 잠재적인 오류를 방지하고 견고한 코드를 작성하는 데 큰 도움을 줍니다. 이 강의를 통해 자바스크립트의 기본기를 탄탄히 다지고, 더욱 효율적인 코딩 습관을 기를 수 있을 것입니다.

1. 연산자 개요 및 종류

1. 연산자의 정의: 연산을 수행하는 기호이다.
2. 연산자의 종류:
   1. 문자열 병합 연산자
   2. 산술 연산자 (덧셈, 뺄셈, 곱셈 등)
   3. 증감 연산자
   4. 그 외 다양한 연산자들이 존재하며, 본 강의에서는 자주 사용되는 연산자들을 다룬다.

2. 문자열 병합 연산자

1. + 기호의 활용: + 기호를 사용하여 문자열을 병합할 수 있다.
   1. 문자열 + 문자열: 두 문자열이 연결되어 하나의 문자열로 합쳐진다.
      • 예시: "hello" + "world"는 "Hello world"를 출력한다.
   2. 숫자 + 문자열: 숫자가 문자열로 타입 캐스팅(Type Casting)된 후 문자열 병합이 일어난다.
      • 예시: 3 + "3"은 숫자 3이 문자열 "3"으로 변환되어 "33"을 출력한다.
      • typeof 연산자로 확인 시 결과는 string 타입이다.
2. 연산 순서에 따른 결과 변화: 덧셈 연산은 왼쪽에서 오른쪽으로 수행된다.
   1. "3" + 5 + 8:
      • "3" + 5 (5가 문자열로 캐스팅) → "35"
      • "35" + 8 (8이 문자열로 캐스팅) → "358" 출력
   2. 3 + 5 + "8":
      • 3 + 5 (숫자끼리 먼저 덧셈) → 8
      • 8 + "8" (숫자 8이 문자열로 캐스팅) → "88" 출력

3. 산술 연산자

1. 산술 연산자의 종류:
   1. + (덧셈): 숫자끼리 만날 때 덧셈 연산을 수행한다.
   2. - (뺄셈)
   3. / (나눗셈)
   4. * (곱셈)
   5. % (나머지): 나눗셈 후 나머지를 구하는 연산자이다.
2. 산술 연산자 실습 예시:
   1. x = 12, y = 20 일 때:
      • x + y → 32
      • x - y → -10
      • x / y → 0.5
      • x * y → 200
   2. 9 % 2 → 1(9를 2로 나눈 나머지)
3. 나머지 연산자 활용 (홀짝 판별):
   1. 사용자에게 숫자를 입력받아 홀수 또는 짝수를 판별하는 코드를 작성할 수 있다.
   2. 판별 기준:
      • 짝수를 2로 나눈 나머지는 항상 0이다.
      • 홀수를 2로 나눈 나머지는 항상 1이다.
   3. 코드 로직:
      • prompt로 숫자를 입력받는다.
      • 입력받은 숫자를 2로 나눈 나머지가 1과 같은지 --- (엄격한 비교 연산자)로 확인한다.
      • 나머지가 1이면 "홀수입니다"를 출력하고, 그렇지 않으면 (나머지가 0이면) "짝수입니다"를 출력한다.
   4. 실행 결과:
      • 10 입력 시 "짝수입니다" 출력
      • 7 입력 시 "홀수입니다" 출력

4. 증감 연산자

1. 증감 연산자의 기능: 값을 1 증가시키거나 1 감소시키는 연산자이다.
2. 전위 연산과 후위 연산:
   1. 전위 연산 (Pre-increment/decrement): 연산자가 변수 앞에 위치하며, 해당 명령문에서 가장 먼저 연산을 수행한다.
   2. 후위 연산 (Post-increment/decrement): 연산자가 변수 뒤에 위치하며, 해당 명령문에서 가장 마지막에 연산을 수행한다.
   3. 이러한 차이로 인해 전위 증가/감소, 후위 증가/감소라고 불린다.
3. 증감 연산자 실습 예시: x = 10, y = 20으로 초기화한다.
   1. 전위 증가 (++x):
      • result = ++x + y;
      • ++x가 먼저 수행되어 x는 11이 된다.
      • result는 11 + 20으로 31이 된다.
      • 최종 x는 11, y는 20, result는 31이다.
   2. 후위 증가 (x++):
      • result = x++ + y;
      • 현재 x 값인 10과 y 값인 20이 먼저 더해져 result에 30이 할당된다.
      • 그 후 x++가 수행되어 x는 11이 된다.
      • 최종 x는 11, y는 20, result는 30이다.
   3. 전위 감소 (--y):
      • result = x + --y;
      • --y가 먼저 수행되어 y는 19가 된다.
      • result는 10 + 19로 29가 된다.
      • 최종 x는 10, y는 19, result는 29이다.
   4. 후위 감소 (y--):
      • result = x + y--;
      • 현재 x 값인 10과 y 값인 20이 먼저 더해져 result에 30이 할당된다.
      • 그 후 y--가 수행되어 y는 19가 된다.
      • 최종 x는 10, y는 19, result는 30이다.
4. 복합적인 증감 연산 예시: x = 10, y = 20일 때 result = ++x + y-- - 10 + y + 10;
   1. ++x: x는 11이 된다.
   2. 11 + y--: y는 현재 20이므로 11 + 20 = 31이 되고, 이후 y는 19로 감소한다.
   3. 31 - 10: 21이 된다.
   4. 21 + y: y는 이미 19로 감소했으므로 21 + 19 = 40이 된다.
   5. 40 + 10: 50이 된다.
   6. result에 50이 할당된다.
   7. 최종 result는 50, y는 19이다.

5. 비교 연산자

1. 비교 연산자의 기능: 두 값을 비교하여 참(true) 또는 거짓(false)의 논리값을 반환한다.
2. 크기 비교 연산자: a = 20, b = 10으로 초기화한다.
   1. > (크다): a > b → true
   2. >= (크거나 같다): a >= b → true
      • a = 20, b = 20일 때도 a >= b → true
      • a = 20, b = 30일 때 a >= b → false
   3. < (작다): a = 20, b = 30일 때 a < b → true
   4. <= (작거나 같다): a = 20, b = 30일 때 a <= b → true
3. 동등/일치 비교 연산자:
   1. == (동등 연산자): 값만 비교하며, 필요시 자동으로 타입 변환(Type Conversion)을 수행한다.
      • 예시: 30 == "30" → true(문자열 "30"이 숫자 30으로 변환됨)
      • 예시: 0 == false → true(0과 false가 동등하게 처리됨)
      • 현업에서는 혼란을 야기할 수 있으므로 사용을 지양하는 것이 좋다.
   2. --- (일치 연산자): 값과 데이터 타입까지 엄격하게 비교하며, 타입 변환을 수행하지 않는다.
      • 예시: 30 --- "30" → false(값은 같지만 타입이 다르므로)
      • 예시: 0 --- false → false(값과 타입 모두 다르므로)
      • 현업에서는 --- 사용을 적극 권장한다.
4. 부동/불일치 비교 연산자:
   1. != (부동 연산자): 값이 다른지 확인하며, 필요시 자동으로 타입 변환을 수행한다.
      • 예시: 30 != "30" → false(문자열 "30"이 숫자 30으로 변환되어 같다고 판단)
   2. !== (불일치 연산자): 값과 데이터 타입이 모두 다른지 엄격하게 비교한다.
      • 예시: 30 !== "30" → true(값은 같지만 타입이 다르므로 다르다고 판단)
      • 현업에서는 !== 사용을 적극 권장한다.

6. 할당 연산자

1. 할당 연산자의 기능: 변수에 값을 할당할 때 사용하는 연산자이다.
2. 기본 할당 연산자:
   1. =: 가장 기본적인 할당 연산자로, x = 3과 같이 사용한다.
3. 복합 할당 연산자 (단축 표현):
   1. += (더해서 할당): x += y는 x = x + y와 동일하다.
   2. -= (빼서 할당): x -= y는 x = x - y와 동일하다.
   3. <em>= (곱해서 할당): x </em>= y는 x = x * y와 동일하다.
   4. /= (나눠서 할당): x /= y는 x = x / y와 동일하다.
4. 할당 연산자 실습 예시: x = 10, y = 20으로 초기화한다.
   1. x = x + y;
      • x는 10 + 20으로 30이 된다.
   2. x += y;
      • 위의 x = x + y;와 동일한 결과를 출력한다.
5. 복합 할당 연산자 활용 (1부터 10까지 더하기):
   1. for 문을 사용하여 i를 1부터 10까지 반복한다.
   2. sum 변수를 0으로 초기화한다.
   3. 기존 방식: sum = sum + i;
      • 반복마다 sum에 i 값을 더하고 다시 sum에 할당한다.
   4. 복합 할당 연산자 활용: sum += i;
      • sum과 i를 더한 값을 sum에 할당하는 것과 동일하며, 코드를 간결하게 표현할 수 있다.
      • 두 방식 모두 동일한 결과를 출력한다.

7. 다음 강의 예고

1. 다음 시간에는 논리 연산자에 대해 학습할 예정이다.

자바스크립트 강의 EP_18 | 연산자(Operator)2 (논리) | ES6+ 최신 문법 | DOM API | BOM API 바로가기

자바스크립트 강의 EP_18 | 연산자(Operator)2 (논리) | ES6+ 최신 문법 | DOM API | BOM API - 하나이프 블로