Skip to content

Latest commit

 

History

History
255 lines (176 loc) · 6.6 KB

javascript.md

File metadata and controls

255 lines (176 loc) · 6.6 KB

자바스크립트(JavaScript)

목차

자바스크립트란?

자바스크립트(JavaScript) 는 웹 브라우저에서 동작하는 스크립팅 언어로, 클라이언트 측 동작, 서버 측(Node.js), 그리고 모바일 및 데스크톱 애플리케이션 개발에서도 널리 사용됩니다.

  • 인터프리터 언어: 코드를 실행하기 전에 컴파일하지 않고, 실시간으로 실행.
  • 멀티 패러다임: 객체 지향, 함수형, 이벤트 기반 프로그래밍을 지원.
  • 유연한 언어: 정적 언어와 달리, 타입과 객체를 동적으로 변경 가능.

자바스크립트의 주요 특징

  1. 동적 타입(Dynamic Typing):

    • 변수를 선언할 때 데이터 타입을 명시하지 않음.
    • 런타임에 데이터 타입이 결정됨.

  2. 프로토타입 기반(Prototype-based):

    • 클래스가 아닌 프로토타입을 사용하여 객체를 상속.

  3. 이벤트 루프(Event Loop):

    • 비동기 작업을 처리하기 위한 동시성 모델.

  4. 광범위한 활용성:

    • 프론트엔드(React, Vue.js), 백엔드(Node.js), 모바일(React Native) 등 다양한 분야에서 사용.

변수와 스코프

변수 선언

  1. var:

    • 함수 스코프를 가지며, 재선언 가능.
    • 호이스팅(Hoisting)으로 인해 예측하지 못한 동작이 발생할 수 있음. (호이스팅: 변수 선언을 함수 상단으로 끌어올리는 동작)

  2. let:

    • 블록 스코프를 가지며, 재선언 불가능.

  3. const:

    • 상수를 선언할 때 사용.
    • 값이 변경되지 않지만, 객체의 속성은 변경 가능.
let x = 10;
const y = 20;

x = 30; // 가능
y = 40; // 오류: y는 재할당할 수 없음

스코프

  • 함수 스코프: var로 선언된 변수는 함수 내에서만 접근 가능.
  • 블록 스코프: let과 const는 블록({}) 내에서만 접근 가능.

함수와 클로저

함수 선언 및 표현식

  1. 함수 선언식:
  • 특징: 함수 선언식은 함수가 정의되기 전에 호출할 수 있습니다. 이는 함수 호이스팅 덕분입니다.
  • 예시:
function greet(name) {
  return `Hello, ${name}`;
}
  1. 함수 표현식:
  • 특징: 함수 표현식은 변수에 할당된 후에만 호출할 수 있습니다. 함수 호이스팅이 적용되지 않습니다.
  • 예시:
const greet = function (name) {
  return `Hello, ${name}`;
};
  1. 화살표 함수:
  • 특징: 화살표 함수는 this 바인딩이 없으며, 간결한 문법을 제공합니다. 주로 콜백 함수나 간단한 함수 정의에 사용됩니다.
  • 예시:
const greet = (name) => `Hello, ${name}`;

클로저

  • 함수와 그 함수가 선언된 렉시컬 환경을 함께 저장하는 구조.
  • 내부 함수가 외부 함수의 변수를 참조할 수 있음.
function makeCounter() {
  let count = 0;
  return function () {
    count++;
    return count;
  };
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2

비동기 프로그래밍

콜백 함수

  • 비동기 작업을 처리하기 위해 다른 함수에 전달되는 함수.
setTimeout(() => {
  console.log("1초 뒤 실행");
}, 1000);

프로미스(Promise)

  • 비동기 작업의 성공(resolve) 또는 실패(reject)를 나타내는 객체.
const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => resolve("데이터 수신"), 1000);
});

fetchData.then((data) => console.log(data));

async/await

  • 비동기 코드를 동기적으로 작성할 수 있는 문법.
async function fetchData() {
  const data = await new Promise((resolve) =>
    setTimeout(() => resolve("데이터 수신"), 1000)
  );
  console.log(data);
}

fetchData();

ES6 이후의 주요 기능

  1. 템플릿 리터럴:
    • 문자열 내에서 표현식을 삽입 가능.
const name = 'John';
console.log(Hello, ${name});
  1. 디스트럭처링:
    • 객체나 배열의 값을 간단히 분해하여 변수에 할당.
const [a, b] = [10, 20];
const { x, y } = { x: 30, y: 40 };
  1. 모듈 시스템:
    • 코드의 재사용성을 높이기 위한 import/export 문법.
// math.js
export const add = (a, b) => a + b;

// main.js
import { add } from "./math.js";

console.log(add(2, 3)); // 5
  1. 클래스 문법:
    • ES6에서 추가된 문법으로, 프로토타입 기반 객체지향을 보다 직관적으로 작성.
class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const john = new Person("John");
john.greet();

자바스크립트의 활용 사례

  1. 웹 프론트엔드:
    • React, Vue.js, Angular 등 프레임워크를 사용하여 동적인 UI 개발.
  2. 웹 백엔드:
    • Node.js로 서버 애플리케이션 개발.
  3. 모바일 애플리케이션:
    • React Native를 통해 크로스플랫폼 앱 개발.
  4. 데스크톱 애플리케이션:
    • Electron을 사용하여 크로스플랫폼 데스크톱 앱 개발.

자바스크립트 사용 시 주의사항

  1. 타입 혼란:
    • 자바스크립트는 동적 타입 언어이므로, 타입 강제를 위한 TypeScript 사용을 고려.
  2. 호이스팅:
    • 변수 선언과 함수 선언이 코드 상단으로 끌어올려지는 현상에 주의.
  3. 비동기 처리:
    • 콜백 헬(Call Back Hell)을 피하기 위해 async/await 또는 Promise를 활용.
  4. 전역 변수 남용:
    • 전역 변수는 의도치 않은 충돌을 유발할 수 있으므로 최소화.

결론

자바스크립트는 웹 개발의 핵심 언어로, 클라이언트 및 서버 측 개발을 모두 지원합니다. ES6 이후의 새로운 문법과 프레임워크를 적극 활용하면, 생산성과 코드 품질을 높일 수 있습니다.