[인터넷활용] 03. JavaScript 기초

HTML이 구조를, CSS가 표현을 맡는다면, 자바스크립트는 웹페이지에 동작과 논리를 불어넣는다. 버튼을 누르면 반응하고, 입력값을 계산하고, 화면을 바꾸는 일이 모두 자바스크립트의 영역이다. 오늘은 변수·자료형·연산자·제어문·함수 같은 언어의 기본기를 정리했다.

---

1. 변수와 자료형

변수를 선언하는 키워드는 세 가지이며, 각각 성격이 다르다.

키워드	특징
var	함수 스코프 (예전 방식, 지금은 권장하지 않음)
let	블록 스코프, 재할당 가능
const	블록 스코프, 재할당 불가 (상수)

 

let name = "정주호";
const PI = 3.14;

 

자료형은 숫자(Number), 문자열(String), 논리(Boolean), 객체(Object), 그리고 값이 없음을 나타내는 undefined와 null이 있다.

 

기본은 const, 바뀌면 let
실무에서는 일단 const로 선언하고, 값이 바뀌어야 할 때만 let으로 바꾸는 습관을 권한다. "이 값이 중간에 바뀌지 않는다"가 코드로 보장되면 읽는 사람이 추적하기 쉽고 실수도 줄어든다. var는 스코프 규칙이 헷갈리는 문제가 있어 거의 쓰지 않는다.

C·자바에서 본 변수와 달리 선언 키워드가 셋이나 되는 게 처음엔 낯설었는데, "기본 const, 바뀌면 let"이라는 원칙을 잡으니 고민이 줄었다.

---

2. 연산자

기본 연산자는 다른 언어와 비슷하다.

• 산술: + - * / 와 나머지를 구하는 %
• 비교: ==(값), ===(값+타입), !=, <, >
• 논리: &&(그리고), ||(또는), !(부정)
• 삼항 연산자: 조건 ? 참일_때_값 : 거짓일_때_값

 

자바스크립트에서 특히 주의할 것이 비교 연산자다.

 

== 와 === 의 차이
==는 타입이 다르면 자동으로 변환한 뒤 값을 비교한다. 그래서 1 == "1"이 true가 된다. 반면 ===는 타입까지 같아야 true다(1 === "1"은 false). 이 자동 변환이 예상치 못한 버그를 부르기 때문에, 실무에서는 거의 항상 ===를 쓴다.

1 == "1"이 true가 되는 걸 직접 확인하고 놀랐다. 자동 형 변환이 편의 같지만 버그의 씨앗이라, ===를 기본으로 쓰는 이유를 알았다.

---

3. 제어문

흐름을 제어하는 구문도 익숙한 형태다.

if (조건) { } else if (조건) { } else { }
switch (값) { case 1: ...; break; default: ...; }
for (let i = 0; i < 10; i++) { }
while (조건) { }
do { } while (조건);

 

switch에서 break를 빠뜨리면 다음 case로 그대로 흘러내려간다(fall-through). 실수의 원인이 되기도 하지만, 여러 case를 묶어 같은 처리를 할 때 일부러 활용하기도 한다. C·자바에서 본 fall-through가 여기서도 똑같았다.

---

4. 함수

자바스크립트에서 함수를 정의하는 방식은 세 가지다.

function add(a, b) { return a + b; }      // 함수 선언
let f = function(a, b) { return a + b; };  // 함수 표현식
let g = (a, b) => a + b;                    // 화살표 함수

 

세 방식 모두 같은 일을 하지만, 화살표 함수는 짧고 간결해 최근 코드에서 자주 보인다. 함수를 변수에 담는다는 게 C에서는 없던 발상이라 신선했다.

---

오늘 느낀 점

• 제어문·연산자는 C·자바와 거의 같아 빠르게 적응했다. 대신 const/let/var, ==/===, 함수를 값으로 다루는 점 같은 JS만의 특징에 집중하니 효율적이었다.
• 1 == "1"이 true가 되는 자동 형 변환을 직접 보고, 편의가 곧 버그가 될 수 있다는 걸 체감했다. ===를 기본으로 삼기로 했다.
• 함수를 변수에 담을 수 있다는 점이, 앞으로 배울 이벤트 처리(클릭 시 실행할 함수를 넘기는)의 토대라는 예감이 들었다.

---

한 걸음 더

• 자바스크립트에서 함수는 "값"처럼 다뤄진다. 위 예시처럼 함수를 변수에 담거나, 다른 함수의 인자로 넘기거나, 함수가 함수를 반환할 수 있다. 이를 일급 함수(first-class function)라 하며, 버튼 클릭 시 실행할 함수를 인자로 넘기는 이벤트 처리가 바로 이 성질 덕에 가능하다.
• var를 권장하지 않는 결정적 이유 중 하나가 호이스팅(hoisting)이다. var로 선언한 변수는 코드상 선언 위치와 무관하게 함수 맨 위로 끌어올려진 것처럼 동작해, 선언 전에 써도 에러 대신 undefined가 나온다. let·const는 이 함정을 막아준다.
• 화살표 함수는 단순히 문법만 짧은 게 아니라 this의 동작이 일반 함수와 다르다. 일반 함수의 this는 호출 방식에 따라 바뀌지만, 화살표 함수는 자신을 둘러싼 바깥의 this를 그대로 쓴다. 이벤트 처리나 콜백에서 this가 엉뚱한 것을 가리키는 문제를 피하려고 화살표 함수를 택하는 경우가 많다.

---