자바스크립트에서 꼭 알아야 할 개념과 기술들

Web

2025.10.01.

자바스크립트에서 꼭 알아야 할 개념과 기술들 (ES5 & ES6 기준)

자바스크립트(JavaScript)는 웹 개발의 핵심 언어로, ES5(ECMAScript 5)와 ES6(ECMAScript 2015) 이후부터는 문법적·기능적 발전이 크게 이루어졌습니다.
이 글에서는 기본부터 전문가 수준까지 꼭 알아야 할 자바스크립트의 핵심 개념과 테크닉을 정리합니다.

1. 기본 개념 (ES5 중심)

1.1 변수 선언 방식

var
ES5까지 사용되던 변수 선언 키워드. 함수 스코프(function scope)를 가짐.

var x = 10;
function test() {
  var y = 20;
  console.log(x, y); // 10, 20
}

호이스팅(Hoisting): var로 선언된 변수는 선언부가 함수 맨 위로 끌어올려지는 것처럼 동작.

1.2 데이터 타입

원시 타입 (Primitive): string, number, boolean, null, undefined
참조 타입 (Reference): object, array, function

var str = "Hello";   // string
var num = 42;        // number
var arr = [1,2,3];   // array (object)
var fn = function() { return "함수"; };

1.3 함수와 스코프

함수 선언식과 함수 표현식

// 선언식 (호이스팅 O)
function add(a, b) {
  return a + b;
}

// 표현식 (호이스팅 X)
var multiply = function(a, b) {
  return a * b;
};

this 키워드 (ES5)

전역: window (브라우저) 또는 global (Node.js)
함수 내부: 호출 방식에 따라 달라짐

var obj = {
  name: "JS",
  getName: function() {
    return this.name;
  }
};
console.log(obj.getName()); // "JS"

1.4 배열(Array) 메서드 (ES5)

forEach, map, filter, reduce

var nums = [1,2,3,4];
var doubled = nums.map(function(n){ return n*2; }); // [2,4,6,8]
var sum = nums.reduce(function(acc, cur){ return acc+cur; }, 0); // 10

2. ES6 이후 핵심 개념

2.1 let과 const

let: 블록 스코프(block scope), 재할당 가능
const: 상수, 재할당 불가 (참조형은 값 변경 가능)

let a = 1;
const b = {x:1};
b.x = 2; // 가능

2.2 화살표 함수 (Arrow Function)

this 바인딩이 정적(lexical scope)으로 결정됨

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

2.3 구조 분해 할당 (Destructuring)

const arr = [1,2];
const [x,y] = arr; // x=1, y=2

const obj = {name:"JS", age:10};
const {name, age} = obj;

2.4 템플릿 리터럴

let name = "JS";
console.log(`Hello, ${name}!`); // "Hello, JS!"

2.5 클래스(Class) 문법

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hello, I'm ${this.name}`;
  }
}

2.6 모듈 (Module)

export / import

// util.js
export function sum(a,b){ return a+b; }

// main.js
import {sum} from './util.js';

3. 꼭 알아야 할 고급 개념과 테크닉

3.1 클로저(Closure)

함수가 선언될 때의 환경(스코프)을 기억하여 외부 함수의 변수를 참조.

function counter() {
  var count = 0;
  return function() {
    count++;
    return count;
  }
}
var c = counter();
console.log(c()); // 1
console.log(c()); // 2

3.2 프로토타입(Prototype)과 상속

function Animal(name) {
  this.name = name;
}
Animal.prototype.say = function() {
  console.log("Hi, I'm " + this.name);
};
var dog = new Animal("Dog");
dog.say(); // Hi, I'm Dog

3.3 비동기 처리 (ES5 vs ES6)

ES5: 콜백(callback)

setTimeout(function() {
  console.log("done");
}, 1000);

ES6: Promise

new Promise((resolve) => {
  setTimeout(()=> resolve("done"), 1000);
}).then(console.log);

ES8 이후: async/await (참고)

async function run() {
  let result = await new Promise(r => setTimeout(()=>r("done"),1000));
  console.log(result);
}

3.4 변수 네이밍 관례와 언더스코프(_)

_(언더스코어) 활용 예시:
- 프라이빗 변수 표기: _count
- 사용하지 않는 변수 자리 표시자: (value, _index) => { ... }
- 라이브러리 전용 네임스페이스: _ (예: Lodash)

3.5 주석(Comment) 패턴

단일 라인 주석: //
블록 주석: /* ... */
JSDoc 스타일 (전문가용)

/**
 * 두 수를 더합니다.
 * @param {number} a 
 * @param {number} b 
 * @returns {number}
 */
function add(a, b){ return a+b; }

3.6 함수형 프로그래밍 기법

순수 함수, 불변성 유지, 고차 함수

const arr = [1,2,3];
const doubled = arr.map(x=>x*2); // 순수 함수

3.7 모듈 패턴과 싱글톤

var Singleton = (function(){
  var instance;
  function createInstance(){
    return {name:"single"};
  }
  return {
    getInstance: function(){
      if(!instance) instance = createInstance();
      return instance;
    }
  };
})();

4. 전문가 관점에서 꼭 알아야 할 것들

실행 컨텍스트(Execution Context)
자바스크립트 코드가 실행될 때 생성되는 환경 (Variable Object, Scope Chain, this)
이벤트 루프(Event Loop)
JS의 비동기 실행 메커니즘 (Call Stack, Callback Queue, Microtask Queue)
메모리 관리와 가비지 컬렉션(GC)
Immutable 패턴과 상태 관리 기법 (Redux 등과 연계)
성능 최적화 테크닉
- Debounce, Throttle
- Lazy Loading, Tree Shaking

결론

자바스크립트는 ES5의 기초 개념을 잘 이해하는 것이 중요하며, 이후 ES6 이상의 최신 문법과 **심화 개념(클로저, 프로토타입, 이벤트 루프 등)**을 이해해야 실무에서 진정한 전문가로 성장할 수 있습니다.
이번 글에서 다룬 개념들을 기반으로 프로젝트에 직접 적용해보며 자신만의 테크닉으로 발전시키는 것을 권장합니다.