자바스크립트의 중요한 개념

다음은 일상적인 개발에 중요한 중요하고 자주 사용되는 JavaScript 개념입니다.

1. 변수와 상수

• 변수 선언에는 var, let, const가 사용됩니다.
• var는 함수 범위입니다.
• let과 const는 블록 범위이며 const는 상수(변경되지 않는 값)에 사용됩니다.

let age = 25;
const name = 'John';

2. 데이터 유형

• 기본 유형: 숫자, 문자열, 부울, 정의되지 않음, Null, 기호, BigInt
• 참조 유형: 객체, 배열, 함수

const person = { name: 'Alice', age: 30 };  // Object
const numbers = [1, 2, 3, 4];               // Array

3. 기능

함수 선언: 이름이 지정된 함수
함수 표현식: 변수에 함수를 할당합니다.
화살표 함수: 더 짧은 구문, 이를 어휘적으로 바인딩합니다.

function greet() {
  console.log('Hello!');
}

const sum = (a, b) => a + b;  // Arrow Function

4. 폐쇄

• 생성된 환경을 기억하는 기능입니다.

function outer() {
  let count = 0;
  return function increment() {
    count++;
    return count;
  };
}

const inc = outer();
console.log(inc());  // 1
console.log(inc());  // 2

5. 약속과 비동기/대기

• 비동기 작업 처리
• 프라미스: API 호출과 같은 비동기 작업에 사용됩니다.
• Async/Await: Promise를 처리하는 더 깔끔한 방법입니다.

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("Data"), 1000);
  });
};

async function getData() {
  const data = await fetchData();
  console.log(data);  // "Data"
}

getData();

6. 구조파괴

• 배열에서 값을 추출하거나 객체에서 속성을 추출합니다.

const person = { name: 'John', age: 30 };
const { name, age } = person;

const nums = [1, 2, 3];
const [first, second] = nums;

7. 확산 및 나머지 연산자

• Spread (...): 배열이나 개체를 확장합니다.
• Rest (...): 인수를 배열로 수집합니다.

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];  // [1, 2, 3, 4]

function sum(...numbers) {
  return numbers.reduce((acc, val) => acc + val, 0);
}

sum(1, 2, 3);  // 6

8. 배열 방법

• forEach: 배열을 반복합니다.
• map: 요소가 수정된 새 배열을 반환합니다.
• filter: 조건을 충족하는 요소가 포함된 새 배열을 반환합니다.
• reduce: 배열을 단일 값으로 줄입니다.

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

9. 객체와 프로토타입

• JavaScript 개체는 동적이며 속성과 메서드를 가질 수 있습니다.
• 프로토타입: 객체 유형에 메소드를 추가할 수 있습니다.

const person = { name: 'John', age: 30 };
Object.prototype.greet = function() {
  return `Hello, ${this.name}`;
};

console.log(person.greet());  // "Hello, John"

10. 이벤트 처리

• 브라우저에서 사용자 이벤트(예: 클릭, 입력)를 처리합니다.

document.querySelector('button').addEventListener('click', function() {
  console.log('Button clicked!');
});

11. DOM 조작

• JavaScript를 통해 HTML 요소에 액세스하고 수정합니다.

const header = document.querySelector('h1');
header.textContent = 'Hello World!';
header.style.color = 'blue';

12. 모듈(ES6+)

• 보다 나은 유지 관리를 위해 JavaScript 코드를 모듈로 분할할 수 있습니다.

// module.js
export const greet = () => console.log('Hello');

// main.js
import { greet } from './module.js';
greet();  // "Hello"

13. 오류 처리

• 예외 처리를 위한 Try/Catch 블록.

try {
  throw new Error('Something went wrong');
} catch (error) {
  console.error(error.message);
}

14. 템플릿 리터럴

• 여러 줄 문자열 및 삽입 표현식에 백틱 사용

const name = 'John';
const greeting = `Hello, ${name}`;

15. 참값과 거짓값

• 어떤 값이 true 또는 false로 평가되는지 이해합니다.

if (0) {  // Falsy
  console.log('This won’t run');
}

if (1) {  // Truthy
  console.log('This will run');
}

이러한 개념을 익히면 일상적인 JavaScript 개발 시 대부분의 과제를 해결할 수 있습니다!

위 내용은 자바스크립트의 중요한 개념의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!