[멋사 프론트엔드 부트캠프 14기] Learn JavaScript | Day 2

자바스크립트 기초 정리 - 주석, 세미콜론, 데이터 타입, 변수, 함수

오늘은 JavaScript에서 꼭 알아야 할 개념들을 배웠다.

처음 배우는 JavaScript인 만큼 수업에 집중해서 기초부터 차근히 다져가자!

---

주석 (Comments)

| 한 줄 주석

// 한 줄 주석이다.

| 여러 줄 주석

/* 여러 줄 주석입니다. 
여러 줄에 걸쳐 설명할 수 있다. */

주석은 JavaScript 파일 내부에서 코드 설명을 남길 때 사용

---

; 세미콜론 (Semicolons)

| 꼭 써야 할까? 🤔

JavaScript는 줄 끝마다 세미콜론(;)을 붙이는 언어지만, 생략해도 동작하는 경우가 많다고 한다.
이는 ASI(Automatic Semicolon Insertion) 기능 덕분이다.

console.log(2025); 
console.log(6) 
console.log(10);

 

위처럼 세미콜론을 생략해도 대부분의 경우 실행된다.
하지만 코드 압축 시 오류가 발생할 수 있기 때문에, 명시적으로 붙이는 것을 권장한다.

 

세미콜론을 사용하려면...

• 세미콜론을 써야할 때, 쓰면 안될 때를 구별해야한다.
• 그래서 “세미콜론을 항상 쓰자”라면 신경 써야할게 많다.

세미콜론을 사용하지 않으려면...

• 절대 [, {, ‘로 줄을 시작하지 않는 것!
• 쓰게 된다면 줄 앞에 세미콜론 붙여주면 됨.

팀 프로젝트에서는?

• 팀마다 세미콜론 사용 여부를 통일하는 것이 중요하다.
• Prettier, ESLint 같은 린터 도구를 사용해 자동으로 맞춰주는 것이 편하다!

---

기본 데이터 타입 (Primitive Types)

JavaScript에는 총 7가지의 기본 타입이 존재한다.

1. String (문자열)
2. Number (숫자)
3. Boolean (불리언)
4. Null (널)
5. Undefined (언디파인드)
6. Symbol (심볼)
7. BigInt (빅인트)

 

1. 문자열 (String)

console.log("It's my birthday!");
console.log('나의 기록은 12\'26\"입니다.');
console.log('기록: ' + "12'26\"");

• 문자열은 ' 또는 "로 감싼다.
• 문자열은 + 연산자로 연결할 수 있다.

 

2. 숫자 (Number)

console.log(123 + 456); 
console.log(1_000_000_000); // 자릿수 구분자 사용 가능​

• 정수, 소수 모두 포함
• 산술 연산: +, -, *, /, % 사용 가능
• 안전 범위는 Number.MIN_SAFE_INTEGER, Number.MAX_SAFE_INTEGER 참고

 

3. 불리언 (Boolean)

console.log(true); 
console.log(false);

• true 또는 false 두 값만 존재

 

4. Null

console.log(null); // 의도적으로 '없음'을 나타냄

 

5. Undefined

let result; 
console.log(result); // 값이 정의되지 않음

 

6. Symbol

console.log(Symbol('id'));

• 고유한 식별자가 필요할 때 사용
• 객체에 속성을 추가할 때 고유한 키를 부여하여 다른 코드와 충돌하지 않도록 할 때 많이 쓰임

 

7. BigInt

console.log(BigInt(Number.MAX_SAFE_INTEGER + 10))
console.log(10000000000n); // n을 붙이면 BigInt로 인식

• 매우 큰 정수를 다룰 수 있음

---

변수 (Variables)

| 변수란?

• 데이터를 기억하고 재사용하기 위한 이름 있는 저장 공간
• 의미 있는 변수명을 사용하면 코드의 가독성과 이해도가 높아짐.

let count = 10; 
const MAX_VALUE = 100;

 

 

| 변수 선언 키워드

키워드	설명	재할당	권장 여부
let	일반 변수	✅ 가능	✅
const	상수 (변경 불가)	❌ 불가	✅
var	예전 방식	✅ 가능	❌ (지양)

 

| 변수 이름 규칙

• 숫자로 시작 ❌
• 특수문자 중 _, $만 허용
• 예약어 사용 금지
• 카멜 표기법 사용 권장 (예: myVariableName)

let totalApples = 31;

 

| var vs let

1. var myName

{
  var myName;
  console.log(1, myName);   // ✅ undefined (호이스팅)
  myName = 'apple';
  console.log(2, myName);   // ✅ apple
}

myName = 'pineapple';       // ✅ 가능: var은 블록 밖에서도 접근됨
console.log(3, myName);     // ✅ pineapple

• var는 블록 {}을 무시하고 해당 함수 전체나 전역 범위로 끌어올려짐.
• 그래서 블록 외부에서도 myName을 계속 사용할 수 있다.

 

2. let myName2

{
  let myName2;
  console.log(1, myName2);   // ✅ undefined
  myName2 = 'apple';
  console.log(2, myName2);   // ✅ apple
}

myName2 = 'pineapple';       // ❌ ReferenceError
console.log(3, myName2);

• let은 블록 스코프라서 {} 블록 바깥에서는 존재하지 않는 변수로 취급
• 따라서 myName2 = 'pineapple' 부분에서 ReferenceError 발생

 

요약 정리

구분	var	let
선언 위치	함수 스코프	블록 스코프
블록 바깥에서 접근	✅ 가능	❌ ReferenceError
호이스팅 시 초기화	undefined	TDZ(선언 전 접근 불가)
실무 사용	❌ 지양	✅ 표준 방식

 

| const vs let

const - 상수

: 처음 선언 시 할당된 값이 이후에 변경되지 않음

 

let - 변수

: 시간의 흐름에 따라 값이 변경됨

---

함수 (Functions)

| 함수란?

• 특정 작업을 실행하는 코드 블록
• 입력 → 처리 → 출력 구조

function sayHello(name) { 
	return 'Hello, ' + name; 
} 

console.log(sayHello('Alice')); // Hello, Alice​

• 함수는 function 키워드로 선언
• ()를 붙이면 함수 실행
• 매개변수(Parameter)는 함수 내부에서 사용할 변수
• 인수(Argument)는 함수 호출 시 전달하는 값

 

| 함수 이름 작성 규칙

• 숫자로 시작 ❌
• 공백 ❌
• 의미 있는 이름 사용
• 카멜케이스 사용 (drawWater, sayHello 등)

 

| 매개변수 vs 인수

function greet(name) { 
	// name = 매개변수 
    console.log("Hello " + name); 
} 

greet("Bob"); // "Bob" = 인수

 

| 예시: 일기 작성 함수

function writeDiary(year, month, day) { 
	console.log(`${year}년 ${month}월 ${day}일에 일기를 씁니다.`); 
    } 
    
writeDiary(2025, 6, 10);

> 2025년 6월 10일에 일기를 씁니다.

 

---

오늘의 느낀 점 !

처음 배우는 JavaScript 였지만, 다른 언어들을 해본 적 있어서 그런지 다행히도 이해가 어렵지는 않았다.

그렇지만 타 언어랑 다른 부분도 존재하기 때문에 조금 헷갈려서 역시 복습을 안하면 안될 것 같다😭

나중에 본격적으로 코드 작성을 하게 된다면 조금 어질어질해질 것 같지만?

"포기하지 않고 나아가다보면 마스터하겠지~!!" 라는 마인드로 열심히 배워나가기!