귀여운 눈높이에서 작성된, 🐰

하루 한 걸음씩, 성장 하는 중 입니다 🫶🏻

Studying/JavaScript

자바스크립트 공부하기 - 연산자 (산술, 비교, 논리), 형변환

creamymood 2025. 3. 14. 01:25

연산자 (Operators):

  • 연산자는 변수나 값에 대해 특정 작업을 수행하는 기호
  • 예를 들어, 산술 연산자(+, -, *, /), 비교 연산자(==, !=, <, > 등), 논리 연산자(&&, ||, !) 등

 

  • 비교 연산자는 연산자 중 하나로, 두 값을 비교하여 true 또는 false를 반환

자바스크립트에서 사용되는 주요 비교 연산자

  1. == (같다)
    • 값이 같은지 비교합니다. 형 변환을 허용합니다.
    • 예: 5 == '5'는 true를 반환
  2. === (엄격한 같음)
    • 값과 자료형이 모두 같은지 비교합니다. 형 변환을 하지 않음.
    • 예: 5 === '5'는 false를 반환합니다.
  3. != (같지 않다)
    • 값이 다른지 비교합니다. 형 변환을 허용합니다.
    • 예: 5 != '5'는 false를 반환합니다.
  4. !== (엄격한 같지 않음)
    • 값과 자료형이 다르면 true를 반환합니다. 형 변환을 하지 않음.
    • 예: 5 !== '5'는 true를 반환합니다.
  5. > (크다)
    • 왼쪽 값이 오른쪽 값보다 큰지 비교합니다.
    • 예: 10 > 5는 true를 반환합니다.
  6. < (작다)
    • 왼쪽 값이 오른쪽 값보다 작은지 비교합니다.
    • 예: 3 < 5는 true를 반환합니다.
  7. >= (크거나 같다)
    • 왼쪽 값이 오른쪽 값보다 크거나 같은지 비교합니다.
    • 예: 5 >= 5는 true를 반환합니다.
  8. <= (작거나 같다)
    • 왼쪽 값이 오른쪽 값보다 작거나 같은지 비교
    • 예: 3 <= 5는 true를 반환

자바스크립트에서 비교 연산자는 조건문 (예: if, while)이나 논리 연산자와 함께 자주 사용됩니다.


💡형변환 ?

형 변환은 값의 데이터 타입을 다른 데이터 타입으로 바꾸는 과정

자바스크립트에서 형 변환은 크게 암묵적 형 변환(자동으로 타입이 바뀌는 경우)과 명시적 형 변환(사용자가 타입을 바꾸는 경우)으로 나눌 수 있어 !

 

1. 암묵적 형 변환 (자동 형 변환)

자바스크립트는 때때로 우리가 입력한 값을 자동으로 다른 타입으로 바꿔준다.

예를 들어, 숫자와 문자열을 더할 때 자바스크립트는 숫자를 자동으로 문자열로 바꿔줌.

let num = 5;
let text = "The number is ";

let result = text + num;  // 암묵적으로 num(5)을 문자열 "5"로 바꿔서 결합
console.log(result);  // "The number is 5"

 

2. 명시적 형 변환 (강제 형 변환)

명시적 형 변환은 우리가 직접 타입을 바꾸는 것입니다. 예를 들어, 숫자를 문자열로 바꾸거나 문자열을 숫자로 바꾸는 작업을 우리가 명시적으로 할 수 있어요.

예시:

let num = "10";
let convertedNum = Number(num);  // 문자열 "10"을 숫자 10으로 변환
console.log(convertedNum);  // 10 (숫자)

Number()

 

또 다른 예시로 문자열을 숫자로 바꾸는 방법:

let str = "123";
let num = +str;  // "+"를 사용해 문자열을 숫자로 변환
console.log(num);  // 123 (숫자)

let num = +str;

  • 여기에서 + 연산자는 단항 덧셈 연산자로, 문자열을 숫자로 변환하는 역할을 합니다.
  • 즉, + 연산자를 앞에 붙이면, 자바스크립트가 이 문자열 "123"을 숫자 123으로 바꿉니다.
  • 이 방법은 **Number()**와 같은 결과를 얻지만 더 간단하고 빠르게 사용할 수 있습니다.

 

💡형 변환이 중요한 이유

자바스크립트와 같은 동적 타입 언어에서는 값의 데이터 타입이 상황에 따라 달라질 수 있기 때문.

이를 잘 처리하지 않으면 예기치 않은 결과나 오류가 발생할 수 있어.  형 변환을 이해하고 적절히 사용하면 프로그램을 더 안정적이고 효율적으로 만들 수 있다 ! 


parseInt()**와 **Number()**는 모두 자바스크립트의 타입 변환(형 변환) 관련 함수입니다

 

parseInt()와 Number()의 차이점:

1.

let str = "123.45";  // '123.45'라는 문자열
let num = Number(str);  // 문자열 '123.45'를 실수로 변환
console.log(num);  // 123.45

parseInt():

  • 문자열에서 숫자 부분만 읽고, 나머지 문자는 무시합니다.
  • 반환 값은 항상 정수입니다.
  • 숫자 외의 문자가 나오면 그 뒤는 읽지 않고 정수 부분만 반환합니다.
let result = parseInt("123abc");  // "123" 부분만 읽고 정수로 변환
console.log(result);  // 123

다른 예시:

let str = "123.45";  // '123.45'라는 문자열
let num = parseInt(str);  // '123.45'에서 123을 정수로 변환
console.log(num);  // 123

주의: parseInt()는 소수점을 무시하고 정수만 반환합니다.

 

 

2. Number():

  • **Number()**는 값을 숫자로 변환하는 함수입니다.
  • 괄호 안에 넣는 값은 문자열일 수 있고, 숫자나 불리언 값도 가능합니다.

예시:

let str = "123.45";  // '123.45'라는 문자열
let num = Number(str);  // 문자열 '123.45'를 실수로 변환
console.log(num);  // 123.45

**Number()**는 문자열이 숫자처럼 보일 때 그 값을 정확하게 숫자로 변환하고, 만약 문자열에 숫자가 아닌 문자가 있으면 **NaN**을 반환합니다.


 

  • **따옴표('')**나 **큰따옴표("")**는 문자열을 나타낼 때 사용합니다.
  • **parseInt()**와 **Number()**는 문자열을 숫자로 변환하는 함수이므로, 문자열을 인자로 넣을 때는 따옴표나 큰따옴표로 감싸야 합니다.
  • 숫자가 들어가면 따옴표 없이도 변환이 가능합니다.

 

결론:

  • **parseInt()**와 Number() 둘 다 괄호 안에 변환하고자 하는 값을 넣어야 합니다.
  • **parseInt()**는 주로 문자열정수로 변환할 때 사용하고,
  • **Number()**는 문자열, 숫자 등을 숫자로 변환할 때 사용합니다.

즉, **parseInt('123')**와 **Number('123')**는 둘 다 문자열 '123'을 숫자 123으로 변환하지만, parseInt()는 정수로만 변환하고, Number()는 실수도 처리할 수 있습니다.