JavaScript 기본 - 2

Flex·2022년 3월 1일

HTML/CSS/JS

JavaScript 모음

목록 보기

2/8

JavaScript 기본에 대한 두번째 이야기입니다.
형 변환, 산술대입 연산자, 비교논리 연산자, 범위(Scope), if-else / switch 조건문에 대해 정리했습니다.

☕️ 형 변환

JavaScript는 느슨한 타입 언어 혹은 동적 타입 언어로 변수의 자료형을 명시적으로 선언할 필요가 없는 언어입니다.
연산자로 인한 계산이나 변수에 전달되는 값은 자동으로 암묵적 형 변환을 수행합니다.
✅ 강제적 형 변환을 위해서는 자료형 함수를 이용해 명시적 형 변환을 수행해야 합니다.

1. Number 변환 예제

Number는 정수와 실수를 모두 포함하는 자료 형 변환이므로, 정수 혹은 실수의 명시적 변환은 parse 함수를 사용합니다.
1) 정수 변환 : parseInt(피연산자)
2) 실수 변환 : parseFloat(피연산자)

console.log(Number("")); // 0
console.log(Number("123")); // 123
console.log(Number("hello")); // NaN
console.log(Number("hello")); // NaN
console.log(Number("123hello")); // NaN
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN

console.log(parseInt("123.123")); // 123
console.log(parseFloat("123.123")); // 123.123

2. Boolean 변환 예제

Boolean은 기본적으로 true(참), false(거짓)의 두가지 값을 가지는 형 변환입니다.
Boolean 값은 조건문의 수행 판단에 쓰일 수 있습니다.

console.log(Boolean("")); // false
console.log(Boolean("123")); // true
console.log(Boolean("hello")); // true
console.log(Boolean("0")); // true
console.log(Boolean(0)); // false
console.log(Boolean(123)); // true
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false

☕️ 산술대입 연산자

연산자는 프로그램에서 데이터를 처리하여 결과를 산출할 목적으로 사용되는 문자입니다.
연산의 대상 값은 피연산자라고 하며, 피연산자의 개수에 따라 단항/이항/삼항 연산자의 종류가 존재합니다.

단항 연산자 : 부호 연산자, 증감 연산자, 논리 연산자, 비트 연산자
(+, -), (++, --), (!), (~)

이항 연산자 : 산술 연산자, 대입 연산자, 비교 연산자, 논리 연산자
(+, -, *, /, %), (=, +=, -=), (==, !=), (&&, ||)

삼항 연산자 : (조건식) ? 참일 경우의 식 : 거짓일 경우의 식

아래 링크에서 연산자 우선순위를 더 알아봅시다.

💻 MDN - 연산자 우선순위

1. 산술 연산자

산술 연산자는 수학적 계산을 위해 제공하는 연산자입니다.

// 덧셈 연산자: +
console.log(31 + 10);
// 뺄셈 연산자: -
console.log(31 - 10);
// 곱셈 연산자: *
console.log(31 * 10);
// 나눗셈 연산자: /
console.log(31 / 10);
// 몫
console.log(parseInt(31 / 10));
// 나머지 연산자: %
console.log(31 % 10);
// 거듭제곱 연산자: **
console.log(2 ** 3);

2. 대입 연산자

대입 연산자는 계산한 결과를 하나의 변수에 저장하기 위한 연산자입니다.

let num_1 = 123;
let num_2 = 456;
let str_1 = "hello";
let str_2 = "world";

let num_3, str_3;

num_3 = num_1 + num_2;
str_3 = str_1 + str_2;

console.log(num_3);
console.log(str_3);

let num_4 = num_1 - num_2;
console.log(num_4);

3. 복합 대입 연산자

산술 연산자로 피연산자를 계산해 결과값을 한번에 대입시켜주는 연산자입니다.
+=, -=, /=, *= 등과 같이 사용합니다.

💻 예제코드 확인하러 가기

4. 증가/감소 연산자

숫자 1만큼 증가시키거나 감소시킬 때 사용되는 연산자입니다.
증가 연산자: ++(피연산자), (피연산자)++;
감소 연산자: --(피연산자), (피연산자)--;
전위연산은 한줄이 모두 실행되기 전, 후위연산은 한줄이 실행되고 난 후 그 다음 줄에서 작동합니다.

❗️ 연산자의 위치에 따라 결과값이 달라지므로 사용에 주의합시다!

💻 예제코드 확인하러 가기

☕️ 비교논리 연산자

1. 비교 연산자

좌항과 우항의 피연산자를 비교한 다음 결과값을 논리적 자료형으로 반환하는 연산자입니다.
== 은 단순 값의 같음을 비교하는 동등 비교, === 는 자료형까지 같음을 판단하는 일치 비교 연산자입니다.
<, >, <=, >= 등을 사용하여 비교합니다.
ASCII 코드표 값이 큰 문자를 우선 비교하고, 길이가 긴 문자열을 더 크다고 판단합니다.

💻 예제코드 확인하러 가기

2. 논리 연산자

좌항과 우항의 피연산자 간 논리값을 연산하여 참 또는 거짓을 결과로 얻는 연산자입니다.
논리 연산자: &&(AND), ||(OR), !(NOT)

💻 예제코드 확인하러 가기

☕️ Scope (범위)

Scope : 변수 혹은 상수에 접근할 수 있는 범위를 의미합니다.
모듈/함수 내 코드에서 동일한 변수 사용시 간섭을 줄이는 용도로 사용할 수 있습니다.
Scope는 크게 Global Scope와 Local Scope 타입으로 구분됩니다.
1) Global Scope : 전역에 선언되어 어디에서도 접근 가능합니다.
2) Local Scope : 특정 지역에 선언되어, 해당 지역 내에서만 접근 가능합니다.
함수와 블록에도 동일한 각자의 범위가 지정됩니다.

✅ 글로벌과 로컬에 같은 이름의 변수가 존재하면, 로컬 내에서는 로컬 변수가 자리를 차지합니다.

💻 예제코드 확인하러 가기

☕️ 조건문 if-else

알고리즘에서 논리적 비교를 할 때 사용되는 조건식입니다.
if, else if, else 키워드를 통해 구성되며, 조건식에 맞을 경우 중괄호 {} 내에 있는 명령문을 수행합니다.
단, 실행 문장이 단일 문장인 경우에는 중괄호 {} 를 생략할 수 있습니다.
✅ 중괄호는 되도록 쓰는 습관을 들입시다! 코드의 일관성을 위해서라도 사용하는 것이 좋습니다.

💻 예제코드 확인하러 가기

if-else를 한큐에 = 3항 연산자

3항 연산자를 통해 if-else를 대체하여 사용 가능합니다.
3항 연산자: 변수 = (조건식) ? 참일 때 값 : 거짓일 때 값

☕️ 조건문 switch

switch는 표현식을 평가하여 그 값이 일치하는 case문을 실행하는 조건문입니다.
switch, case, break, default 키워드를 통해 구성되며, switch의 조건에 맞는 case 구문을 수행합니다.
일반적으로 하나의 case만 수행되도록 case 끝을 break로 끝맺음합니다.
❗️ 만약 break 를 걸지 않으면 case 이후의 문장을 순차적으로 무조건 실행합니다.

💻 예제코드 확인하러 가기