낭중지추

자바스크립트를 공부하다 보면 this 키워드가 정말 헷갈립니다.

함수 안에서 썼을 때는 객체를 가리키더니, 어떤 때는 undefined가 나오고,

어떤 때는 window를 가리킵니다.

왜 그럴까요?

그 이유는 자바스크립트의 this가 “동적 바인딩”이라는 규칙을 따르기 때문입니다.

this란?

this는 “현재 실행 중인 함수가 누구를 통해 호출됐는가“에 따라 달라지는 실행 컨텍스트의 참조값입니다.

예제 1: 객체 메서드에서의 this

const person = {
  name: "Alice",
  greet: function () {
    console.log("Hi, I'm " + this.name);
  }
};

person.greet(); // 👉 this는 person을 가리킴 → 출력: Hi, I'm Alice

❗ 그런데 변수에 옮기면?
const greetFn = person.greet;
greetFn(); // ❌ this는 undefined (strict mode) 또는 window (비엄격 모드)

greetFn()은 이제 객체 없이 단독으로 호출되고 있습니다.

즉, 이 시점에서 this는 더 이상 person이 아닙니다.

• 브라우저 환경에서는 기본적으로 window를 가리킴
• 'use strict' 모드에서는 undefined

👉 이것이 자바스크립트의 동적 바인딩입니다.

호출되는 방식에 따라 this가 달라지는 것이죠

예제 2: setTimeout과 일반 함수

const counter = {
  value: 0,
  increase: function () {
    setTimeout(function () {
      console.log(this.value); // ❌ this는 counter가 아님
    }, 1000);
  }
};

counter.increase(); // 출력: undefined

setTimeout의 콜백 함수는 단독으로 호출되기 때문에,

그 안의 this는 window 또는 undefined가 됩니다.

해결법 1: this를 변수에 저장 (var that = this 패턴)

const counter = {
  value: 0,
  increase: function () {
    const that = this;
    setTimeout(function () {
      console.log(that.value); // ✅ that은 counter를 가리킴
    }, 1000);
  }
};

전통적인 방식입니다. 외부 this를 that에 복사해두고, 콜백에서 사용합니다.

해결법 2: 화살표 함수 사용

const counter = {
  value: 0,
  increase: function () {
    setTimeout(() => {
      console.log(this.value); // ✅ 화살표 함수는 this를 바깥에서 가져옴
    }, 1000);
  }
};

화살표 함수는 this를 만들지 않고, 자신이 정의된 위치의 this를 그대로 사용합니다.

위 코드에서는 increase() 메서드의 this가 counter이므로, 콜백 안에서도 그대로 유지됩니다.

주의: 화살표 함수를 객체 메서드로 직접 정의하면?

const user = {
  name: "Jane",
  greet: () => {
    console.log("Hi, I'm " + this.name); // ❌ this는 user가 아님
  }
};

user.greet(); // 출력: Hi, I'm undefined

화살표 함수는 객체의 메서드로 사용하면 안 됩니다.

그 정의 시점의 this는 전역 스코프(window/global)이기 때문이에요.

요약

마무리

자바스크립트의 this는 어디서 정의되었느냐보다, 어떻게 호출되었는지에 따라 값이 결정됩니다.

이것이 바로 동적 바인딩의 원리입니다.

그리고 이 불편함을 해소하기 위해 나온 것이 바로 화살표 함수(arrow function)입니다.

화살표 함수는 this를 고정시켜서, 의도하지 않은 바인딩 오류를 줄여줍니다.

자바스크립트의 변수 선언 방식에 대해 알아보겠습니다

자바스크립트에서는 var, let, const 세 가지 방법으로 변수를 선언할 수 있으며, 각각 스코프 범위와 호이스팅 방식에 차이가 있습니다.

1. var

1) var는 함수 스코프(Function Scope)를 가집니다.

함수 스코프란 변수가 선언된 함수 전체에서 접근 가능하다는 의미입니다.

즉, 중괄호({})로 감싸진 블록 내부에서 선언된 변수라도, 함수 내라면 블록 밖에서도 참조할 수 있습니다.

function a() {
  if (true) {
    var x = 2;
  }

  console.log(x); // 출력: 2 (에러 아님)
}

2) var는 호이스팅(hoisting)이 됩니다.

호이스팅이란 자바스크립트 엔진이 코드를 실행하기 전에 변수 선언을 코드 상단으로 끌어올리는 개념입니다.

단, 끌어올려지는 것은 선언만이며, 할당은 끌어올려지지 않습니다.

console.log(x); // 출력: undefined
var x = 2;

위 코드는 실제로는 아래처럼 동작합니다:

var x;
console.log(x); // undefined
x = 2;

2. const

1) const는 블록 스코프(Block Scope)를 가집니다.

블록({}) 내부에서만 접근할 수 있으며, 블록을 벗어나면 참조할 수 없습니다.

function example() {
  if (true) {
    let y = 20;
    const z = 30;
  }
  console.log(y); // ❌ ReferenceError
  console.log(z); // ❌ ReferenceError
}

2) const는 초기값을 반드시 할당해야 하며, 이후 값을 변경할 수 없습니다.

그래서 상수(constant)로 사용되며, 변하지 않는 값을 저장할 때 주로 사용됩니다.

일반적으로는 const로 변수를 선언하고, 값이 바뀔 필요가 있을 때만 let을 사용합니다.

3. let

1) let 역시 블록 스코프(Block Scope)를 가집니다.

const와 마찬가지로 블록 내부에서만 유효합니다.

2) let은 값을 나중에 변경할 수 있습니다.

재할당이 가능하기 때문에 반복문 등에서 자주 사용됩니다.

let count = 0;
count = count + 1; // ✅ 가능

4. 함수 선언과 함수 표현식의 호이스팅 차이

1) 함수 선언문(Function Declaration)은 완전히 호이스팅됩니다.

즉, 선언 전에 호출해도 정상적으로 실행됩니다.

sayHello(); // 출력: Hello!

function sayHello() {
  console.log("Hello!");
}

함수 선언문은 변수 선언과 함수 정의 전체가 한꺼번에 호이스팅되기 때문에, 코드 상단에서 호출하더라도 에러가 발생하지 않습니다.

2) var로 선언한 함수 표현식(Function Expression)은 호이스팅될 때 undefined로 초기화됩니다.

함수 표현식은 var로 선언되었기 때문에 선언만 호이스팅되고, 함수 내용은 나중에 할당됩니다.

sayHi(); // ❌ TypeError: sayHi is not a function

var sayHi = function () {
  console.log("Hi!");
};

이 코드는 내부적으로 아래처럼 해석됩니다:

var sayHi;
sayHi(); // ❌ TypeError
sayHi = function () {
  console.log("Hi!");
};

즉, sayHi는 함수로 인식되기 전에 undefined 상태이기 때문에, 호출 시 에러가 발생합니다.

보안이 중요한 프로젝트에서는 무작위 키(Random Key) 를 생성해야 할 때가 많습니다. API 키, JWT 시크릿 키, 세션 토큰 등 다양한 용도로 사용됩니다. 이번 글에서는 Node.js를 활용한 무작위 키 발급 방법을 소개합니다! 

1️⃣ 간단한 한 줄 코드로 무작위 키 생성

Node.js의 crypto 모듈을 사용하면 한 줄 명령어로 랜덤 키를 생성할 수 있습니다.

node -e "console.log(require('crypto').randomBytes(64).toString('hex'))"

📌 실행 결과 (64바이트 랜덤 키)

3f8d9b4c5a8b9e2f1d4c7e5a6f8d2b3c4e9a1f2b3c5d6e7f8a9b0c1d2e3f4a5

• randomBytes(64): 64바이트(512비트) 길이의 랜덤 바이트 생성
• .toString('hex'): 16진수(hex) 문자열로 변환

이제 무작위 키가 필요할 때마다 위 명령어를 실행하면 됩니다! 😊

무작위 키 길이 조절하기

더 짧거나 긴 키가 필요하다면?

• 32바이트(256비트) 키 생성: randomBytes(32).toString('hex')
• 128바이트(1024비트) 키 생성: randomBytes(128).toString('hex')

예제:

const shortKey = crypto.randomBytes(32).toString('hex'); // 32바이트
const longKey = crypto.randomBytes(128).toString('hex'); // 128바이트

console.log("Short Key:", shortKey);
console.log("Long Key:", longKey);

마지막으로,

보안 키는 코드에 직접 하드코딩하기보다는 환경 변수(.env 파일) 에 저장하는 것이 좋습니다!!