자바 스크립트 기초(6) - 연산자

연산자란?

 

자바스크립트(JavaScript)는 다양한 연산자를 제공하여 변수와 값에 대한 연산을 수행한다.

여기서 연산이란 일반적인 수학에서의 연산과 비슷하다(더하기, 뺴기, 곱하기, 나누기 등)

 

1. 산술 연산자(Arithmetic Operators)

• 더하기 (+) : 두 값을 더한다.
  • 예시: let sum = 5 + 3; // sum은 8이 된다.
• 빼기 (-) : 두 값을 뺀다.
  • 예시: let difference = 10 - 4; // difference는 6이 된다.
• 곱하기 (*) : 두 값을 곱한다.
  • 예시: let product = 6 * 7; // product는 42가 된다.
• 나누기 (/) : 두 값을 나눈다.
  • 예시: let quotient = 15 / 3; // quotient는 5가 된다.
• 나머지 (%) : 두 값을 나눈 나머지를 반환한다.
  • 예시: let remainder = 17 % 5; // remainder는 2가 된다.
• 증가 (++) : 변수 값을 1 증가시킨다.
  • 예시: let x = 5; x++; // x는 6이 된다.
• 감소 (--) : 변수 값을 1 감소시킨다.
  • 예시: let y = 8; y--; // y는 7이 된다.
• 거듭제곱 (**) : 거듭제곱 연산을 수행한다.
  • 예시: let power = 2 ** 3; // power는 8이 된다.

%(나머지) - 백분율과 다르다

%, ++, --, ** 같은 경우는 일반 수학에서 사용하는 것과 의미와 기호가 다른데 

그중 %같은 경우 일반 수학에서는 1/100을 의미하지만 프로그래밍 언어에서는 나머지를 뜻한다.

• C 및 C++, Java, JavaScript, Python, C#, PHP, Ruby, Go, Kotlin, Swift에서 사용한다.

백분율을 나타내는 방법

그렇다면 백분율을 어떻게 나타낼까? 일반적으로는 소수점, 문자열을 사용한다.

문자열을 사용하는 경우는 가독성과 명확한 의미 전달(해당 값이 %로 나타낸 값이라는 것을 전달)을 위해 사용된다.

// 백분율을 소수점 형태로 나타내기
let percentage1 = 0.5; // 50%
let percentage2 = 0.75; // 75%

console.log("백분율 (소수점):", percentage1, percentage2);

// 백분율을 문자열 형태로 나타내기
let percentageStr1 = "50%";
let percentageStr2 = "75%";

console.log("백분율 (문자열):", percentageStr1, percentageStr2);

// 비율 계산 후 백분율로 나타내기
let part = 30;
let total = 100;
let percentage3 = (part / total) * 100;

console.log("백분율 (계산):", percentage3 + "%");

%를 연산자로 사용하는 경우

원래 수 % 나누려는 수(제수) 형식으로 사용한다.

나머지를 구한다는 것은 결국 나눗셈을 수행하고 그 결과 값을 얻는다는 것이기 때문에 프로그램 내부적으로는 나눗셈을  먼저 실시하게 된다.

// % 연산자를 사용하여 나머지 구하기
let remainder1 = 17 % 5; // 2
let remainder2 = 10 % 3; // 1

console.log("나머지 연산:", remainder1, remainder2);

 

소수점 연산 시에는 실제 값과 실제로 나오는 값이 다르다.

// 부동 소수점 나머지 연산
let remainder3 = 3.14 % 2; // 1.14
console.log("부동 소수점 나머지:", remainder3);

 

3.14 를 2로 나누면 나머지가 1.14로 나와야 하지만 실제로는 1.1400000000000001 같은 값이 나오게 된다.

이유는 프로그래밍 언어 0과 1로 이루어진 2진법을 사용하기 때문이다.

 

예를 들어서

• 10진법에서 1/3은 10진법에서 1/3은 0.33333...과 같이 무한 소수로 표현된다.
• 하지만 3진법에서 1/3은 0.1(3)로 표현되어 유한한 자릿수의 수로 정확하게 표현할 수 있다.
• 마찬가지로 10진법에서는 1.14를 정확하게 표현이 가능하지만
• 2진법에서는 그것이 불가능하기 때문에 무한 소수로 나타내게 된다.
• 때문에 실제로는 무한소수를 표현할 수 없기 때문에 근사값을 보여주는 것이다.

이러한 숫자가 계산에 포함될수록 조금씩 오차가 커지기 때문에 때문에 정확한 계산을 위해서는 가능한 모든 계산을 정수로 변환하여 수행해야 하는 것이 좋다.

---

 

 

// 음수 피연산자 나머지 연산
let remainder4 = -17 % 5; // -2
let remainder5 = 17 % -5; // 2
let remainder6 = -17 % -5; // -2

console.log("음수 나머지:", remainder4, remainder5, remainder6);

 

++, -- 연산자

++와 --는 변수의 값을 1만큼 증가/감소 시키는 연산자이다. 기본적으로 +1과 -1과 동일한 개념이다.

하지만 훨씬 간단한 표현이 가능하기 코드 간결성 및 가독성 향상이나 반복문 등에서 활용하기 좋기 때문에 사용한다.

전위 연산자와 후위 연산자

하지만 사용 방법은 +1이나 -1과 조금 다른데 그 중 가장 중요한 개념이 전위 연산자와 후위 연산자이다.

• 전위 연산자 (++변수, --변수):
  • 변수의 값을 먼저 증가 또는 감소시킨 후, 변경된 값을 반환한다.
  • 즉, 연산이 먼저 수행되고, 그 결과값이 사용된다.
• 후위 연산자 (변수++, 변수--):
  • 변수의 값을 먼저 반환한 후, 변수의 값을 증가 또는 감소시킨다.
  • 즉, 연산 전의 값이 먼저 사용되고, 그 후에 연산이 수행된다.

let x = 5;
let y = 3;

console.log("x++ (후위 증가):", x++); // 5 출력, x는 6이 됨
console.log("x (후위 증가 후):", x); // 6 출력

console.log("++y (전위 증가):", ++y); // 4 출력, y는 4가 됨
console.log("y (전위 증가 후):", y); // 4 출력

let a = 8;
let b = 6;

console.log("a-- (후위 감소):", a--); // 8 출력, a는 7이 됨
console.log("a (후위 감소 후):", a); // 7 출력

console.log("--b (전위 감소):", --b); // 5 출력, b는 5가 됨
console.log("b (전위 감소 후):", b); // 5 출력

++, --를 포함시킬 경우 변수 값을 변경시킨다

위의 코드에서도 보았겠지만 ++는 실제로 변수의 값을 변경 시킨다. 때문에 후에 나오는 변수도 영향을 받기 때문에 이런 영향을 없애고자 한다면 x+1 등을 사용해야한다.

디버깅을 위해 console.log(x++) 등을 사용할 때에도 실제 변수에 영향을 끼치기 때문에 코드의 아래쪽에 해당 변수를 재사용하게 된다면 실제 의도한 값과 다른 값이 나올 수도 있음을 기억해야한다.

 

예시 1

let x = 5;
let y = 3;
x++;
console.log(++x); 
console.log(x++); // 5 출력, x는 6이 됨
console.log(x); // 6 출력

만약에 이러한 코드가 있다고 해본다면 어떠한 결과값을 가질까?

let x = 5; // x 변수를 선언하고 5로 초기화
let y = 3; // y 변수를 선언하고 3으로 초기화

x++; // x의 값을 1 증가시켜 6으로 변경

console.log(++x); // x의 값을 먼저 1 증가시켜 7로 만들고, 7을 콘솔에 출력
console.log(x++); // x의 현재 값(7)을 콘솔에 출력하고, x의 값을 1 증가시켜 8로 변경
console.log(x); // x의 최종 값(8)을 콘솔에 출력

1. 이처럼 중간에 xx의 값을 +1해서 6으로 만들고
2. console.log(++x);는 6이 들어간 상태에서는 전위 연산자 ++가 쓰였기 때문에 값을 출력 전에 x+1 해서 7이라는 값을 콘솔에서 출력한다.
3. console.log(x++);는 위의 7이 들어간 상태에서 후위 연산자++가 쓰였기 때문에 값을 출력 한 이후 x+1해서 8이라는 값을 보낸다.
4. console.log(x)는 위의 8값을 받아서 출력한다.

예시 2

let x = 5; // x 변수를 선언하고 5로 초기화합니다.
let y = 3; // y 변수를 선언하고 3으로 초기화합니다. (코드 실행 결과에 영향 없음)

x + 1; // x에 1을 더하지만, 결과를 변수에 저장하지 않으므로 x 값은 변경되지 않습니다.

console.log(++x); // x를 먼저 1 증가시켜 6으로 만들고, 6을 콘솔에 출력합니다.
console.log(x++); // x의 현재 값(6)을 콘솔에 출력하고, x를 1 증가시켜 7로 만듭니다.
console.log(x); // x의 최종 값(7)을 콘솔에 출력합니다.

이 경우에 중간에 x+1을 사용했지만 실제로는 변수에 영향이 없어 값의 변동이 없었다.

2. 할당 연산자(Assignment Operators)

• 할당 (=) : 변수에 값을 할당한다.
  • 예시: let age = 30;
• 복합 할당 (+=, -=, *=, /=, %=) : 연산과 할당을 동시에 수행한다.
  • 예시: let num = 10; num += 5; // num은 15가 된다.

3. 비교 연산자(Comparison Operators)

• 같음 (==) : 두 값이 같은지 비교한다. (타입 변환 후 비교)
  • 예시: 5 == "5"; // true
• 엄격한 같음 (===) : 두 값이 같은지 엄격하게 비교한다. (타입 변환 없이 비교)
  • 예시: 5 === "5"; // false
• 다름 (!=) : 두 값이 다른지 비교한다. (타입 변환 후 비교)
  • 예시: 5 != "5"; // false
• 엄격한 다름 (!==) : 두 값이 다른지 엄격하게 비교한다. (타입 변환 없이 비교)
  • 예시: 5 !== "5"; // true
• 큼 (>), 작음 (<), 크거나 같음 (>=), 작거나 같음 (<=) : 값의 크기를 비교한다.
  • 예시: 10 > 5; // true

4. 논리 연산자(Logical Operators)

• 논리 AND (&&) : 두 조건이 모두 참일 때 참을 반환한다.
  • 예시: true && true; // true
• 논리 OR (||) : 두 조건 중 하나라도 참일 때 참을 반환한다.
  • 예시: true || false; // true
• 논리 NOT (!) : 조건의 반대 값을 반환한다.
  • 예시: !true; // false

5. 조건 (삼항) 연산자(ternary operator)

• 조건 ? 참일 때 값 : 거짓일 때 값: 조건에 따라 값을 선택한다.
  • 예시: let result = (10 > 5) ? "참" : "거짓"; // result는 "참"이 된다.

6. 비트 연산자(Bitwise Operators)

• 비트 AND (&), 비트 OR (|), 비트 XOR (^), 비트 NOT (~), 왼쪽 시프트 (<<), 오른쪽 시프트 (>>) : 비트 단위 연산을 수행한다.

7. typeof 연산자

• typeof 값: 값의 데이터 타입을 문자열로 반환한다.
  • 예시: typeof 42; // "number"

8. in 연산자

• 속성 in 객체: 객체에 특정 속성이 존재하는지 확인한다.
  • 예시: 'length' in 'test'; // true

9. instanceof 연산자

• 객체 instanceof 생성자: 객체가 특정 생성자 함수로 생성되었는지 확인한다.
  • 예시: [] instanceof Array; // true

이 외에도 다양한 연산자가 있으며, 필요에 따라 적절한 연산자를 선택하여 사용해야 한다.