자바스크립트 개념 썸네일 이미지

초보자를 위한 10가지 필수 자바스크립트 개념

by
자바스크립트 개념

초보자를 위한 10가지 필수 자바스크립트 개념에 대해 알려드리겠습니다. javascript는 가장 대중적으로 이용되는 프로그래밍 언어 중에 하나로 여러 웹사이트와 앱을 지원해 줍니다. 처음 코딩을 시작할 때 동적인 웹 사이트를 만들기 위해서는 반드시 자바 스크립트를 이해하고 있어야 하기 때문에 10가지의 필수적인 개념에 대해 정리해 보도록 하겠습니다.

10가지 자바스크립트 개념

필수로 알고 있으면 도움이 되는 10가지 개념에 대해 정리해 보았으니 코드를 참고하여 실습해 보시면 좋을 것 같습니다.

1. 변수

변수는 자바스크립트에서 데이터 저장 시 이용하게 되며, 정보 처리 및 조작을 위해서는 데이터 유형에 대해 정확히 알고 있는 것이 중요합니다.

  • 변수 선언 시[var, let, const]를 이용
  • 자바 스크립트에는 동적 유형 지정이 있기 때문에 런타임 중에 변수 유형이 변경될 수 있음
  • 일반적인 데이터 유형 [string, number, boolean, object, array, null, underfine]이 있음
let name = "Blare"; // Stringconst age = 25;    // Numberlet isStudent = true; // Boolean

2. 함수

함수 코드는 재사용이 가능한 코드 블럭으로 특정 작업 수행이 가능하고 모듈 및 유지 관리가 가능합니다.

  • 함수 선언 및 표현식 사용
  • ‘ => ‘는 간단한 구문
// Function declaration
function greet(name) {
  return `Hello, ${name}!`;
}

// Arrow function
const greetArrow = (name) => `Hello, ${name}!`;

console.log(greet("Alice")); 

// Output: Hello, Friends!

3. 조건문

‘if…else’, ‘while’, ‘switch’ 같은 조건문을 통해서 조건에 따라 프로젝트 흐름을 편리하게 관리할 수 있습니다.

  • ‘if…else’ 조건으로 코드를 실행
  • ‘for’, ‘while’, ‘do…while’를 통해 데이터나 작업을 반복
  • ‘switch’로 다양한 조건을 처리
let age = 18;

if (age >= 18) {
  console.log("Adult");
} else {
  console.log("Minor");
}

for (let i = 0; i < 5; i++) {
  console.log(i); // Outputs: 0, 1, 2, 3, 4
}

4. 객체와 배열

객체와 배열은 자바 스크립트의 기본 데이터 구조이며 데이터를 저장 및 구성하기에 용이합니다.

  • 객체 : ‘키-값’의 세트를 사용해 데이터를 저장
  • 배열 : 항목 순서가 지정된 목록
// Object
const user = { name: "June", age: 30 };
console.log(user.name); // Output: John

// Array
const fruits = ["Apple", "Mango", "Cherry"];
console.log(fruits[1]); // Output: Mango

5. DOM

문서 객체 모델인 DOM은 웹페이지 구조를 나타내며 콘텐츠와 스타일에 대해 업데이트가 가능합니다.

  • 요소에 접근하기 위해서 ‘document.querySelector()’ 또는 ‘document.getElementById()’를 사용
  • ‘innerHTML’, ‘style’ 및 속성 변경
document.getElementById("myButton").addEventListener("click", function () {
  document.getElementById("text").innerHTML = "Button Clicked!";
});

6. 이벤트 리스너

이벤트에서는 [클릭, 스크롤, 키 누르기] 등 웹 페이지에서 발생하는 동작을 의미합니다. 이벤트 리스너를 통해 자바 스크립트로 행동을 만들어 낼 수 있습니다.

  • 일반 이벤트 : ‘click’, ‘mouseover’, ‘keydown’, ‘load’
  • 요소에 이벤트 연결 시 : ‘.addEventListener()’ 사용
document.querySelector("#btn").addEventListener("click", () => {
  alert("Button clicked!");
});

7. 범위

범위는 변수에 접근할 수 있는 위치를 결정해 줍니다. 함수가 외부의 변수를 기억할 때 클로저가 발생하게 됩니다.

  • 범위 : 어디에서나 엑세스 가능한 변수
  • 로컬 범위 : 함수 or 블록 내에 엑세스 할 수 있는 변수
  • 클로저 : 개인 변수 및 캡슐화 활성화
function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const counter = outer();
console.log(counter()); // Output: 1console.log(counter()); // Output: 2

8. 비동기

비동기를 사용하면 자바가 메인 스레드를 차단하지 않고도 API에서 데이터를 가져오는 것과 같은 작업을 처리하게 됩니다.

  • 약속 : 미래에 사용하는 가치를 나타냄
  • 약속 작업 단순화 : ‘async/await’
// Using Promisesfetch("https://api.example.com/data")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

// Using async/awaitasync function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}
fetchData();

9. ES6+ 기능

ES6 이상 버전에서는 코드를 단순화하고 성능을 향상시킬 수 있습니다.

  • 템플릿 : ‘${variable}’
  • 객체 및 배열에서 값을 추출
const user = { name: "Marry", age: 30 };
const { name, age } = user;
console.log(name); // Output: Marry

10. 오류 처리

오류 처리를 통해서 예상치 못 한 코드 처리해 충돌을 방지할 수 있습니다.

  • ‘try…catch’ 사용
  • 특정 조건에 대해 오류 발생
try {
  const data = JSON.parse("{ malformed JSON }");
} catch (error) {
  console.error("Error parsing JSON:", error.message);
}

필수 자바스크립트 FAQ

js에서 비동기 작업을 어떻게 처리하나요?

javascript에서는 이벤트 루프를 통해 비동기 작업을 관리할 수 있습니다. ‘async/await’나 promise는 비동기 작업을 처리할 때 쓰는 패턴입니다.

자바 스크립트에서 var, let, const의 차이가 뭔가요?

var는 함수 내에서 변수를 선언하지만 범위가 부족해 오래된 동작을 띄고, let은 블록 범위로 변수를 선언하기 때문에 더 안전합니다. const는 다시 선언할 수 없는 변수를 선언해 값을 보장해 줍니다.

javascript가 브라우저 밖에서 실행 되나요?

네 가능합니다. 백엔드 개발 시 자바를 사용할 수 있게 하는 node.js 환경을 통해 브라우저 밖에서도 실행할 수 있게 합니다.

총 정리

웹 페이지를 구축 할 때 10가지 필수 자바스크립트 개념만 이해하고 있어도 변수, 함수, DOM, 비동기 프로그래밍 등 다양한 문제를 해결할 수 있고 실제 프로젝트를 수월하게 이끌어 갈 수 있습니다. 두루뭉실하게 하는 것이 아니라 각자의 개념에 대해 충분히 공부하고 실습하는 것을 추천드립니다.

Leave a Comment