자바스크립트 초보 필독! 9장 연산자 핵심 마스터로 코딩 실력 UP!

자바스크립트 연산자 완전 정복! (중학생 눈높이 설명)

이번 시간에는 자바스크립트에서 데이터를 가지고 이것저것 할 때 쓰는 연산자에 대해 알아볼 거야. 우리가 변수나 상수에 데이터를 넣을 때 썼던 = 기호도 사실 연산자 중 하나인데, 이걸 할당 연산자라고 불러. 오른쪽에 있는 데이터를 왼쪽에 있는 변수에 넣어주는 역할을 하거든.

자바스크립트에는 이런 할당 연산자 말고도 정말 많은 종류의 연산자들이 있어. 하나씩 차근차근 알아보자!

1. 산술 연산자: 계산기 역할 톡톡히 해내!

이름 그대로 수학 계산을 할 때 쓰는 연산자들이야. 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/)은 다 알겠지?

• 나머지 연산자 (%): 10을 3으로 나누면 몫은 3이고 나머지는 1이지? 이 나머지 연산자는 바로 그 나머지를 구해줘. 그래서 10 % 3은 1이 되는 거야.
• 제곱근 연산자 (**): 2의 3승은 8이지? 이 제곱근 연산자를 쓰면 2 ** 3은 8이 돼.

그리고 좀 특별한 산술 연산자들도 있어.

• 증가/감소 연산자 (단항 산술 연산자): 변수에 저장된 숫자를 1씩 늘리거나 줄일 때 써.

  • ++ (증가): 변수 앞에 붙이면 (전위) 먼저 숫자를 1 늘리고 그 값을 사용해. 변수 뒤에 붙이면 (후위) 먼저 값을 사용하고 그 다음에 숫자를 1 늘려.
  • -- (감소): ++와 반대로 숫자를 1씩 줄여줘.

  예를 들어 let num = 1; 이 있을 때,
  * ++num 을 하면 num은 2가 되고, 그 값이 사용돼.
  * num++ 을 하면 num은 1이 사용되고, 그 다음에 num은 2가 돼.

  이 증가/감소 연산자는 변수 앞에 붙이든 뒤에 붙이든 결과가 같을 때도 있어. 하지만 다른 연산과 함께 쓸 때는 순서가 중요하니까 꼭 기억해둬!

• 부정 연산자 (-): 이건 그냥 앞에 마이너스(-)를 붙여서 숫자의 부호를 바꿔주는 거야. 양수는 음수로, 음수는 양수로 바꿔줘.

2. 대입 연산자와 복합 대입 연산자: 더 간편하게!

우리가 이미 알고 있는 = (할당 연산자)도 대입 연산자야. 오른쪽에 있는 값을 왼쪽에 넣어주는 거지.

그런데 매번 변수 = 변수 + 숫자 이렇게 쓰는 게 귀찮을 때가 있어. 이럴 때 복합 대입 연산자를 쓰면 돼!

• +=: num += 1 은 num = num + 1 과 똑같아.
• -=: num -= 1 은 num = num - 1 과 똑같아.
• *=: num *= 2 는 num = num * 2 와 똑같아.
• /=: num /= 2 는 num = num / 2 와 똑같아.
• %=: num %= 3 은 num = num % 3 과 똑같아.
• **=: num **= 2 는 num = num ** 2 와 똑같아.

이 복합 대입 연산자를 쓰면 코드가 더 짧아지고 읽기 쉬워져. 하지만 개인적으로는 원래대로 풀어 쓰는 게 더 직관적이라고 생각하는 사람들도 있으니, 편한 대로 쓰면 돼!

3. 비교 연산자: 같니? 다르니?

두 개의 값을 비교할 때 쓰는 연산자들이야. 비교 결과는 항상 참(true) 또는 거짓(false)으로 나와.

• >: ~보다 크다
• <: ~보다 작다
• >=: ~보다 크거나 같다
• <=: ~보다 작거나 같다
• ==: 값이 같다 (자료형은 다를 수 있음)
• !=: 값이 다르다 (자료형은 다를 수 있음)
• ===: 값이 그리고 자료형까지 같다 (일치 연산자)
• !==: 값이 그리고 자료형까지 다르다 (불일치 연산자)

여기서 좀 헷갈릴 수 있는 게 ==와 ===야.

• ==는 값이 같으면 자료형이 달라도 참으로 판단해. 예를 들어 숫자 10과 문자열 "10"은 자료형은 다르지만, 10 == "10"은 참이 나와. 이건 자바스크립트가 자동으로 자료형을 바꿔서 비교하기 때문인데, 이걸 형변환이라고 해.
• ===는 자료형까지 똑같아야 참이 나와. 그래서 10 === "10"은 거짓이 나와. 더 정확하고 엄격하게 비교하고 싶을 때 ===를 쓰는 게 좋아.

!=와 !==도 마찬가지로 ==와 ===의 반대라고 생각하면 돼.

4. 논리 연산자: 참/거짓을 조합하자!

논리 연산자는 참과 거짓을 조합해서 새로운 참/거짓 값을 만들어낼 때 써. 주로 조건문에서 많이 사용돼.

• && (AND 연산자): 양쪽에 있는 조건이 모두 참이어야 결과가 참이 돼. 하나라도 거짓이면 거짓이야.
• || (OR 연산자): 둘 중에 하나라도 참이면 결과가 참이 돼. 둘 다 거짓이어야만 거짓이야.
• ! (NOT 연산자): 뒤에 오는 조건의 참/거짓을 반대로 바꿔줘. 참이면 거짓으로, 거짓이면 참으로 만들어.

5. 삼항 연산자: 조건에 따라 다른 값을!

삼항 연산자는 이름처럼 세 개의 항으로 이루어진 연산자야. 물음표(?)와 콜론(:)을 사용해.

조건 ? 참일 때 값 : 거짓일 때 값

이런 식으로 쓰는데, 조건이 참이면 물음표 뒤에 있는 값을, 거짓이면 콜론 뒤에 있는 값을 반환해. if-else 문을 더 짧게 쓰고 싶을 때 유용해.

6. 연산자 우선순위: 누가 먼저 계산될까?

수학 시간에 덧셈, 뺄셈, 곱셈, 나눗셈 중에 곱셈, 나눗셈을 먼저 계산했던 거 기억나? 프로그래밍에서도 마찬가지로 연산자 우선순위가 있어.

예를 들어 10 + 10 * 3 이라는 식이 있다고 해보자. 곱셈을 먼저 계산해야 하니까 10 * 3이 먼저 계산돼서 30이 되고, 그 다음에 10을 더해서 40이 되는 거야.

이런 우선순위가 헷갈릴 때는 괄호 ()를 사용하면 돼! 괄호 안의 내용이 무조건 먼저 계산되니까, 코드를 더 명확하게 만들 수 있어. 괄호는 연산자 우선순위에서 가장 높으니까 꼭 활용해봐!

오늘은 이렇게 다양한 자바스크립트 연산자들에 대해 알아봤어. 처음에는 좀 어렵게 느껴질 수도 있지만, 직접 코드를 써보면서 익히다 보면 금방 익숙해질 거야!