프론트엔드/한 입 크기로 잘라먹는 리액트

JavaScript - 형 변환, 연산자, 조건문

icems0428 2025. 1. 10. 16:22

형 변환

// 1. 묵시적 형 변환
// -> 자바스크립트 엔진이 알아서 형 변환 하는 것

let num = 10;
let str = "20";

const result = num + str; // String

// 2. 명시적 형 변환
// -> 프로그래머 내장함수 등을 이용해서 직접 형 변환을 명시
// -> 문자열 -> 숫자
let str1 = "10";
let strToNum1 = Number(str1); // 10

let str2 = "10개";
let strToNum2 = parseInt(str2); // 10

// -> 숫자 -> 문자열
let num1 = 20;
let numToStr1 = String(num1); // "20"

 

 Number 함수는 문자열을 숫자로, String 함수는 숫자를 문자열로 바꾸어준다.

 parseInt 함수는 숫자가 들어간 문자열을 숫자로 바꾸어준다.

 

 C++이었다면 아스키코드 이용해서 숫자만 뽑아내는 복잡한 함수를 만들어야 했을텐데.. 하나의 함수로 형 변환을 할 수 있다니, 자바스크립트는 개발 친화적인 언어같다.

 

 그렇다면 자바스크립트같은 개발 친화적 언어가 있음에도 불구하고, C++같은 하드웨어적 언어가 요즘도 많이 쓰이는 이유는 무엇일까? 그건 C++의 성능과 제어력 때문이다. 메모리 관리, 포인터 연산을 통해 하드웨어적인 작업(게임 엔진이나 운영 체제, 자료 구조)를 효율적으로 구현할 수가 있다. 또한 메모리를 직접 할당하고 해제하는 메모리 제어도 가능하다.

 즉 만들어진 재료로 빠르게 만들 때는 자바스크립트, 성능과 하드웨어 제어가 필요할 때는 재료부터 만드는 C++을 주로 사용한다고 볼 수 있다.

연산자 1

// 1. 대입 연산자
let var1 = 1;

// 2. 산술 연산자
let num1 = 3 + 2;
let num2 = 3 - 2;
let num3 = 3 * 2;
let num4 = 3 / 2;
let num5 = 3 % 2;
let num6 = (1 + 2) * 10;

// 3. 복합 대입 연산자
let num7 = 10;
num7 += 20;
num7 -= 20;
num7 *= 20;
num7 /= 20;
num7 %= 20;

// 4. 증감 연산자
let num8 = 10;
++num8; // 전위 연산
num8++; // 후위 연산

// 5. 논리 연산자
let or = true || false; //true
let and = true && false; //false
let not = !true; //false

// 5. 비교 연산자
let comp1 = 1 === 2;
let comp2 = 1 !== 2;
// '=='는 자료형을 비교하지 못한다. 1 == '1'은 true

let comp3 = 2 > 1;
let comp4 = 2 >= 2;

 

 '같다'는 비교 연산자는 '===' 이다. '=='는 자료형까지 같은지는 비교하지 못한다.

 '같지 않다' 비교 연산자는 '!=='이다.

연산자 2

// 1. null 병합 연산자
// -> 존재하는 값을 추려내는 기능
// -> null, undefined가 아닌 값을 찾아내는 연산자

let var1;
let var2 = 10;
let var3 = 20;

let var4 = var1 ?? var2; //10
let var5 = var1 ?? var3; //20
let var6 = var2 ?? var3; //앞에 있는 값 10

let userName = "박진주";
let userNickName = "icems0428";

let displayName = userName ?? userNickName;

// 2. typeof 연산자
// -> 값의 타입을 문자열로 반환하는 기능을 하는 연산자

let var7 = 1;
var7 = "hello";

let t1 = typeof var7; // string

// 3. 삼항 연산자
// -> 항을 3개 사용하는 연산자
// -> 조건식을 이용해서 참, 거짓일 때의 값을 다르게 반환
let var8 = 10;

// 요구사항 : 변수 res에 var8의 값이 짝수 -> "짝", 홀수 --> "홀"
let res = var8 % 2 === 0 ? "짝수" : "거짓";
// 조건식 ? 참 값 : 거짓 값

 

 null 병합 연산자는 null, undefined가 아닌 값을 찾아내는 연산자이다. (null, undefined의 차이는 JavaScript - 자료형 참고) 값이 모두 존재하면 앞에 있는 값을 반환한다.

 삼항 연산자는 조건에 따라 참, 거짓일 때의 값을 다르게 반환하며, 세 개의 항을 사용한다. 맨날 어떻게 쓰는지 까먹어서 따로 적어두겠다.

" 조건식 " ? " 참일 때 넣을 값 " : " 거짓일 때 넣을 값 "

 

조건문

// 1. if 조건문 (if문)
let num = 9;

if (num >= 10) {
  // console.log("num은 10 이상입니다");
  // console.log("조건이 참 입니다")
} else if (num >= 5) {
  // console.log("num은 5 이상입니다");
} else if (num >= 3) {
  // console.log("num은 3 이상입니다");
} else {
  // console.log("조건이 거짓 입니다");
}

// 2. Switch 문
// -> if문과 기능 자체는 동일
// -> 다수의 조건을 처리할 때 if보다 더 직관적이다.

let animal = "cat";

switch (animal) {
  case "cat": {
    console.log("고양이");
    break;
  }
  case "dog": {
    console.log("강아지");
    break;
  }
  case "bear": {
    console.log("곰");
    break;
  }
  case "snake": {
    console.log("뱀");
    break;
  }
  case "tiger": {
    console.log("호랑이");
    break;
  }
  default: {
    console.log("그런 동물은 전 모릅니다");
  }
}

 

 If vs Switch 언제 무슨 조건문을 쓰는 게 좋을까? if문은 복잡한 논리 연산 (예 : &&, ||, <, >, ===)을 할 때, switch문은 선택지가 단순하고 명확할 때 사용하는 것이 좋다.