[한입챌린지] 2일차 - JS 형변환과 연산자

 

JavaScript의 형 변환(Type Casting)

---

- 어떤 값의 타입을 다른 타입으로 변경하는 것을 말함

- 형 변환은 묵시적 형 변환(암묵적 형변환)과 명시적 형 변환으로 두가지 형태가 있음

- 묵시적 형 변환은 개발자가 직접 설정하지 않아도 알아서 JavaScript 엔진이 형 변환 하는 것을 말함

- 명시적 형 변환은 개발자가 직접 함수 등을 이용해 형 변환을 일으킴

 

묵시적 형 변환

- JavaScript 엔진은 최대한 Error를 통해서 프로그램이 멈추는 것을 방지하기 위해 묵시적 형 변환을 수행함

- 하지만 모든 불가능한 연산에 대해서 항상 묵시적 형 변환이 수행되는 것은 아니라 특정 하나의 변수의 값을 형변환 했을 때 오류가 발생하지 않고 연산이 잘 종료될 수 있는 경우에만 묵시적 형 변환이 일어난다.

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

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

const result = num + str;
console.log(result); // 1020

 

명시적 형 변환

- 프로그래머가 내장함수 등을 이용해서 직접 형 변환을 명시한다.

 

(1) 문자열을 숫자로 변환

- 숫자와 문자가 함께 있는 문자열의 경우 Number() 내장 함수로 형 변환이 실패하고 NaN이 출련된다.

- 이러한 경우에는 parseInt() 함수를 사용해서 문자를 숫자로 변환할 수 있다. 추가적으로 주의할 점은 숫자가 먼저 나온 경우에는 parseInt() 함수가 숫자로 잘 변환할 수 있지만 문자가 앞에 있는 경우에는 NaN을 출력하게 된다.

// 2. 명시적 형 변환
// -> 프로그래머 내장함수 등을 이용해서 직접 형 변환을 명시
// -> 문자열 -> 숫자

let str1 = "10";
let strToNum1 = Number(str1);
console.log(10 + strToNum1); // 20

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

let str3 = "dsds10개";
let strToNum3 = parseInt(str3);
console.log(strToNum3); // NaN

 

(2) 숫자를 문자열로 변환

- 숫자를 문자열로 형 변환하는 내장 함수도 존재한다.

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

console.log(numToStr1 + "입니다"); // 20입니다

일반적인 연산자

---

- 프로그래밍에서의 다양한 연산을 위한 기호, 키워드를 말함

- 덧셈(+), 곱셈(*), 뺄셈(-), 나눗셈(/) 기타 등등의 연산자가 존재한다.

- JavaScript 연산자는 일반 상식선 상에서 동작하기 때문에 기존의 알고 있는 개념으로 연산을 적용하면 된다.

 

(1) 대입 연산자

- 변수에 값을 저장하는데 사용하는 가장 기초적인 연산자 (=)

- 대입 연산자는 좌항에는 값을 저장한 변수의 이름을, 우항에는 저장할 값을 써주면 된다.

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

 

(2) 산술 연산자

- 대표적으로 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/), 나머지(%, 모듈러) 연산자가 있다.

- 산술 연산자는 우선순위가 있는데 덧셈, 뺄셈 연산자의 우선순위가 다른 3개의 연산자보다 낮다.

- 그렇기 때문에 괄호로 묶이지 않는 상태에서 수식이 나열되어 있는 경우 곱셈, 나눈셈, 나머지 연산이 먼저 실행된다.

- 만약 덧셈과 뺄셈 연산을 먼저 수행하고 싶다면, 괄호로 묶어주면 먼저 연산이 실행된다.

// 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;
console.log(num6); // 30

 

(3) 복합 대입 연산자

- 산술 연산자와 대입 연산자가 복합되어 있는 형태이다.

- 변수명을 중복 작성을 생략하고, 간결하게 표현하는 방법이다.

- 복합 대인 연산자에는 산술 연산자가 모두 올 수 있다. (모듈러도 올 수 있다!)

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

 

(4) 증감 연산자

- 값을 1씩 늘리거나, 줄일 때 사용하는 연산자

- 주의할 점은 증감연산자를 변수명 왼쪽에 써줄 경우, 코드 라인이 끝나고 나서야 연산이 적용된다.

- console.log()로 바로 결과를 출력한다면, 증감 연산자를 변수명 오른쪽에 써주도록 한다.

- 증감 연산자를 변수명 오른쪽에 써주면 해당 라인에서 즉시 연산이 실행된다.

- 증감 연산자를 오른쪽에 써주는 연산을 전위 연산, 왼쪽에 써주는 연산을 후위 연산이라고도 부른다.

// 4. 증감 연산자
let num8 = 10;
num8++; // 전위 연산
++num8; // 후위 연산
console.log(++num8); // 13
console.log(num8++); // 13
console.log(--num8); // 13
console.log(num8--); // 13
console.log(num8); // 12

 

(5) 논리 연산자

- true, false만을 존재하는 boolean 값을 다루는 연산자.

- 딱 3가지 종류 And(&&), Or(||), Not(!)이 존재한다.

// 5. 논리 연산자
let or = true || false;
let and = true && false;
let not = !true;
console.log(or, and, not); // true false false

 

(6) 비교 연산자

- 두개의 값을 비교하는 연산자

- 두개의 값은 같은지 비교하는 동등비교 연산자. (===)

- 두개의 값이 같지 않음을 비교하는 비동등비교 연산자. (!==)

- JavaScript가 아닌 다른 언어를 사용해본 경험이 있다면 동등 비교 연산자에 등호(=)를 왜 3개나 써야하는지 의문이 들 수 있다. 등호를 2개만 사용할 수도 있지만, JavaScript에서는 이 경우 값의 자료형을 확인하지 않는 동등비교 연산을 한다.

- 프로그래밍에서는 자료형이 다를 때에는 다른 값으로 보는 것이 일반적이기 때문에 JavaScrip에서는 등호를 3개 써주는 것을 권장되는 방식이다.

- 대소 비교를 하는 경우는 꺾쇠 기회를 사용한다. 이상(크거나 같다)이나 이하(작거나 같다)를 표현하고 싶은 경우 등호와 부등호를 함께 써주면 된다. (읽는 순서와 같이 부등호가 먼저 오고, 등호가 나중에 온다.)

// 6. 비교 연산자
let comp1 = 1 === 1;
let comp2 = 1 !== 2;
console.log(comp1, comp2); // true, true

let comp3 = 1 == "1";
console.log(comp3); // true

let comp4 = 2 > 1;
let comp5 = 2 < 1;
console.log(comp4, comp5); // true, false

let comp6 = 2 >= 2;
let comp7 = 2 <= 2;
console.log(comp6, comp7); // true, true

특수한 연산자

---

특수한 연산자들은 JavaScript 기반의 React.js, Vue.js 등을 사용한 다양한 웹 개발을 할 때 자주 그리고 요긴하게 이용되기 때문에 잘 익히고 넘어가길 바란다.

 

(1) null 병합 연산자

- 존재하는 값을 추려내는 기능을 가진 연산자

- null, undefined가 아닌 값을 찾아내는 연산자 (??)

- null 병합 연산자는 양쪽의 피연산자들 중에 null이나 undefined가 아닌 값을 찾는 기능을 한다.

- 만약 연산에 참여하는 양쪽의 피연산자 모두 null이나 undefined가 아니라면, 첫번째 피연산자의 값이 반환된다.

- null 병합 연산자는 첫번째 변수에 값이 있다면 출력하고, 없다면 두번째 변수의 값을 출력하라는 요구사항이 있을 때 유용하게 사용할 수 있다.

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

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

let var4 = var1 ?? var2;
let var5 = var1 ?? var3;
let var6 = var2 ?? var3;

console.log(var4); // 10
console.log(var5); // 20
console.log(var6); // 10 (var2)

// let userName = "이정환";
let userName;
let userNickName = "Winterload";

let displayName = userName ?? userNickName;
console.log(displayName);

 

(2) typeof 연산자

- 값의 타입을 문자열로 반환하는 기능을 하는 연산자

- JavaScript는 변수의 값을 숫자값으로 초기화를 했다고 하더라도, 다른 타입의 값을 저장하는 것이 가능하다.

- 변수의 타입 고정되어 있지 않다. 코드의 실행에 따라 동적으로 타입이 변경된다.

- 이때 변수의 타입이 궁금하다면, typeof 연산자를 사용할 수 있다.

- typeof 연산자는 오른쪽에 오는 변수의 타입을 문자열로 반환한다.

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

let var7 = 1;
let t1 = typeof var7;
console.log(t1); // number

var7 = "hello";
console.log(typeof var7); // string

var7 = true;
console.log(typeof var7); // boolean

 

(3) 삼항 연산자

- 항을 3개 사용하는 연산자

- 조건식을 이용해서 참, 거짓일 때의 값을 다르게 반환하는 식이다.

- 구조는 물음표(?)를 기준으로 오른쪽에는 조건식을 작성하고, 왼쪽으로는 참일 때 결과값과 콜론(:) 그리고 거짓일 때 결과값을 작성해주는 형태이다.

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

// 요구사항: 변수 res에 var8의 값이 짝수 -> "짝", 홀수 -> "홀"
let res = var8 % 2 === 0 ? "짝수" : "홀수";
console.log(res);

 

 

 

출처

---

(강의) 한입 크기로 잘라 먹는 리액트