[TIL]JavaScript 기초 문법 정리

1. 변수 선언: var, let, const

자바스크립트에서 변수는 데이터를 저장하는 공간이다.

예전에는 var를 많이 사용했지만, 요즘은 let과 const를 사용하는 것이 기본이다.

let

값을 변경할 수 있는 변수를 선언할 때 사용한다.

let greeting = 'Hello, node.js!';
greeting = 'Welcome to JavaScript!';

const

한 번 값을 넣으면 재할당이 불가능한 변수를 선언할 때 사용한다.

const num = 1;
// num = 2; // 오류 발생

var

과거에 사용하던 변수 선언 방식이다.

지금은 특별한 이유가 없다면 let, const를 사용하는 것이 좋다.

---

2. 변수 이름 작성 규칙

변수 이름은 자유롭게 만들 수 있지만 몇 가지 규칙이 있다.

• 알파벳, 숫자, _, $ 사용 가능
• 숫자로 시작할 수 없음
• 예약어 사용 불가 (if, for 등)
• 대소문자를 구분함
• 의미 있는 이름을 쓰는 것이 좋음
• 보통 카멜 케이스(camelCase) 사용

let userName = "Alice";
let userAge = 30;

---

3. 원시 데이터 타입 (Primitive Type)

자바스크립트에서 가장 기본이 되는 값의 종류이다.

Number

숫자 타입

let age = 30;

String

문자열 타입

let language = "JavaScript";

Boolean

참 / 거짓을 나타내는 타입

let isStudent = true;

null

값이 없음을 의도적으로 나타낼 때 사용

let address = null;

undefined

값이 아직 할당되지 않은 상태

let salary;

typeof

데이터 타입을 확인할 때 사용한다.

console.log(typeof age); // number
console.log(typeof language); // string

---

4. 템플릿 리터럴

문자열을 더 편하게 작성하기 위해 사용하는 문법이다.

작은 따옴표나 큰 따옴표 대신 백틱(``) 을 사용한다.

기존 방식

console.log('사용자 이름: ' + userName + ', 나이: ' + userAge);

템플릿 리터럴 방식

console.log(`사용자 이름: ${userName}, 나이: ${userAge}`);

장점

• 문자열 안에 변수 넣기 쉬움
• 줄바꿈 가능
• 가독성이 좋음

let message = `안녕하세요.
반갑습니다.`;

요즘 자바스크립트에서는 템플릿 리터럴을 많이 사용한다.

---

5. 타입 변환

자바스크립트는 타입 변환이 자주 일어나는 언어다.

그래서 어떤 상황에서 값의 타입이 바뀌는지 이해하는 것이 중요하다.

---

6. 암묵적 타입 변환

자바스크립트 엔진이 자동으로 타입을 바꾸는 것이다.

문자열로 변환

console.log(10 + '20'); // "1020"

숫자 10이 문자열로 바뀌어서 이어 붙는다.

숫자로 변환

console.log(10 - '5'); // 5
console.log(10 * '5'); // 50
console.log(10 / '5'); // 2

문자열 '5'가 숫자로 변환된다.

불리언으로 변환

자바스크립트에는 참처럼 취급되는 값과 거짓처럼 취급되는 값이 있다.

Falsy 값

• false
• 0
• '' (빈 문자열)
• null
• undefined
• NaN

Truthy 값

Falsy를 제외한 대부분의 값

if ('') {
  console.log("실행");
} // 실행되지 않음

---

7. 명시적 타입 변환

개발자가 직접 타입을 바꾸는 것이다.

문자열로 변환

String(10); // "10"

숫자로 변환

Number('10'); // 10
parseInt('10.5'); // 10
parseFloat('10.5'); // 10.5

불리언으로 변환

Boolean('JS'); // true
Boolean(0); // false

암묵적 변환은 헷갈릴 수 있기 때문에, 필요한 경우 명시적으로 타입을 바꾸는 습관이 더 안전하다.

---

8. 연산자

산술 연산자

숫자 계산에 사용하는 연산자이다.

let a = 10;
let b = 3;

console.log(a + b); // 덧셈
console.log(a - b); // 뺄셈
console.log(a * b); // 곱셈
console.log(a / b); // 나눗셈
console.log(a % b); // 나머지
console.log(a ** b); // 거듭제곱

할당 연산자

let c = 5;
c += 3;
c -= 2;

증감 연산자

let d = 5;
d++;
++d;
d--;
--d;

---

9. 비교 연산자

두 값을 비교해서 true 또는 false를 반환한다.

동등 연산자 ==

값만 비교하고, 필요하면 타입도 자동 변환한다.

console.log(10 == '10'); // true

일치 연산자 ===

값과 타입까지 모두 비교한다.

console.log(10 === '10'); // false

실무에서는 ==보다 ===를 사용하는 것이 기본이다.

자동 형변환 때문에 예상치 못한 결과를 줄일 수 있기 때문이다.

대소 비교

console.log(10 > 5);   // true
console.log(10 <= 20); // true

---

10. 논리 연산자

여러 조건을 조합할 때 사용한다.

AND &&

둘 다 true여야 true

true && false // false

OR ||

하나라도 true면 true

true || false // true

NOT !

반대로 뒤집기

!true // false

---

11. 단축 평가 / Optional Chaining / Null 병합 연산자

자바스크립트는 조건 결과가 이미 정해지면 뒤를 끝까지 계산하지 않는다.

이 특성을 단축 평가라고 한다.

console.log('apple' || 'banana'); // apple
console.log('' || 'banana'); // banana

Optional Chaining ?.

객체가 null 또는 undefined일 때 에러 없이 접근할 수 있다.

const obj = null;
const value = obj?.name;

Null 병합 연산자 ??

왼쪽 값이 null 또는 undefined일 때만 기본값을 사용한다.

let test = null ?? '기본 값'; // 기본 값
let value = '' ?? '기본 값';  // ''

||와 ??는 비슷해 보여도 다르게 동작한다는 점이 중요하다.

---

12. 삼항 연산자

조건에 따라 두 값 중 하나를 선택하는 연산자이다.

let age = 20;
let result = (age >= 20) ? "성인" : "미성년자";

형식은 아래와 같다.

조건 ? 참일 때 값 : 거짓일 때 값

간단한 조건 분기에서 자주 사용된다.

---

13. 조건문

조건에 따라 다른 코드를 실행할 때 사용한다.

if / else

if (temperature < 10) {
  console.log("오늘은 춥습니다.");
} else {
  console.log("오늘은 날씨가 괜찮습니다.");
}

else if

if (score >= 90) {
  console.log("매우 우수");
} else if (score >= 70) {
  console.log("양호");
} else {
  console.log("부족");
}

switch

let fruit = '바나나';

switch (fruit) {
  case '사과':
    console.log('사과입니다.');
    break;
  case '바나나':
    console.log('바나나입니다.');
    break;
  default:
    console.log('알 수 없습니다.');
}

---

14. 반복문

같은 코드를 여러 번 실행할 때 사용한다.

for문

반복 횟수가 명확할 때 많이 사용한다.

for (let i = 1; i <= 5; i++) {
  console.log(`반복 횟수: ${i}`);
}

예시: 1부터 10까지 짝수만 출력

for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    console.log(i);
  }
}

---

오늘 배운 내용 정리

JavaScript의 가장 기본이 되는 문법을 전체적으로 정리했다.

• 변수 선언은 var보다 let, const를 사용하는 것이 기본
• let은 변경 가능, const는 재할당 불가능
• 문자열은 템플릿 리터럴로 작성하면 더 편리함
• 자바스크립트는 타입 변환이 자주 일어나기 때문에 주의가 필요함
• 비교할 때는 ==보다 ===를 사용하는 습관이 중요함
• 조건문과 반복문은 프로그램 흐름을 제어하는 핵심 문법임