[JS] 효율적이고 효과적인 자바스크립트 개발을 위한 45가지 팁(5)

위 글은 45 JavaScript Super Hacks Every Developer Should Know를 번역 겸 약간의 각색을 곁들인 글로,
이 글은 5번째 중 5번째. 마지막 글이다.

---

37. Avoid Global Variables (전역 변수 피하기)

문제: 전역 변수는 충돌과 의도치 않은 부작용을 초래할 수 있습니다.

해결책: 전역 변수를 피하면 충돌과 의도치 않은 부작용을 방지할 수 있으며, 코드의 모듈화와 유지보수성을 높일 수 있습니다.

// PROBLEM: 전역 변수 사용
// 전역 변수를 사용하면 충돌과 부작용이 발생할 수 있음

var globalVar = 'This is global';

function doSomething() {
  console.log(globalVar); // "This is global"
}
doSomething();
console.log(globalVar); // "This is global"

// SOLUTION: 전역변수 지양
// 지역변수 사용하여 충돌과 부작용 방지

function doSomething() {  
  let localVariable = 'This is local';  
  console.log(localVariable);  
}

// Using modules
const myModule = (function () {  
  let privateVariable = 'This is private';  
  return {  
    publicMethod() {  
      console.log(privateVariable);  
    },  
  };  
})();  
myModule.publicMethod(); // "This is private"

 

38. Encapsulation with Closures (클로저를 통한 캡슐화)

문제: 함수의 내부 세부 사항을 노출하면 오용될 수 있습니다.

해결책: 클로저는 내부 세부 사항을 캡슐화하고 필요한 기능만 노출하여 코드의 보안성과 유지보수성을 향상시킵니다.

// PROBLEM: 클로저 X
// 변수에 외부 접근이 가능하여 오용될 수 있음

let count = 0;

function increment() {
  count++;
  return count;
}

console.log(increment()); // 1
console.log(increment()); // 2
console.log(count); // 2, 외부에서 접근 가능

// SOLUTION: 클로저 O
// 클로저를 사용하여 변수의 외부 접근을 차단

function createCounter() {  
  let count = 0;  
  return {  
    increment() {  
      count++;  
      return count;  
    },  
    decrement() {  
      count--;  
      return count;  
    },  
  };  
}  
const counter = createCounter();  
console.log(counter.increment()); // 1  
console.log(counter.increment()); // 2  
console.log(counter.decrement()); // 1

 

39. Module Pattern (모듈 패턴)

문제: 코드를 재사용 가능한 모듈로 조직화하는 것은 어려울 수 있습니다.

해결책: 모듈 패턴은 코드를 재사용 가능하고 캡슐화된 모듈로 만들어 코드 조직화와 유지보수성을 향상시킵니다.

// PROBLEM: 모듈 패턴 X
// 전역 변수 사용으로 인한 충돌 가능성 있음

var moduleVar = 'This is module variable';

function moduleFunc() {
  console.log(moduleVar); // "This is module variable"
}
moduleFunc();

// SOLUTION: 모듈 패턴 O
// 모듈 패턴을 사용하여 변수의 충돌 방지

const myModule = (function () {  
  let privateVariable = 'This is private';  
  function privateMethod() {  
    console.log(privateVariable);  
  }  
  return {  
    publicMethod() {  
      privateMethod();  
    },  
  };  
})();  
myModule.publicMethod(); // "This is private"

 

40. Singleton Pattern (싱글톤 패턴)

문제: 클래스의 인스턴스를 하나만 생성하도록 보장하는 것은 어려울 수 있습니다.

해결책: 싱글톤 패턴은 클래스의 인스턴스를 하나만 생성하도록 보장하여 공유 자원이나 설정을 관리하는 데 유용합니다.

// PROBLEM: 싱글톤 패턴 X
// 클래스의 인스턴스를 여러 개 생성할 수 있음

function Singleton() {
  if (!Singleton.instance) {
    Singleton.instance = this;
  }
  return Singleton.instance;
}

const instance1 = new Singleton();
const instance2 = new Singleton();
console.log(instance1 === instance2); // true

// SOLUTION: 싱글톤 패턴 O
// 싱글톤 패턴을 사용하여 하나의 인스턴스만 생성

const singleton = (function () {  
  let instance;  
  function createInstance() {  
    return {  
      name: 'Singleton Instance',  
    };  
  }  
  return {  
    getInstance() {  
      if (!instance) {  
        instance = createInstance();  
      }  
      return instance;  
    },  
  };  
})();  
const instance1 = singleton.getInstance();  
const instance2 = singleton.getInstance();  
console.log(instance1 === instance2); // true

 

41. Factory Pattern (팩토리 패턴)

문제: 복잡한 초기화가 필요한 객체를 생성하는 것은 번거로울 수 있습니다.

해결책: 팩토리 패턴은 복잡한 초기화가 필요한 객체를 유연하고 재사용 가능한 방식으로 생성할 수 있게 합니다.

// PROBLEM: 팩토리 패턴 X
// 매번 복잡한 초기화를 반복해야 함

class User {
  constructor(name, role) {
    this.name = name;
    this.role = role;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am a ${this.role}`);
  }
}

const admin = new User('Alice', 'admin');
const user = new User('Bob', 'user');
admin.sayHello(); // "Hello, my name is Alice and I am an admin"
user.sayHello(); // "Hello, my name is Bob and I am a user"

// SOLUTION: 팩토리 패턴 O
// 팩토리 패턴을 사용하여 객체를 유연하게 생성

function createUser(name, role) {  
  return {  
    name,  
    role,  
    sayHello() {  
      console.log(`Hello, my name is ${this.name} and I am a ${this.role}`);  
    },  
  };  
}  
const admin = createUser('Alice', 'admin');  
const user = createUser('Bob', 'user');  
admin.sayHello(); // "Hello, my name is Alice and I am an admin"  
user.sayHello(); // "Hello, my name is Bob and I am a user"

 

42. Observer Pattern (옵저버 패턴)

문제: 상태 변화를 관리하고 여러 컴포넌트에 알리는 것은 어려울 수 있습니다.

해결책: 옵저버 패턴은 상태 변화를 관리하고 여러 옵저버에게 알림을 보내어 코드의 조직화와 유지보수성을 향상시킵니다.

// PROBLEM: 옵저버 패턴 X
// 상태 변화를 수동으로 관리해야 함

class Subject {
  constructor() {
    this.observers = [];
  }
  subscribe(observer) {
    this.observers.push(observer);
  }
  unsubscribe(observer) {
    this.observers = this.observers.filter((obs) => obs !== observer);
  }
  notify(data) {
    this.observers.forEach((observer) => observer.update(data));
  }
}

class Observer {
  constructor(name) {
    this.name = name;
  }
  update(data) {
    console.log(`${this.name} received data: ${data}`);
  }
}

const subject = new Subject();
const observer1 = new Observer('Observer 1');
const observer2 = new Observer('Observer 2');
subject.subscribe(observer1);
subject.subscribe(observer2);
subject.notify('New data available'); // "Observer 1 received data: New data available" "Observer 2 received data: New data available"

// SOLUTION: 옵저버 패턴 O
// 옵저버 패턴을 사용하여 상태 변화를 효율적으로 관리

function Subject() {  
  this.observers = [];  
}  
Subject.prototype = {  
  subscribe(observer) {  
    this.observers.push(observer);  
  },  
  unsubscribe(observer) {  
    this.observers = this.observers.filter((obs) => obs !== observer);  
  },  
  notify(data) {  
    this.observers.forEach((observer) => observer.update(data));  
  },  
};  
function Observer(name) {  
  this.name = name;  
}  
Observer.prototype.update = function (data) {  
  console.log(`${this.name} received data: ${data}`);  
};  
const subject = new Subject();  
const observer1 = new Observer('Observer 1');  
const observer2 = new Observer('Observer 2');  
subject.subscribe(observer1);  
subject.subscribe(observer2);  
subject.notify('New data available'); // "Observer 1 received data: New data available" "Observer 2 received data: New data available"

 

43. Event Delegation (이벤트 위임)

문제: 여러 요소에 이벤트 리스너를 추가하는 것은 성능 저하를 초래할 수 있습니다.

해결책: 이벤트 위임은 공통 부모 요소에 하나의 이벤트 리스너를 추가하여 여러 자식 요소의 이벤트를 효율적으로 관리할 수 있게 합니다.

// PROBLEM: 이벤트 위임 X
// 각 요소에 개별적으로 이벤트 리스너를 추가해야 함

const buttons = document.querySelectorAll('button.className');
buttons.forEach((button) => {
  button.addEventListener('click', (event) => {
    console.log('Button clicked:', event.target.textContent);
  });
});

// SOLUTION: 이벤트 위임 O
// 이벤트 위임을 사용하여 성능 최적화

document.getElementById('parent').addEventListener('click', (event) => {  
  if (event.target && event.target.matches('button.className')) {  
    console.log('Button clicked:', event.target.textContent);  
  }  
});

 

44. Avoid Using eval() (eval() 사용 피하기)

문제: eval()을 사용하면 보안 취약점과 성능 문제가 발생할 수 있습니다.

• 보안 취약점:
  • 코드 인젝션 공격: eval은 문자열을 실행하므로, 외부로부터 입력받은 문자열을 그대로 실행하면 악성 코드가 삽입될 수 있습니다. 예를 들어, 사용자가 입력한 데이터를 eval을 통해 실행하면, 공격자가 악성 스크립트를 삽입하여 시스템을 손상시킬 수 있습니다.
  • 직접 접근 가능: eval을 통해 실행되는 코드는 현재 스코프에 직접 접근할 수 있습니다. 이는 의도치 않은 전역 변수 수정이나 함수 재정의 등의 문제를 일으킬 수 있습니다.
• 성능 문제:
  • 인터프리터의 최적화 방지: eval을 사용하면 JavaScript 엔진이 코드를 최적화하기 어렵습니다. 이는 eval이 실행될 때마다 코드를 다시 해석하고 실행해야 하기 때문입니다.
  • 동적 코드 실행: eval은 문자열을 코드로 변환하여 실행하기 때문에 정적 분석이 불가능합니다. 이는 런타임에서의 코드 실행 속도를 저하시킬 수 있습니다.

해결책: eval() 사용을 피하면 보안 취약점과 성능 문제를 방지하여 코드를 더 안전하고 효율적으로 만들 수 있습니다.

// PROBLEM: eval 사용
// 보안 취약점과 성능 문제 발생 가능

const code = 'console.log("Hello, world!")';  
eval(code); // "Hello, world!"

// SOLUTION: eval 미사용
// 보안과 성능 문제 해결

const func = new Function('console.log("Hello, world!")');  
func(); // "Hello, world!"

 

45. Using for…of for Iteration (반복문에 for…of 사용하기)

문제: for…in을 사용한 배열 반복은 오류를 일으킬 수 있습니다.

해결책: for…of는 배열 및 기타 반복 가능한 객체를 안전하고 간단하게 반복할 수 있게 합니다.

// PROBLEM: for in문(for of문 미사용)
// 예상치 못한 속성들이 포함될 수 있음

const arr = [1, 2, 3, 4, 5];
for (const index in arr) {
  console.log(arr[index]);
}



// SOLUTION: for of문 사용
// 안전하고 간단한 반복가능한 로직

const arr = [1, 2, 3, 4, 5];  
for (const value of arr) {  
  console.log(value);  
}  
// 1
// 2
// 3
// 4
// 5

---

글을 정리하면서, 개발하며 내가 지키지 않고 있던 것들(디자인 패턴 등)에 대해 새삼 반성하게 된다.

다음엔 React 개발을 하며 지키면 좋을 것들에 대해 다뤄볼 예정이다.

 

같이 읽으면 좋을 글

2024.06.08 - [Programming Language/Javascript] - [JS] 효율적이고 효과적인 자바스크립트 개발을 위한 45가지 팁(1)

[JS] 효율적이고 효과적인 자바스크립트 개발을 위한 45가지 팁(1)

 

2024.06.09 - [Programming Language/Javascript] - [JS] 효율적이고 효과적인 자바스크립트 개발을 위한 45가지 팁(2)

[JS] 효율적이고 효과적인 자바스크립트 개발을 위한 45가지 팁(2)

 

2024.06.11 - [Programming Language/Javascript] - [JS] 효율적이고 효과적인 자바스크립트 개발을 위한 45가지 팁(3)

[JS] 효율적이고 효과적인 자바스크립트 개발을 위한 45가지 팁(4)

 

2024.06.12 - [Programming Language/Javascript] - [JS] 효율적이고 효과적인 자바스크립트 개발을 위한 45가지 팁(4)

[JS] 효율적이고 효과적인 자바스크립트 개발을 위한 45가지 팁(5)