JavaScript 기초 (반복문, 함수, 스코프, 클로저, 자료구조)
오늘은 자바스크립트의 핵심 기초 개념들을 학습했다.
처음 접하는 언어이다 보니 문법 자체도 낯설었고, 단순히 코드를 읽는 것만으로는 흐름이 바로 이해되지 않았다.
하지만 강의를 듣고, 실습 코드를 분석하고, 이해가 부족한 부분을 따로 정리하면서 자바스크립트의 동작 원리를 조금씩 이해할 수 있었다.
1) 반복문
반복문은 같은 작업을 여러 번 수행할 때 사용한다.
while
let count = 1;
while (count <= 3) {
console.log(count);
count++;
}출력
1
2
3while문은 조건이 true인 동안 계속 실행된다.
하지만 증감식이 없으면:
while (count <= 3) {
console.log(count);
}조건이 영원히 true가 되므로 무한루프가 된다.
즉, while문에서는 종료 조건과 값 변화가 매우 중요하다.
for
for (let i = 0; i < 5; i++) {
console.log(i);
}구조:
초기값
조건식
증감식for-of
const foods = ["김밥", "라면", "떡볶이"];
for (const food of foods) {
console.log(food);
}출력
김밥
라면
떡볶이배열의 값을 직접 꺼낼 때 편리하다.
for-in
const student = {
name: "민수",
age: 22
};
for (const keyName in student) {
console.log(keyName, student[keyName]);
}출력:
name 민수
age 22객체의 key를 순회할 때 사용한다.
2) 함수
함수는 여러 코드를 묶어서 필요할 때 재사용할 수 있게 만든 코드 블록이다.
function sayHello(userName) {
return `안녕하세요, ${userName}님`;
}
console.log(sayHello("철수"));함수를 사용하면:
- 반복 코드 제거
- 코드 재사용 가능
- 유지보수 쉬움
3) 호이스팅
아래 코드는 정상적으로 작동할까?
showMessage();
function showMessage() {
console.log("hello");
}정상적으로 실행된다.
왜 실행될까?
자바스크립트는 실행 전에 함수 선언을 먼저 위로 올려 메모리에 등록하기 때문이다.
이걸 호이스팅(Hoisting)이라고 한다.
반면 함수 표현식에서는
showMessage();
const showMessage = function () {
console.log("hello");
};정상적으로 실행되지 않고 에러가 발생한다.
이유는 함수 표현식은 변수 선언만 먼저 되고 함수는 나중에 대입되기 때문이다.
같은 함수처럼 보여도 함수 선언문과 함수 표현식은 동작 방식이 완전히 다르다.
4) 스코프
스코프는 변수의 접근 가능한 범위다.
{
let localText = "블록 안 변수";
}
console.log(localText);위 코드는 에러가 발생한다.
let은 블록 스코프이기 때문이다.
반면
{
var oldValue = "var 변수";
}
console.log(oldValue);위 코드는 정상적으로 출력된다.
- var → 함수 스코프
- let / const → 블록 스코프
5) 클로저
function createClickCounter() {
let clickCount = 0;
return function () {
clickCount++;
return clickCount;
};
}
const clickCounter = createClickCounter();
console.log(clickCounter());
console.log(clickCounter());
console.log(clickCounter());출력:
1
2
3보통 함수가 끝나면 변수는 사라질 것 같았는데 값이 유지된다.
내부 함수가 외부 함수의 변수를 계속 기억하기 때문이다.
클로저는 단순 문법이 아니라 상태를 기억하는 구조이다.
6) 자료구조 기초
Object
const gameCharacter = {
nickname: "기사",
hp: 150
};Object는 key-value 구조이다.
Array
const subjectList = ["수학", "영어", "과학"];Array는 순서가 있는 데이터를 저장한다.
Stack
const stackBox = [];
stackBox.push("책1");
stackBox.push("책2");
stackBox.pop();나중에 들어온 것이 먼저 나간다. LIFO(Last in, First Out)
Queue
const waitingLine = [];
waitingLine.push("사람1");
waitingLine.push("사람2");
waitingLine.shift();먼저 들어온 것이 먼저 나간다. FIFO(First In, First Out)
오늘 가장 큰 문제는 자바스크립트를 처음 배운다는 점 그 자체였다.
문법도 익숙하지 않았고, 강의에서 설명하는 개념들이 처음에는 바로 이해되지 않았다.
특히
- 호이스팅
- 스코프
- 클로저
이 세 개는 명칭이 생소하고 단순히 설명을 듣는 것만으로는 왜 그렇게 동작하는지 감이 오지 않아서 머리에 한번에 들어오지 않았다.
또 실습 코드를 직접 따라 쳐보며 익히려고 했지만, 타이핑 속도가 느린 편이라 강의 속도를 따라가기가 어려웠다. 코드를 입력하느라 정작 설명을 놓치는 경우가 많았다.
실습 자체보다 강의 흐름을 놓치는 것이 더 큰 문제였다.
그래서 방식을 바꿨다.
강의를 들을 때는 따라치는 것보다 설명 이해에 집중하기로 했다.
실습은 강의가 끝난 후 다시 해보기로 했다.
그리고 이해가 되지 않는 개념은 AI에게 질문하면서 하나씩 다시 정리했다.
- 왜 함수 선언문은 먼저 호출 가능한가?
- 클로저가 왜 변수 기억하지?
이런 식으로 질문하며 부족한 부분을 메웠다.
회고
오늘 가장 크게 배운 것은 공부 방법 자체였다.
처음에는 실습 코드를 무조건 따라치는 것이 공부라고 생각했다.
하지만 실제로는 그 방식이 나에게는 비효율적이었다.
중요한 것은 단순히 손을 움직이는 것이 아니라 개념을 이해하는 것이었다.
코드를 따라 친다고 해서 이해가 되는 것은 아니었다.
오히려 왜 이렇게 작성하는지, 왜 이런 결과가 나오는지 스스로 찾는 과정이 훨씬 중요했다.
또 이해가 안 되는 부분을 그냥 넘기지 않고 질문하며 해결하는 과정도 중요하다는 걸 느꼈다.
모르는 것을 모른다고 인정하고 바로 확인하는 것이 오히려 더 빠르게 배우는 방법이었다.
특히 자바스크립트처럼 처음 접하는 언어에서는 문법 암기보다 동작 원리 이해가 더 중요하다는 걸 느꼈다.
앞으로도 단순 따라치기보다는 이 코드가 왜 이렇게 동작하는가? 를 먼저 생각하면서 학습해야겠다고 느꼈다.
