코딩자율학습단 19기 | 11일차 학습일지 – 변수/상수(let·const) · 자료형 · 연산자 우선순위/형변환

오늘 학습 정보

• 날짜/Day: 2026/01/26 (Day11)
• 교재 범위: ~ 9.3 연산자(p.331~365)

• 출처: 코딩 자율학습단 카카오톡 채널 메시지 캡처

오늘의 핵심 키워드 3개

• 핵심 키워드 1: 변수/상수 선언(var·let·const)
• 핵심 키워드 2: 문자열 처리(따옴표·이스케이프·템플릿 문자열)
• 핵심 키워드 3: 연산자(비교/논리/우선순위 + 형 변환)

개념 정리(가장 중요)

2-1) 변수/상수 선언과 동작(var·let·const)

역할: 값을 저장(변수)하거나, 바뀌지 않는 값을 고정(상수)하기 위한 “식별자”를 만드는 것

핵심 포인트:

• 변수 선언 기본 형태: 키워드 식별자 = 값; (세미콜론으로 문장 종료)
• 용어 정리: 선언(변수 만들기) / 할당(값 넣기) / 초기화(선언과 동시에 첫 값 넣기)
• let: 같은 이름 재선언 불가, var보다 안전하게 변수 선언에 사용
• var: 호이스팅으로 선언이 위로 끌어올려진 것처럼 동작(선언 전에 접근 시 undefined가 나올 수 있음)
• const: 상수 선언 시 반드시 초기화 필요(값 없이 선언하면 오류)

짧은 예시(코드):

// 선언 + 초기화
let num = 10 + 20;

// 선언만 (var는 가능)
var a;
a = 10;

// const는 초기화 필수
const PI = 3.14;

2-2) 식별자(변수/상수 이름) 명명 규칙

역할: 변수/상수를 “구분”하기 위한 이름 규칙 정리

핵심 포인트:

• 강제 규칙(안 지키면 오류)
  • 키워드 사용 불가(var, let, const 등)
  • 공백 포함 불가
  • 첫 글자는 영문/언더스코어(_) / 달러($)만 가능(숫자로 시작 불가)
• 관용 규칙(가독성 권장)
  • 의미 있는 단어 사용, 가능하면 영문으로 통일
• 표기법: camelCase / underscore_case / PascalCase

짧은 예시(코드):

let mySchool; // camelCase
let my_school; // underscore_case
let MySchool; // PascalCase(주로 클래스/생성자에 사용)

2-3) 자료형(data type) 정리(문자열/숫자/논리/undefined/null/객체·배열)

역할: 값의 “종류”를 구분해 올바르게 저장·연산하기

핵심 포인트:

• 기본(primitive): string, number, boolean, undefined, null, Symbol
• 참조(reference): object(객체)
• 문자열(string)
  • 큰따옴표/작은따옴표로 감싼 값(시작/끝 따옴표가 다르면 오류)
  • 문자열 안에 따옴표가 있으면 다른 따옴표로 감싸거나, 이스케이프() 사용
  • 둘 다 섞이면 문자열 연결(+) 또는 이스케이프 문자로 처리
  • 템플릿 문자열(백틱 )은 Enter 줄바꿈이 그대로 적용 + ${}` 사용 가능
• 숫자(number)
  • 정수/실수 구분 없이 number 하나로 처리
  • 실수 연산은 부동소수점 특성상 오차가 날 수 있음(예: 0.1+0.2)
• 논리(boolean): true/false
• undefined vs null
  • undefined: 값이 “할당되지 않음”
  • null: 의도적으로 “비어있음”을 넣는 값
• 배열(array) / 객체(object)
  • 배열: 여러 값을 순서대로 저장, 인덱스는 0부터
  • 객체 리터럴: 키-값 형태로 의미를 붙여 저장(배열보다 의미 파악이 쉬움)

짧은 예시(코드):

// 문자열 따옴표
let s1 = "Hello, JavaScript";
let s2 = 'Hello, JavaScript';

// 이스케이프와 템플릿 문자열
let msg1 = "문자열에 \"큰따옴표\" 포함";
let msg2 = `여러 줄
그대로 출력`;

// 실수 오차
let sum = 0.1 + 0.2; // 0.30000000000000004가 나올 수 있음

// 배열(0부터 시작)
let scores = [80, 70, 90, 60];
console.log(scores[1]); // 70

// 객체(키로 의미 부여)
let studentScore = { koreanScore: 80, englishScore: 70, mathScore: 90, scienceScore: 60 };
console.log(studentScore.koreanScore); // 80
console.log(studentScore["englishScore"]); // 70

2-4) 연산자(산술/대입/비교/논리/삼항/우선순위) + 형 변환

역할: 값을 계산하거나 비교하고, 조건에 따라 값을 선택하기

핵심 포인트:

• 산술 연산자: + – * / % **
• 단항 연산자: ++, –(전치/후치 결과 차이), 단항 부정 –
  • 증가/감소는 “변수”에만 적용 가능(리터럴 10++ 같은 건 오류)
• 대입/복합 대입: =, +=, -=, *=, /=, %=, **=
• 비교 연산자
  • ==(값만 비교) vs ===(값+자료형까지 비교)
  • != vs !==도 동일한 관점
• 논리 연산자(단축 평가)
  • &&: 왼쪽부터 평가, 거짓이 나오면 그 값을 즉시 반환
  • ||: 왼쪽부터 평가, 참이 나오면 그 값을 즉시 반환
  • !: 논리 반전(괄호 위치에 따라 결과 달라질 수 있음)
  • 자바스크립트는 일부 값이 false처럼 평가됨(예: “”, 0, undefined, null)
• 삼항 연산자: 조건 ? 값1 : 값2
• 우선순위
  • 산술에서 곱셈이 덧셈보다 먼저 계산되듯, JS도 연산자 우선순위/결합 방향이 있음
  • 헷갈리면 괄호로 의도를 고정하는 게 안전
• 형 변환
  • 암시적 형 변환: 10 + “10” → 문자열 연결처럼 동작
  • 명시적 형 변환: String(num)처럼 의도를 코드에 드러냄(권장)

짧은 예시(코드):

// 우선순위
let a = 10 + 20 * 3; // 70
let b = (10 + 20) * 3; // 90

// 비교: == vs ===
console.log(10 == "10"); // true
console.log(10 === "10"); // false

// 형 변환
const r1 = 10 + "10"; // "1010" (암시적)
const r2 = String(10) + "10"; // "1010" (명시적)

이슈 로그

• var는 선언 전에 접근했을 때 undefined가 나오는 케이스가 있어서(호이스팅) 디버깅이 어려울 수 있어서 앞으로는 기본적으로 let/const를 우선 사용할 겁니다.
• ==와 ===는 결과가 달라 헷갈렸는데, 비교는 원칙적으로 ===를 쓰는 쪽이 의도가 명확하다고 생각합니다.

학습단 도서

• 「코딩 자율학습 HTML + CSS + 자바스크립트」