# 먼저 익혀두면 좋은, 자바스크립트의 주요 키워드와 문법 요소들 (feat. const/let/var 호이스팅 개념, console.log())

 

내 질문:

자바스크립트의 주요 키워드를 15가지 정도로, 중요한 순서대로 예시도 덧붙여서 알려줘.

(이보다 더 많이 아는 게 좋다고 판단된다면, 더 알려줘도 좋아.)

 

 

자바스크립트에서 먼저 익히면 좋은 주요 키워드/문법 요소를 중요한 순서대로 정리해볼게.
엄밀히 말해 전부 “예약어”는 아니지만, 초보자가 코드를 읽고 쓰는 데 꼭 필요한 핵심 표현들까지 포함했어.

 순위          키워드                                  의미                                                                       예시

1	const	재할당하지 않을 변수 선언	const name = "Suji";
2	let	재할당 가능한 변수 선언	let count = 0; count = 1;
3	function	함수 선언	function greet() { console.log("Hi"); }
4	return	함수 결과 반환	return a + b;
5	if	조건문	if (age >= 20) { console.log("성인"); }
6	else	조건이 거짓일 때 실행	else { console.log("미성년자"); }
7	for	반복문	for (let i = 0; i < 5; i++) { console.log(i); }
8	while	조건 기반 반복문	while (count < 3) { count++; }
9	break	반복문/조건문 탈출	if (i === 3) break;
10	continue	이번 반복 건너뛰기	if (i % 2 === 0) continue;
11	switch	여러 조건 분기	switch (grade) { case "A": console.log("우수"); break; }
12	case / default	switch 안의 조건과 기본값	default: console.log("기타");
13	this	현재 객체 자신을 가리킴	this.name
14	class	클래스 선언	class User { constructor(name) { this.name = name; } }
15	new	객체 생성	const user = new User("Suji");
16	try / catch	에러 처리	try { risky(); } catch (e) { console.log(e); }
17	throw	직접 에러 발생	throw new Error("문제 발생");
18	async	비동기 함수 선언	async function getData() {}
19	await	비동기 작업이 끝날 때까지 기다림	const data = await fetch(url);
20	import / export	모듈 불러오기/내보내기	import App from "./App.js";

 

특히 먼저 익혀야 하는 5개

초반에는 아래 5개가 제일 중요해.

 

const name = "롤리";
let age = 20;

function introduce() {
  if (age >= 20) {
    return name + "는 성인입니다.";
  } else {
    return name + "는 미성년자입니다.";
  }
}

console.log(introduce());

 

여기에는 핵심 문법이 많이 들어가 있어.

 

const
let
function
if
else
return

 

 

추가로 꼭 알아두면 좋은 표현들

이것들은 “키워드”라기보다는 자바스크립트에서 정말 자주 쓰는 문법 요소야.

             표현                                                  의미                                                                       예시

=>	화살표 함수	const add = (a, b) => a + b;
===	값과 타입이 모두 같은지 비교	10 === "10" → false
!==	값 또는 타입이 다른지 비교	10 !== "10" → true
&&	그리고, AND	age >= 20 && hasCard
`		`
!	부정, NOT	!isLogin
typeof	자료형 확인	typeof "hello" → "string"
null	의도적으로 비어 있음	let user = null;
undefined	값이 아직 없음	let x; console.log(x);
true / false	불리언 값	let isLogin = true;

 

웹개발 기준 추천 학습 순서

자바스크립트를 웹개발에서 쓸 거라면 이 순서로 공부하면 좋아.

1. const, let
2. 자료형: 문자열, 숫자, 불리언, 배열, 객체
3. if, else
4. for, while
5. function, return
6. 화살표 함수 =>
7. 배열 메서드: map, filter, forEach, find
8. 객체와 this
9. DOM 조작: querySelector, addEventListener
10. 비동기: fetch, async, await

처음에는 var보다 const와 let을 우선 사용하면 돼. var는 오래된 코드에서 많이 보이지만, 새로 작성하는 코드에서는 보통 권장하지 않아.

 

---

 

내 질문:

좋아. 그럼 const와 let을 알기 쉽게, 예시를 들어 설명해줄래?

그리고 어떤 때는 const를 사용하고 어떤 때는 let을 사용하는지도 궁금해.

var를 요즘엔 권장하지 않는다고 했는데,

그 이유가 호이스팅? 때문이었던 거 같은데, 그 개념에 대해서도 다시 한 번 짚어주고,

그럼 var를 쓰던 상황을 이제는 뭐가 대체했는지도 이해하기 쉽게 알려줘.

 

 

좋아. 핵심부터 말하면:

const는 “다시 대입하지 않을 변수”,
**let은 “나중에 값이 바뀔 변수”**를 만들 때 사용해.

둘 다 요즘 자바스크립트에서 가장 많이 쓰는 변수 선언 방식이고, **기본은 const, 필요할 때만 let**이라고 생각하면 좋아.

---

1. const란?

const는 constant, 즉 “상수”라는 뜻이야.
한 번 값을 넣으면 같은 변수 이름에 다른 값을 다시 넣을 수 없어.

 

const name = "롤리";

name = "수지"; 
// 에러 발생!

 

const name = "롤리";라고 선언했으면, name이라는 변수에는 다시 다른 값을 넣을 수 없어.

즉, 이런 상황에서 사용해.

 

const birthYear = 2000;
const siteName = "My Retro SNS";
const maxPageCount = 10;

 

생년, 사이트 이름, 페이지당 게시글 수처럼 중간에 바뀌면 안 되거나, 바꿀 필요가 없는 값에 잘 어울려.

---

2. let이란?

let은 값이 나중에 바뀔 수 있는 변수를 만들 때 사용해.

 

let count = 0;

count = 1;
count = 2;

console.log(count); // 2

 

처음에는 0이었다가, 나중에 1, 2로 바뀌었지?
이런 경우에는 let을 써야 해.

예를 들어 장바구니 수량, 반복문의 숫자, 로그인 상태처럼 변할 수 있는 값이야.

 

let cartCount = 0;

cartCount = cartCount + 1;
cartCount = cartCount + 1;

console.log(cartCount); // 2

 

---

3. 언제 const, 언제 let을 쓸까?

기준은 아주 단순해.

                                                                                 상황                                                                                      사용

값이 바뀌지 않는다	const
값이 나중에 바뀐다	let
옛날 방식 코드이거나 특별한 이유가 있다	var

실무에서는 보통 이렇게 생각하면 돼.

일단 const로 선언한다.
나중에 값을 바꿔야 하면 그때 let으로 바꾼다.

예를 들어:

 

const userName = "롤리";
const age = 20;

console.log(userName);
console.log(age);

 

이 값들은 다시 바꿀 계획이 없으니까 const.

반면 이런 코드는 let.

 

let score = 0;

score = score + 10;
score = score + 20;

console.log(score); // 30

 

점수는 계속 변하니까 let이 적절해.

---

4. 반복문에서는 let을 많이 쓴다

반복문에서는 숫자가 계속 바뀌기 때문에 let을 사용해.

 

for (let i = 0; i < 5; i++) {
  console.log(i);
}

 

여기서 i는 이렇게 변해.

 

0
1
2
3
4

 

즉, i는 반복할 때마다 값이 바뀌니까 let이 맞아.

---

5. 그런데 const 객체나 배열은 수정 가능하다

여기서 헷갈리기 쉬운 부분이 있어.

const는 변수에 새 값을 다시 대입하는 것을 막는 거야.
객체나 배열의 내용 변경까지 완전히 막는 것은 아니야.

예를 들어:

 

const user = {
  name: "롤리",
  age: 20
};

user.age = 21;

console.log(user);
// { name: "롤리", age: 21 }

 

이건 가능해.

하지만 이건 안 돼.

 

const user = {
  name: "롤리",
  age: 20
};

user = {
  name: "수지",
  age: 22
};
// 에러 발생!

 

왜냐하면 user라는 변수 자체에 새 객체를 다시 대입하려고 했기 때문이야.

배열도 마찬가지야.

 

const fruits = ["apple", "banana"];

fruits.push("orange");

console.log(fruits);
// ["apple", "banana", "orange"]

 

가능해.

하지만 이건 안 돼.

 

const fruits = ["apple", "banana"];

fruits = ["grape", "melon"];
// 에러 발생!

 

정리하면:

                                                                            코드                                                                                     가능 여부

const arr = []; arr.push(1);	가능
const arr = []; arr = [1, 2, 3];	불가능
const obj = {}; obj.name = "롤리";	가능
const obj = {}; obj = { name: "롤리" };	불가능

---

6. var는 왜 요즘 권장하지 않을까?

var는 예전 자바스크립트에서 쓰던 변수 선언 방식이야.

 

var name = "롤리";

 

지금도 동작은 하지만, 요즘은 새 코드에서 거의 권장하지 않아.
가장 큰 이유는 다음 세 가지야.

1. 호이스팅 때문에 헷갈리는 코드가 생김
2. 블록 스코프를 따르지 않음
3. 같은 이름으로 재선언이 가능해서 실수하기 쉬움

하나씩 볼게.

---

7. 호이스팅이란?

호이스팅, hoisting은 쉽게 말하면:

자바스크립트가 코드를 실행하기 전에
변수나 함수 선언을 위로 끌어올린 것처럼 처리하는 현상

이런 뜻이야.

예를 들어 이 코드를 보자.

 

console.log(name);

var name = "롤리";

 

보통 생각하면 name을 만들기도 전에 출력했으니까 에러가 날 것 같지?

그런데 var는 에러가 아니라 이렇게 나와.

 

undefined

 

왜냐하면 자바스크립트가 내부적으로 이런 식으로 처리하기 때문이야.

 

var name;

console.log(name);

name = "롤리";

 

즉, var name 선언은 위로 올라가지만, "롤리"라는 값까지 같이 올라가지는 않아.

그래서 결과가 undefined가 되는 거야.

---

8. let, const도 호이스팅은 된다

중요한 점이 있어.

많은 사람들이 “let과 const는 호이스팅이 안 된다”고 말하는데, 엄밀히는 아니야.

let과 const도 호이스팅은 돼.
하지만 선언 전에 접근할 수 없게 막아둔다고 이해하면 좋아.

 

console.log(name);

let name = "롤리";

 

이 코드는 에러가 나.

 

ReferenceError

 

const도 마찬가지야.

 

console.log(age);

const age = 20;

 

이것도 에러가 나.

이렇게 let과 const는 선언 전에 사용하면 바로 에러가 나기 때문에, 오히려 실수를 빨리 발견할 수 있어.

이 선언 전 접근 불가능한 구간을 TDZ, Temporal Dead Zone이라고 불러.

너무 어렵게 외울 필요는 없고, 지금은 이렇게 기억하면 충분해.

var는 선언 전에 사용해도 undefined가 나와서 실수를 숨길 수 있다.
let과 const는 선언 전에 사용하면 에러가 나서 실수를 빨리 잡아준다.

---

9. var의 또 다른 문제: 블록 스코프가 아니다

let과 const는 블록 스코프를 따라.

블록은 { } 중괄호 영역을 말해.

 

if (true) {
  let message = "안녕";
}

console.log(message);
// 에러 발생

 

message는 { } 안에서 만든 변수니까 밖에서는 사용할 수 없어.

const도 마찬가지야.

 

if (true) {
  const message = "안녕";
}

console.log(message);
// 에러 발생

 

이게 자연스럽고 안전한 방식이야.

그런데 var는 다르게 동작해.

 

if (true) {
  var message = "안녕";
}

console.log(message);
// "안녕"

 

var는 { } 블록을 무시하고 밖에서도 접근돼.
이러면 큰 코드에서 예상치 못한 변수 충돌이 생기기 쉬워.

---

10. var는 같은 이름으로 또 선언할 수 있다

var는 같은 이름으로 여러 번 선언해도 에러가 안 나.

 

var name = "롤리";
var name = "수지";

console.log(name); // "수지"

 

작은 코드에서는 별문제 없어 보이지만, 코드가 길어지면 누군가 실수로 같은 변수명을 다시 써도 에러가 나지 않아.

반면 let과 const는 같은 범위에서 재선언하면 에러가 나.

 

let name = "롤리";
let name = "수지";
// 에러 발생

 

 

const age = 20;
const age = 30;
// 에러 발생

 

그래서 실수를 더 빨리 잡을 수 있어.

---

11. 그럼 예전의 var는 지금 무엇이 대체했을까?

대부분 이렇게 대체됐어.

                              예전 방식                                                                                    요즘 방식

값이 변하지 않는 var	const
값이 변하는 var	let
반복문 안의 var i	let i
전역에서 쓰던 var	필요한 범위 안에서 const 또는 let
함수 선언용 var	function, const 함수명 = () => {}

예전 코드:

 

var userName = "롤리";
var count = 0;

count = count + 1;

 

요즘 코드:

 

const userName = "롤리";
let count = 0;

count = count + 1;

 

함수도 예전에는 이렇게 많이 썼어.

 

var add = function(a, b) {
  return a + b;
};

 

요즘은 보통 이렇게 많이 써.

 

const add = function(a, b) {
  return a + b;
};

 

또는 화살표 함수로:

 

const add = (a, b) => {
  return a + b;
};

 

더 짧게는:

 

const add = (a, b) => a + b;

 

---

12. 실전 기준으로 보면 이렇게 쓰면 된다

const를 쓰는 경우

 

const userId = "qhtjrwoddl";
const maxLength = 100;
const button = document.querySelector("#submitBtn");
const posts = [];
const user = {
  name: "롤리",
  level: 1
};

 

값 자체를 다른 것으로 다시 바꿀 일이 없다면 const.

특히 DOM 요소를 가져올 때도 const를 자주 써.

 

const title = document.querySelector(".title");

 

title이라는 변수에 다른 요소를 다시 넣을 일이 거의 없기 때문이야.

---

let을 쓰는 경우

 

let count = 0;
let totalPrice = 0;
let isLogin = false;
let currentPage = 1;

 

값이 흐름에 따라 바뀌면 let.

 

let currentPage = 1;

currentPage = currentPage + 1;

console.log(currentPage); // 2

 

로그인 상태도 예시로 보면:

 

let isLogin = false;

isLogin = true;

 

처음엔 로그인 안 된 상태였다가 나중에 로그인 상태로 바뀌니까 let이 자연스러워.

---

13. 한 번에 비교해보자

 

const userName = "롤리";
let point = 0;

point = point + 10;
point = point + 20;

console.log(userName); // "롤리"
console.log(point);    // 30

 

여기서 userName은 바뀌지 않으니까 const.

point는 계속 변하니까 let.

---

14. 결론

자바스크립트 변수 선언은 이렇게 기억하면 돼.

 

const = 다시 대입하지 않을 값
let = 나중에 바뀔 값
var = 예전 방식, 새 코드에서는 웬만하면 사용하지 않음

 

가장 실용적인 규칙은 이거야.

기본은 const로 선언한다.
값을 바꿔야 하는 경우에만 let을 쓴다.
var는 오래된 코드 읽을 때 알아두되, 새로 작성할 때는 피한다.

var를 피하는 이유는 단순히 “호이스팅 때문”만은 아니고, 호이스팅 + 블록 스코프 미지원 + 재선언 허용 때문에 코드가 커질수록 실수하기 쉬워서야.

 

---

 

내 질문:

그럼 알려주는 김에 console.log에 대해서도 알기 쉽게 알려줄래?

이게 정확하게 무슨 역할을 하는지, 어떻게 쓰이고 있는지 코드 예시도 보여주면서 설명해주고.

파이썬의 print()와 같은 기능을 한다고 이해하면 되는 건지도 알려줘.

 

 

좋아. console.log()는 자바스크립트에서 값을 확인하기 위해 콘솔에 출력하는 명령어야.

쉽게 말하면:

 

console.log("안녕");

 

이 코드를 실행하면 콘솔에 이렇게 출력돼.

안녕

 

---

1. console.log()는 정확히 무슨 역할을 할까?

console.log()는 코드 중간에서 변수의 값, 계산 결과, 실행 흐름을 확인할 때 사용해.

예를 들어:

 

const name = "롤리";
let age = 20;

console.log(name);
console.log(age);

 

출력 결과:

롤리
20

 

즉, name 안에 뭐가 들어있는지, age 값이 뭔지 확인할 수 있어.

---

2. console.log를 쪼개서 보면

 

console.log("hello");

 

여기서:

                      부분                                                                                         의미

console	콘솔 기능을 가진 객체
.log	콘솔에 기록/출력하는 기능
("hello")	출력하고 싶은 값

즉, console.log()는 console이라는 도구 안에 있는 log 기능을 실행한다고 보면 돼.

---

3. 가장 기본적인 사용법

문자열 출력

 

console.log("Hello JavaScript");

 

결과:

Hello JavaScript

 

숫자 출력

 

console.log(100);

 

결과:

100

 

계산 결과 출력

 

console.log(10 + 20);

 

결과:

30

 

변수 출력

 

const userName = "수지";
console.log(userName);

 

결과:

수지

 

---

4. 여러 값을 한 번에 출력할 수도 있다

 

const name = "롤리";
const age = 20;

console.log(name, age);

 

결과:

롤리 20

 

이런 식으로 설명 문구와 변수 값을 같이 출력하는 경우가 많아.

 

const score = 85;

console.log("점수:", score);

 

결과:

점수: 85

 

이 방식은 디버깅할 때 정말 자주 써.

---

5. 코드가 잘 실행되는지 확인할 때 쓴다

예를 들어 조건문이 있다고 해보자.

 

const age = 20;

if (age >= 20) {
  console.log("성인입니다.");
} else {
  console.log("미성년자입니다.");
}

 

결과:

성인입니다.

 

이렇게 console.log()를 넣으면 어느 코드가 실행됐는지 확인할 수 있어.

---

6. 반복문에서도 자주 쓴다

 

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

 

결과:

1
2
3
4
5

 

반복문을 공부할 때 console.log()는 거의 필수야.
i 값이 어떻게 바뀌는지 눈으로 확인할 수 있기 때문이야.

---

7. 배열이나 객체도 출력할 수 있다

배열 출력

 

const fruits = ["apple", "banana", "orange"];

console.log(fruits);

 

결과:

["apple", "banana", "orange"]

 

객체 출력

 

const user = {
  name: "롤리",
  age: 20,
  isLogin: true
};

console.log(user);

 

결과:

{
  name: "롤리",
  age: 20,
  isLogin: true
}

 

브라우저 개발자 도구에서는 객체나 배열을 펼쳐서 볼 수 있어서, 데이터 구조를 확인할 때 아주 유용해.

---

8. 파이썬의 print()와 같은 기능일까?

기본적으로는 비슷하게 이해해도 돼.

파이썬:

 

name = "롤리"
print(name)

 

자바스크립트:

 

const name = "롤리";
console.log(name);

 

둘 다 값을 화면에 출력해서 확인하는 용도로 쓰여.

다만 차이가 있어.

                      구분                             Python print()                                      JavaScript console.log()

주 사용 위치	터미널/콘솔	브라우저 개발자 도구 콘솔, Node.js 터미널
목적	값 출력	값 출력, 디버깅
웹페이지에 보이나?	해당 없음	웹페이지 화면에는 직접 보이지 않음
개발자 확인용인가?	보통 확인용	거의 개발자 확인용

가장 중요한 차이는 이거야.

console.log()는 웹페이지 화면에 글자를 보여주는 기능이 아니라, 개발자 콘솔에 출력하는 기능이야.

---

9. console.log()는 웹페이지에 출력하는 게 아니다

예를 들어 HTML/JS에서 이렇게 작성했다고 해보자.

 

console.log("안녕하세요!");

 

그러면 웹페이지 본문에 안녕하세요!가 보이는 게 아니야.

브라우저에서 F12를 누르거나, 우클릭 → 검사 → Console 탭을 열면 거기에 출력돼.

웹페이지에 실제로 보여주고 싶다면 이런 식으로 해야 해.

 

<p id="message"></p>

<script>
  document.querySelector("#message").textContent = "안녕하세요!";
</script>

 

이 경우에는 페이지에 글자가 보이고, console.log()는 개발자가 확인하는 콘솔에만 보여.

---

10. 실전에서 가장 많이 쓰는 패턴

자바스크립트 공부할 때는 이런 식으로 많이 써.

 

const userName = "롤리";
let point = 0;

console.log("처음 점수:", point);

point = point + 10;

console.log("10점 추가 후:", point);

point = point + 20;

console.log("20점 추가 후:", point);

 

결과:

처음 점수: 0
10점 추가 후: 10
20점 추가 후: 30

 

이렇게 하면 코드가 실행되면서 값이 어떻게 바뀌는지 확인할 수 있어.

---

11. 에러 찾을 때도 사용한다

예를 들어 버튼을 클릭했을 때 코드가 실행되는지 확인하고 싶다면:

 

const button = document.querySelector("#loginBtn");

button.addEventListener("click", function () {
  console.log("버튼이 클릭됨");
});

 

버튼을 눌렀을 때 콘솔에 "버튼이 클릭됨"이 나오면, 클릭 이벤트가 정상적으로 연결된 거야.

그다음에는 이렇게 실제 값을 확인할 수도 있어.

 

const input = document.querySelector("#userId");

console.log(input.value);

 

입력창에 어떤 값이 들어왔는지 확인할 때 사용해.

---

12. 정리

console.log()는 이렇게 이해하면 돼.

 

console.log(확인하고_싶은_값);

 

주요 용도는:

                                용도                                                                                          예시

변수 값 확인	console.log(name);
계산 결과 확인	console.log(10 + 20);
코드 실행 여부 확인	console.log("여기 실행됨");
배열/객체 확인	console.log(user);
디버깅	console.log("현재 점수:", score);

결론적으로, 파이썬의 print()와 비슷한 역할이라고 이해해도 좋아.
다만 자바스크립트에서는 보통 웹페이지 화면 출력용이 아니라 개발자 콘솔에서 확인하는 디버깅 도구로 사용한다는 점이 중요해.

 

 

 

By. ChatGPT