본문 바로가기

언어 기초/JAVASCRIPT

변수, 자료형, 형변환, 연산자 [JavaScript | 학습을 위한 자료 | 한입만 REACT]

변수

 

//변수

// 1.변수
// 변수는 선언 후 초기화하지 않아도 되며, 나중에 값을 할당할 수 있다.
let age 
age = 27;
console.log(age);

// 2.상수
const birth = "1988.01.24"; //선언과 동시에 값을 반드시 초기화해야 하며 초기화 이후 값은 변경할 수 없다.

// 3.변수 명명규칙(네이밍 규칙)
// 3-1. $,_제외한 기호는 사용할 수 없다.
let $_name;

// 3-2. 숫자로 시작할 수 없다.
let name1;
let $2name;

// 3-3. 예약어를 사용할 수 없다.

//4. 변수 명명 가이드 : 알아보기 쉬인 네이밍 필수
let a = 1;
let salesCount = 1;
let total = salesCount - a;

 

 


자료형

//자료형

// 1. Number Type
let num1 = 27;
let num2 = 1.5;
let num3 = -20;

let inf = Infinity; // 양의 무한대
let nInf = -Infinity; // 음의 무한대

let nan = NaN; //프로그램이 꺼지지 않아 JS가 수학연산에서 더 안전하다
							// 수학 연산의 결과가 숫자가 아닌 경우 반환된다

// 2. String Type
// 문자들의 집합으로, 큰따옴표("), 작은따옴표('), 백틱(`)으로 표현한다.

let myName = "강진호";
let myLocation = "대전";
let introduce = myName + myLocation; // 문자 덧셈 가능

let introduceText = `${myName}은 ${myLocation}에 거주합니다.`; // 템플릿 리터럴 문법
// 백틱(``` ``)을 사용해 문자열을 작성하며, 변수 삽입(${}`)이 가능하다.
console.log(introduceText);

// 3. Boolean Type
let isSwitchIn = true;
let isEmpty = false;

// 4. Null Type (아무것도 없다)
// 개발자가 의도적으로 변수에 "비어 있음"을 할당할 때 사용한다.
let empty = null; // 개발자가 명시적 할당

// 5. Undefined Type 
let none; // 변수를 선언하고 초기화 하지 않은 경우

 

 


형변환

//형변환 : 어떤 값의 타입을 다른 타입으로 변경하는 것

//묵시적 형변환 : JS엔진이 자동 형변환
//면시적 형변환 : 개발자가 형변환

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

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

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

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

// 문자열의 숫자 부분을 정수로 변환
// 숫자로 시작하지 않으면 NaN 반환
let str2 = "10개";
let strToNum2 = parseInt(str2);

// -> 숫자 -> 문자열
let num1 = 20;
let numToStr1 = String(num1);
console.log(num1 + "입니다.");

 

 


연산자

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

// 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; // 곱셈 우선순위
console.log(num6);

// 3. 복합 대입 연산자
// 변수 값을 계산 후 다시 대입
let num7 = 10;
num7 += 20;
num7 -= 20;
num7 *= 20;
num7 /= 20;
num7 %= 20;
console.log(num7);

// 4. 증감 연산자
let num8 = 10;
num8++; // 후위 연산: 증가 전의 값을 먼저 사용하고 이후 1을 증가
++num8; // 전위 연산: 1 증가 후의 값을 사용


// 5. 논리 연산자
let or = true || false; // 둘 중 하나라도 참이면 true
let and = true && false; // 둘 다 참이어야 true
let not = !true; // 논리값을 반전
console.log(or, and, not);

// 6. 비교 연산자
let comp1 = 1 === 2; // = 3개로 사용 권장, 엄격한 동등 비교 (값과 타입 모두 비교)
let comp2 = 1 !== 2;
console.log(comp1, comp2)

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

let comp5 = 2 >= 2;
let comp6 = 2 <= 2;

 

 


특수 연산자

// 연산자 2 JS 특수 연산자

// 1. null 병합 연산자
// -> 존재하는 값을 추려내는 기능
// -> null, undefined가 아닌 값을 찾아내는 연산자
// || 연산자와 달리 0, false, "" 등의 값을 유효한 값으로 간주한다

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

let var4 = var1 ?? var2; // 왼쪽 값이 null 또는 undefined일 경우 오른쪽 값을 반환
let var5 = var1 ?? var3;
let var6 = var2 ?? var3; // 그렇지 않으면 왼쪽 값을 반환

let userName = "강진호";
let userNickName = "깜보";

let displayName = userName ?? userNickName;

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

let var7 = 1;
var7 = "hello";

let t1 = typeof var7;
console.log(t1);

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

//요구사항 : 변수 res에 var8의 값이 짝수이면 "짝", 홀수이면 "홀"
let res = var8 % 2 === 0 ? "짝수" : "홀수";