모든 개발자가 알아야 할 25가지 자바스크립트 기초

자바스크립트는 최신 웹 개발에 필수적인 다재다능하고 강력한 언어입니다. 다음은 더 효율적이고 효과적인 자바스크립트 개발자가 될 수 있는 25가지 기초 문법에 대한 자세한 설명 및 예제입니다.

1. var 대신 let과 const 사용

let과 const를 사용하면 변수가 정의된 블록 내에서만 액세스할 수 있도록 하여 범위 관련 버그를 방지할 수 있습니다.

let count = 0;
const PI = 3.14;

2. Default Parameters

Default Parameter는 함수에 합리적인 기본값을 설정하여 오류를 방지하고 코드를 더욱 견고하게 만듭니다.

function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}
console.log(greet()); // "Hello, Guest!"

3. Template Literals

Template Literal을 사용하면 임베디드 표현식과 여러 줄 문자열을 포함하는 문자열을 더 쉽게 만들 수 있습니다.

const name = 'John';
const greeting = `Hello, ${name}!`;
console.log(greeting); // "Hello, John!"

4. 구조 분해 할당(Destructuring Assignment)

구조 분해 할당을 사용하면 객체에서 속성을 추출하고 배열에서 요소를 별개의 변수로 쉽게 추출할 수 있습니다.

const user = { name: 'Jane', age: 25 };
const { name, age } = user;
console.log(name, age); // "Jane" 25

5. Arrow Functions

Arrow Function는 함수 표현식에 간결한 구문을 제공하고 this이 어휘적으로 바인딩되도록 합니다.

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

6. Spread Operator

배열이나 객체를 결합하는 것이 번거로울 수 있습니다. Spread Operator를 사용하면 배열과 객체를 쉽게 결합할 수 있습니다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

7. Rest Parameters

다양한 수의 함수 인수를 처리하는 것은 까다로울 수 있습니다. Rest Parameter를 사용하면 무한한 수의 인수를 배열로 처리할 수 있으므로 함수를 더욱 유연하게 만들 수 있습니다.

function sum(...args) {
  return args.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

8. 단략 평가(Short-Circuit Evaluation)

조건문을 작성하는 것은 장황할 수 있습니다. 단략 평가는 논리 && 및 || 연산자를 사용하여 조건 표현식을 단순화합니다.

const isLoggedIn = true;
const user = isLoggedIn && { name: 'Jane', age: 25 };
console.log(user); // { name: 'Jane', age: 25 }

9. 옵셔널 체이닝(Optional Chaining)

체인의 각 레벨에서 null 또는 undefined을 명시적으로 확인하지 않고도 중첩된 프로퍼티에 안전하게 액세스할 수 있습니다.

const user = { profile: { name: 'Jane' } };
const userName = user?.profile?.name;
console.log(userName); // "Jane"

10. Nullish Coalescing

||를 사용하여 기본값을 제공하면 값이 0 또는 ""인 경우 예기치 않은 결과가 발생할 수 있습니다. Nullish Coalescing(??)을 사용하여 null 또는 undefined 경우에만 기본값을 제공하세요.

const user = { name: '', age: 0 };
const userName = user.name ?? 'Anonymous';
const userAge = user.age ?? 18;
console.log(userName); // ""
console.log(userAge); // 0

11. Property Shorthand

변수 이름과 일치하는 경우 속성 이름을 생략할 수 있어 코드가 더 깔끔해집니다.

const name = 'Jane';
const age = 25;
const user = { name, age };
console.log(user); // { name: 'Jane', age: 25 }

12. Dynamic Property Names

표현식 값을 속성 이름으로 사용하여 객체 속성을 동적으로 생성할 수 있습니다.

const propName = 'age';
const user = { name: 'Jane', [propName]: 25 };
console.log(user); // { name: 'Jane', age: 25 }

13. map(), filter(), reduce() 사용하기

일반적인 배열 연산에는 map(), filter(), reduce()를 사용하세요. 이러한 배열 메서드는 배열을 변환, 필터링 및 축소하는 기능적 접근 방식을 제공하여 코드를 보다 표현력 있고 간결하게 만듭니다.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((num) => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

const evens = numbers.filter((num) => num % 2 === 0);
console.log(evens); // [2, 4]

const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 15

14. 문자열 includes(), startsWith() 및 endsWith()

더 간단한 문자열 검사를 위해 includes(), startsWith() 및 endsWith()를 사용하세요. 이러한 문자열 메서드는 하위 문자열의 존재, 시작 또는 끝을 간단하고 읽기 쉽게 확인할 수 있는 방법을 제공합니다.

const str = 'Hello, world!';
console.log(str.includes('world')); // true
console.log(str.startsWith('Hello')); // true
console.log(str.endsWith('!')); // true

15. 함수 매개변수에서 배열 및 객체 구조 분해

함수 매개변수로 전달된 배열이나 객체에서 값을 추출하는 것은 장황할 수 있습니다. 함수 매개변수에서 구조조정을 사용하여 값을 직접 추출하세요.

const user = { name: 'Jane', age: 25 };
function greet({ name, age }) {
  return `Hello, ${name}! You are ${age} years old.`;
}
console.log(greet(user)); // "Hello, Jane! You are 25 years old."

16. Destructuring의 기본값

누락될 수 있는 속성에 대한 대체 값을 제공하여 코드를 더욱 견고하게 만들 수 있습니다.

const user = { name: 'Jane' };
const { name, age = 18 } = user;
console.log(name); // "Jane"
console.log(age); // 18

17. Object assign()

객체 복제 또는 병합은 장황하고 오류가 발생하기 쉽습니다. Object.assign()을 사용하면 객체를 효율적으로 복제하거나 병합할 수 있으므로 수동 복사의 필요성을 줄일 수 있습니다.

const target = { a: 1 };
const source = { b: 2 };
const merged = Object.assign(target, source);
console.log(merged); // { a: 1, b: 2 }

18. find() 및 findIndex()

배열에서 요소나 그 인덱스를 찾는 것이 번거로울 수 있습니다. find() 및 findIndex() 메서드는 조건에 따라 요소 또는 그 인덱스를 찾는 간단한 방법을 제공하여 코드 가독성을 향상시킵니다.

const users = [
  { id: 1, name: 'Jane' },
  { id: 2, name: 'John' },
];

const user = users.find((u) => u.id === 1);
console.log(user); // { id: 1, name: 'Jane' }

const index = users.findIndex((u) => u.id === 1);
console.log(index); // 0

19. some() 및 every()

some() 및 every() 메서드를 사용하면 배열의 일부 또는 모든 요소가 조건을 충족하는지 간결한 방식으로 확인할 수 있습니다.

const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some((num) => num % 2 === 0);
console.log(hasEven); // true
const allEven = numbers.every((num) => num % 2 === 0);
console.log(allEven); // false

20. flat() 및 flatMap()

flat() 및 flatMap() 메서드는 중첩 배열을 평평하게 만들고 한 단계로 매핑 및 평평하게 만드는 간단한 방법을 제공합니다.

const nested = [1, [2, [3, [4]]]];
const flat = nested.flat(2);
console.log(flat); // [1, 2, 3, [4]]
const mapped = [1, 2, 3].flatMap((x) => [x, x * 2]);
console.log(mapped); // [1, 2, 2, 4, 3, 6]

21. from() 및 of()

Array.from()을 사용하면 iterable 객체에서 배열을 만들 수 있고, Array.of()을 사용하면 인자 목록에서 배열을 만들 수 있습니다.

const set = new Set([1, 2, 3]);
const arrFromSet = Array.from(set);
console.log(arrFromSet); // [1, 2, 3]
const arrOfNumbers = Array.of(1, 2, 3);
console.log(arrOfNumbers); // [1, 2, 3]

22. 콜백의 매개변수 구조 분해

콜백 매개변수에서 구조 분해를하면 콜백에 전달된 객체의 속성에 직접 액세스할 수 있으므로 코드를 더욱 간결하게 만들 수 있습니다.

const users = [
  { id: 1, name: 'Jane' },
  { id: 2, name: 'John' },
];
users.forEach(({ id, name }) => {
  console.log(`User ID: ${id}, User Name: ${name}`);
});

23. 선택적 콜백 함수

Short-circuit evaluation를 사용하면 선택적 콜백 함수가 제공된 경우에만 호출할 수 있으므로 코드가 더욱 견고해집니다.

function fetchData(url, callback) {
  fetch(url)
    .then((response) => response.json())
    .then((data) => {
      callback && callback(data);
    });
}

24. Promisify Callbacks

promisify 유틸리티 함수를 사용하여 콜백 기반 함수를 Promise으로 변환할 수 있으므로 async/await 구문으로 작업하기가 더 쉬워집니다.

function promisify(fn) {
  return function (...args) {
    return new Promise((resolve, reject) => {
      fn(...args, (err, result) => {
        if (err) reject(err);
        else resolve(result);
      });
    });
  };
}

const readFile = promisify(require('fs').readFile);
readFile('path/to/file.txt', 'utf8')
  .then((data) => console.log(data))
  .catch((err) => console.error(err));

25. 동시 실행을 위한 Promise.all

여러 비동기 작업을 동시에 처리하는 것은 어려울 수 있습니다. Promise.all을 사용하면 여러 비동기 작업을 동시에 처리하고 모든 작업이 완료되면 계속 진행할 수 있습니다.

const fetchData1 = fetch('https://api.example.com/data1').then((response) => response.json());
const fetchData2 = fetch('https://api.example.com/data2').then((response) => response.json());

Promise.all([fetchData1, fetchData2])
  .then(([data1, data2]) => {
    console.log('Data 1:', data1);
    console.log('Data 2:', data2);
  })
  .catch((error) => {
    console.error('Error:', error);
  });