JavaScript 기초

웹의 동작을 책임지는 언어입니다. 브라우저와 서버(Node.js) 양쪽에서 동작합니다. 이번 레슨에서는 모든 코드의 토대가 되는 변수, 타입, 함수, 배열을 차근차근 익혀봅니다.

학습 목표

• const 와 let 으로 변수를 선언하고 차이를 설명할 수 있다
• JavaScript 의 기본 타입 7가지를 구분할 수 있다
• 함수 선언식과 화살표 함수를 작성할 수 있다
• 템플릿 리터럴로 문자열을 조합할 수 있다
• 배열의 기본 메서드 map·filter·reduce 를 사용할 수 있다

변수 선언

변수는 값을 담아 이름표를 붙여두는 상자입니다. 선언 키워드는 두 가지면 충분합니다.

const name = '성연욱'; // 재할당 불가 (기본 선택)
let count = 0;          // 재할당 가능
// var 는 더 이상 쓰지 않습니다.

count = 1;     // OK
// name = '다른값'; // ❌ TypeError: Assignment to constant variable.

💡 TIP — 원칙은 기본은 const, 값이 바뀌어야 할 때만 let. 이렇게 하면 "이 값은 변하지 않는다"는 의도가 코드에 드러납니다.

var 를 더 이상 쓰지 않는 이유는 함수 스코프와 호이스팅 때문에 예측하기 어려운 버그를 만들기 때문입니다. 자세한 내용은 3번 레슨에서 다룹니다.

기본 타입

JavaScript 의 값은 크게 원시 타입과 객체로 나뉩니다.

const str = '문자열';        // string
const num = 42;             // number
const big = 9007199254740991n; // bigint
const bool = true;          // boolean
const nothing = null;       // object (역사적 버그)
const undef = undefined;    // undefined
const sym = Symbol('id');   // symbol
const obj = { key: 'value' }; // object
const arr = [1, 2, 3];      // object (배열도 객체)

타입을 확인할 때는 typeof 연산자를 씁니다.

⚠️ 주의 — typeof null 은 'object' 를 돌려줍니다. 이는 언어 초창기의 버그이지만 호환성 때문에 고치지 않은 것입니다. null 검사는 value === null 로 하세요.

함수

함수는 입력을 받아 결과를 돌려주는 작은 기계입니다.

// 함수 선언식
function add(a, b) {
  return a + b;
}

// 화살표 함수 (간결, this 바인딩 없음)
const multiply = (a, b) => a * b;

console.log(add(2, 3));      // → 5
console.log(multiply(2, 3)); // → 6

화살표 함수는 본문이 한 줄이면 return 과 중괄호를 생략할 수 있어 간결합니다.

const square = (n) => n * n;
const greet = () => '안녕하세요'; // 매개변수 없으면 () 필수

템플릿 리터럴

백틱(`)으로 감싸면 문자열 안에 ${} 로 값을 끼워 넣을 수 있습니다.

const user = '민수';
const age = 20;
console.log(`안녕하세요, ${user}님!`);        // → 안녕하세요, 민수님!
console.log(`내년이면 ${age + 1}살이네요.`);   // → 내년이면 21살이네요.

여러 줄 문자열도 그대로 작성할 수 있습니다.

const html = `
  <ul>
    <li>${user}</li>
  </ul>
`;

배열 다루기

배열은 순서가 있는 값의 묶음입니다. 가장 자주 쓰는 세 가지 메서드를 먼저 익혀둡시다.

const nums = [1, 2, 3, 4, 5];

const doubled = nums.map((n) => n * 2);          // → [2, 4, 6, 8, 10]
const evens = nums.filter((n) => n % 2 === 0);    // → [2, 4]
const sum = nums.reduce((acc, n) => acc + n, 0);  // → 15

map, filter, reduce 는 가장 자주 쓰는 배열 메서드이니 꼭 익혀두세요. 5번 레슨에서 더 깊게 다룹니다.

요약

• 변수는 const 를 기본으로, 재할당이 필요할 때만 let 을 쓴다
• 원시 타입은 string·number·bigint·boolean·undefined·null·symbol 7가지다
• typeof null 은 'object' 이므로 null 검사는 === null 로 한다
• 함수는 선언식과 화살표 함수 두 형태로 작성할 수 있다
• 템플릿 리터럴은 ${} 로 값을 끼워 넣고 여러 줄을 지원한다

연습문제

1. const 와 let 으로 변수를 각각 하나씩 선언하고, const 에 재할당을 시도했을 때 어떤 에러가 나는지 확인하세요.
2. 두 수를 받아 평균을 돌려주는 화살표 함수 average 를 작성하세요.

   힌트 — (a + b) / 2 를 반환하면 됩니다.

3. 이름과 점수를 받아 "홍길동님의 점수는 95점입니다." 형태의 문자열을 만드는 함수를 템플릿 리터럴로 작성하세요.
4. 배열 [10, 20, 30, 40] 에서 filter 로 25보다 큰 값만 골라 새 배열을 만드세요.

   힌트 — (n) => n > 25 조건을 사용합니다.