[JavaScript] 변수 선언 | 데이터 타입 | 연산자 | 조건문 | 반복문

목차!

 

📝 변수 선언

var: 틀딱방식

let: 값 변경이 가능한 변수

const: 값 변경이 불가능한 변수 (상수화)

let age = 25;
const name = "John";
var isStudent = true; // 지양

🔡 데이터타입

원시 데이터 타입 (Primitive Data Types)

1. Number (숫자)
   • 정수와 부동소수점 숫자를 모두 표현

   let age = 25;       // 정수
   let price = 19.99;  // 부동소수점
   

   • 특별한 값들:
     • ∞, -∞: 0으로 나누거나 매우 큰 숫자로 인해 발생합니다.
     • NaN (Not-a-Number == 부정형): 수학적 연산이 실패할 때 나타납니다 (예: 문자열을 숫자로 나누려 할 때).
2. String (문자열)
   • 텍스트를 표현할 때 사용
   • 문자열은 작은 따옴표('...'), 큰 따옴표("..."), 또는 백틱(...)으로 감쌉니다.

   let name = "Alice";         // 큰 따옴표
   let greeting = 'Hello!';    // 작은 따옴표
   let message = `Hi, ${name}`; // 템플릿 리터럴 (백틱)
   

   <aside> <img src="/icons/username_lightgray.svg" alt="/icons/username_lightgray.svg" width="40px" />
   • length
   • [ ]
   • indexOf
   • slice
   • toLowerCase()
   • toUpperCase()
   • replace </aside>

   let str = "Hello";
   
   str.length; // == len(str)
   str[0];
   str.indexOf("ll") //"ll"의 시작 위치 반환. 포함되지 않을 경우 -1 반환
   str.slice(0, 3) // 0번째부터 3개의 문자열 추출 -> hel
   str.slice(2) // 2번째부터 끝까지 -> llo
   str.replace("원래 문자열", "대체 문자열")
   
   

3. String as objects
4. Boolean (불리언)
   • true 또는 false의 논리 값
   • 주로 조건문과 비교 연산에서 사용

   let isAdmin = true;
   let isLoggedIn = false;
   

5. Null (널)
   • 의도적으로 값이 없음을 표현

   let emptyValue = null;
   

6. Undefined (정의되지 않음)
   • 변수가 선언되었지만 아직 값이 할당되지 않았을 때

   let notAssigned;
   console.log(notAssigned);  // undefined
   

 

null과 undefined의 차이

공통점: 값이 없음을 나타냄

null: 값이 없음을 의도적으로 나타냄 ← 개발자가 명시적으로 설정

undefined: 변수가 선언된 후 값이 할당되지 않음

 

1. Symbol (심볼)
   • 고유하고 변경 불가능한 값으로, 주로 객체의 속성 키를 충돌 없이 생성할 때 사용

   let uniqueId = Symbol("id");

 

비원시 데이터 타입 (객체 타입, Object)

1. Object (객체)
   • 키-값 쌍의 모음으로, 값은 어떤 타입이든 가능

   let user = {
     name: "Alice",
     age: 30,
     isAdmin: true
   };

   • 객체의 특별한 종류:
     • Array (배열): 값의 순서가 있는 리스트를 저장하는 특별한 타입의 객체입니다.
     • let colors = ["red", "green", "blue"];
     • Function (함수): 호출할 수 있는 객체로, 특정 작업을 수행합니다.

데이터 타입	설명	예시
Number	정수와 부동소수점 숫자를 표현	let age = 25;
String	텍스트를 표현 (문자열)	let name = "Alice";
Boolean	true 또는 false의 논리 값을 표현	let isAdmin = true;
Null	의도적으로 값이 없음을 나타냄	let value = null;
Undefined	변수가 값 없이 선언되었음을 나타냄	let notAssigned;
Symbol	고유한 식별자	let id = Symbol("id");
Object	키-값 쌍의 모음	let user = {name: "Alice"};

 

➕ 연산자

1. 산술 연산자 (Arithmetic Operators)

숫자에 대해 수학적 연산 수행

연산자 설명 예시 결과

+	덧셈	5 + 3	8
-	뺄셈	5 - 3	2
*	곱셈	5 * 3	15
/	나눗셈	9 / 3	3
%	나머지	9 % 2	1 (나머지)
++	증가 (1씩 증가)	let x = 5; x++	6
--	감소 (1씩 감소)	let y = 5; y--	4

 

2. 대입 연산자 (Assignment Operators)

변수에 값을 할당

 

연산자	설명	예시	결과
=	값 할당	x = 10	x가 10이 됨
+=	더한 후 할당	x += 5	x = x + 5
-=	뺀 후 할당	x -= 5	x = x - 5
*=	곱한 후 할당	x *= 5	x = x * 5
/=	나눈 후 할당	x /= 5	x = x / 5
%=	나머지를 구한 후 할당	x %= 5	x = x % 5

 

3. 비교 연산자 (Comparison Operators)

값을 비교하여 논리적인 결과 (true 또는 false)를 반환

 

연산자	설명	예시	결과
==	값이 같으면 true	5 == '5'	true
===	값과 타입이 모두 같으면 true	5 === '5'	false
!=	값이 다르면 true	5 != 3	true
!==	값과 타입이 모두 다르면 true	5 !== '5'	true
>	왼쪽 값이 더 크면 true	5 > 3	true
<	왼쪽 값이 더 작으면 true	5 < 3	false
>=	왼쪽 값이 크거나 같으면 true	5 >= 5	true
<=	왼쪽 값이 작거나 같으면 true	5 <= 5	true

 

4. 논리 연산자 (Logical Operators)

두 개 이상의 조건을 결합하거나 반대로 만들 때 사용

 

연산자	설명	예시	결과
&&	AND 연산: 두 조건 모두 true일 때만 true	true && false	false
||	OR 연산: 두 조건 중 하나만 true여도 true	true || false	true
!	NOT 연산: 값의 반대를 반환	!true	false

 

5. 삼항 연산자 (Ternary Operator)

조건이 true인지 false인지에 따라 다른 값을 반환

형식: condition ? expr1 : expr2

 

연산자	설명	예시	결과
? :	조건이 참이면 첫 번째 값, 거짓이면 두 번째 값	let result = (age > 18) ? "Adult" : "Minor";	"Adult" 또는 "Minor"

 

6. 타입 연산자 (Type Operators)

값의 타입을 확인하거나 객체의 속성을 조작

 

연산자	설명	예시	결과
typeof	데이터 타입을 반환	typeof 123	"number"
instanceof	객체가 특정 클래스의 인스턴스인지 확인	date instanceof Date	true
new	새 객체 생성	let person = new Object();	새로운 객체 생성

 

7. 비트 연산자 (Bitwise Operators)

숫자를 2진수로 변환하여 비트 단위로 연산을 수행

 

연산자	설명	예시	결과
&	AND	5 & 1	1
|	OR	5 | 1	5
^	XOR	5 ^ 1	4
~	NOT	~5	-6
<<	왼쪽 시프트	5 << 1	10
>>	오른쪽 시프트	5 >> 1	2

 

☝️ 조건문

1. if문

구문:

if (조건) {
  // 조건이 참일 때 실행되는 코드
}

예시:

let age = 18;

if (age >= 18) {
  console.log("성인입니다.");
}

2. else if문

구문:

if (조건1) {
  // 조건1이 참일 때 실행되는 코드
} else if (조건2) {
  // 조건2가 참일 때 실행되는 코드
}

예시:

let score = 85;

if (score >= 90) {
  console.log("A 등급입니다.");
} else if (score >= 80) {
  console.log("B 등급입니다.");
} else {
  console.log("C 등급입니다.");
}

3. else문

else는 모든 if나 else if 조건이 거짓일 때 실행됩니다.

구문:

if (조건1) {
  // 조건1이 참일 때 실행되는 코드
} else {
  // 조건1이 거짓일 때 실행되는 코드
}

예시:

let temperature = 10;

if (temperature > 20) {
  console.log("날씨가 따뜻합니다.");
} else {
  console.log("날씨가 춥습니다.");
}

4. switch문

switch문은 하나의 표현식 값을 여러 케이스와 비교하여 일치하는 경우 코드를 실행

구문:

switch (표현식) {
  case 값1:
    // 값1과 표현식이 일치할 때 실행되는 코드
    break;
  case 값2:
    // 값2와 표현식이 일치할 때 실행되는 코드
    break;
  default:
    // 모든 케이스가 일치하지 않을 때 실행되는 코드
}

예시:

let day = 2;

switch (day) {
  case 1:
    console.log("월요일");
    break;
  case 2:
    console.log("화요일");
    break;
  case 3:
    console.log("수요일");
    break;
  default:
    console.log("주말입니다.");
}

 

⏩ 반복문

1. for문

for문은 반복 횟수를 알고 있을 때 사용하며, 조건이 참일 동안 반복을 수행

 

구문:

for (초기화; 조건; 증감) {
  // 조건이 참일 때 실행되는 코드
}

예시:

for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4 출력

 

추가적으로, for...of를 사용하여 배열의 요소를 순회할 수 있다.

ex) for (let num of arr)

 

2. while문

while문은 조건이 참인 동안 반복을 수행하며, 조건이 거짓이 되면 반복이 종료

 

구문:

while (조건) {
  // 조건이 참일 때 실행되는 코드
}

예시:

let count = 0;

while (count < 5) {
  console.log(count);
  count++; // 0, 1, 2, 3, 4 출력
}

3. do...while문

do...while문은 먼저 코드를 실행한 후 조건을 검사하여, 조건이 참이면 반복 (최소 한 번은 실행)

구문:

do {
  // 코드 실행
} while (조건);

예시:

let i = 0;

do {
  console.log(i);
  i++;
} while (i < 5); // 0, 1, 2, 3, 4 출력

break와 continue

예시 (break):

for (let i = 0; i < 5; i++) {
  if (i === 3) {
    break;  // 3에서 반복 중단
  }
  console.log(i);  // 0, 1, 2 출력
}

예시 (continue):

for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue;  // 2는 건너뜀
  }
  console.log(i);  // 0, 1, 3, 4 출력
}