[개념정리] 자바스크립트 기본 용어

jjyu_my·2024년 8월 16일
0

JAVASCRIPT

목록 보기
2/15
post-thumbnail

👩🏻‍💻 자바스크립트를 공부하기 시작했다!!!!
까먹지 않기 위해 ? 기본용어를 정리해보려한다

📌 변수 (Variable)

  • 데이터를 저장하기 위한 공간을 의미합니다.
    var, let, const 키워드를 사용하여 변수를 선언합니다.****

🛠️ 변수 선언 키워드

1️⃣ var

  • 오래된 방식으로 변수를 선언할 때 사용하는 키워드
  • 특징
    • 전역 변수: 함수 밖에서 선언하면 전역 변수가 됩니다.
    • 변경 가능: 선언된 변수의 값을 변경할 수 있습니다.
    • 호이스팅: 변수를 선언하기 전에 사용할 수 있지만, 초기화되기 전에는 undefined로 처리됩니다.
var name = "Alice";
name = "Bob"; // 변수 값을 변경할 수 있음

2️⃣ let

  • ES6(ECMAScript 2015)에서 새로 도입된 변수 선언 방식
  • 특징
    • 블록 범위: 변수는 선언된 블록 내에서만 유효합니다. 예를 들어, {} 안에서만 사용 가능합니다._
    • 변경 가능: 선언된 변수의 값을 변경할 수 있습니다.
let age = 25;
age = 26; // 변수 값을 변경할 수 있음

if (true) {
    let insideBlock = "Inside block";
    console.log(insideBlock); // "Inside block"
}
console.log(insideBlock); // 오류 발생! insideBlock은 블록 안에서만 유효

3️⃣ const

  • 상수를 선언할 때 사용하는 키워드입니다. 한번 값을 설정하면 변경할 수 없습니다
  • 특징
    • 블록 범위: let과 마찬가지로 블록 내에서만 유효합니다.
    • 변경 불가: 선언된 변수의 값을 변경할 수 없습니다.
      하지만 객체나 배열의 경우, 객체의 속성이나 배열의 요소는 변경할 수 있습니다.
const PI = 3.14159;
// PI = 3.14; // 오류 발생! const로 선언된 변수는 값을 변경할 수 없음

const numbers = [1, 2, 3];
numbers.push(4); // 배열의 요소는 추가할 수 있음
console.log(numbers); // [1, 2, 3, 4]

📌 함수 (Function)

  • 특정 작업을 수행하는 코드 블록입니다.
    함수는 function 키워드를 사용해 정의하며, 호출하여 실행할 수 있습니다.

📌 객체 (Object)

  • 속성(프로퍼티)과 메서드(함수)를 포함하는 데이터 구조입니다.
    {}를 사용해 객체를 정의합니다.
const person = { name: "John", age: 30 };

📌 배열 (Array)

  • 여러 개의 값을 하나의 변수에 저장할 수 있는 데이터 구조입니다.
    [ ]를 사용해 배열을 정의합니다.

const colors = ["red", "green", "blue"];

📌 조건문 (Conditional Statement)

  • 특정 조건에 따라 코드 블록을 실행할 수 있는 구조입니다. if, else if, else가 사용됩니다.
if (age > 18) {
    console.log("Adult");
} else {
    console.log("Not an adult");
}

🧩 조건문: if, else if, else

1️⃣ if

  • 특정 조건이 참일 때 실행할 코드 블록을 정의합니다.
  • 사용 방법
    조건이 참일 때 실행될 코드를 중괄호 {}로 감싸서 작성합니다.
let temperature = 30;

if (temperature > 25) {
    console.log("It's hot outside!");
}

(온도가 25도보다 높으면 "It's hot outside!"가 출력됩니다.)

2️⃣ else if

  • if 조건이 거짓일 때, 추가로 다른 조건을 확인할 때 사용합니다.
  • 사용 방법
    if 뒤에 추가 조건을 설정하고, 조건이 참일 때 실행할 코드를 작성합니다.
let temperature = 20;

if (temperature > 25) {
    console.log("It's hot outside!");
} else if (temperature > 15) {
    console.log("It's warm outside.");
}

(온도가 25도보다 높으면 "It's hot outside!"가 출력되고,
그렇지 않고 15도보다 높으면 "It's warm outside."가 출력됩니다.)

3️⃣ else

  • 앞의 if와 else if 조건이 모두 거짓일 때 실행될 코드를 정의합니다.
  • 사용 방법
    조건이 참이지 않을 때 실행될 코드를 작성합니다.
let temperature = 10;

if (temperature > 25) {
    console.log("It's hot outside!");
} else if (temperature > 15) {
    console.log("It's warm outside.");
} else {
    console.log("It's cold outside.");
}

(온도가 25도보다 높으면 "It's hot outside!"가 출력되고,
15도보다 높으면 "It's warm outside."가 출력되며,
그 외에는 "It's cold outside."가 출력됩니다.)

📌 반복문 (Loop)

  • 코드 블록을 여러 번 실행하기 위해 사용됩니다.
    for, while, do...while 등의 반복문이 있습니다.
for (let i = 0; i < 5; i++) {
    console.log(i);
}

🔄 반복문

1️⃣ for 반복문

  • 반복 횟수를 명확하게 지정할 수 있는 반복문입니다.
  • 사용 방법
    초기화, 조건, 증감식 세 가지 부분으로 구성되어 있습니다.
for (let i = 0; i < 5; i++) {
    console.log(i);
}

(이 반복문은 i가 0부터 4까지 5번 반복되며, 각 값을 출력합니다.)

2️⃣ while 반복문

  • 조건이 참인 동안 계속 반복하는 반복문입니다.
  • 사용 방법
    조건이 참일 때 코드 블록을 반복 실행합니다. 조건이 거짓이 되면 반복을 멈춥니다.
let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

(이 반복문은 i가 5보다 작은 동안 반복하며, i의 값을 출력하고 증가시킵니다.)

3️⃣ do...while 반복문

  • 코드 블록을 최소한 한 번은 실행한 후, 조건을 검사하여 반복을 계속할지 결정하는 반복문입니다.
  • 사용 방법
    코드 블록을 먼저 실행하고 조건을 검사하여 반복 여부를 결정합니다.
let i = 0;
do {
    console.log(i);
    i++;
} while (i < 5);

(이 반복문은 i가 5보다 작은 동안 반복하며, i의 값을 출력하고 증가시킵니다.
최소한 한 번은 코드 블록이 실행됩니다.)

📌 전위 증감 연산자와 후위 증감 연산자

1️⃣ 전위 증감 연산자 (Prefix Increment/Decrement)

  • 형식: ++변수 또는 --변수
  • 동작: 연산자가 변수 앞에 위치하며, 변수의 값을 먼저 변경한 후 그 값을 사용합니다.

let x = 5;
console.log(++x); // 6

여기서 ++x는 x의 값을 먼저 1 증가시킨 후, 증가된 값을 콘솔에 출력합니다.

2️⃣ 후위 증감 연산자 (Postfix Increment/Decrement)

  • 형식: 변수++ 또는 변수--
  • 동작: 연산자가 변수 뒤에 위치하며, 변수의 현재 값을 먼저 사용한 후 그 값을 변경합니다.
let y = 5;
console.log(y++); // 5
console.log(y);   // 6

여기서 y++는 y의 현재 값을 콘솔에 출력한 후, y의 값을 1 증가시킵니다.
그래서 첫 번째 console.log는 5를 출력하고, 두 번째 console.log는 6을 출력합니다.

📌 이벤트 (Event)

  • 사용자 또는 브라우저의 행동을 나타내는 신호입니다.
    예를 들어, 클릭, 키 입력, 페이지 로드 등이 이벤트입니다.
    이벤트 리스너를 통해 특정 이벤트에 대해 코드를 실행할 수 있습니다.

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

📌 DOM (Document Object Model)

  • HTML 문서의 구조를 객체로 표현한 것입니다.
    자바스크립트를 사용해 DOM을 조작하여 웹 페이지의 내용과 구조를 동적으로 변경할 수 있습니다.
document.getElementById('myElement').innerText = "Hello World";

📌 클로저 (Closure)

  • 함수 안에서 만든 변수를 기억하고 사용하는 기능입니다.

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

📌 콜백 함수 (Callback Function)

  • 다른 함수에 인수로 전달되는 함수입니다. 비동기 작업을 처리할 때 주로 사용됩니다.
function fetchData(callback) {
    setTimeout(() => {
        callback("Data loaded");
    }, 1000);
}
fetchData(function(data) {
    console.log(data);
});

📌 프로미스 (Promise)

  • 비동기 작업의 완료 또는 실패를 나타내는 객체입니다.
  • 작업이 성공적으로 완료되었는지, 실패했는지를 명확하게 표현합니다.
    then, catch, finally 메서드를 사용하여 결과를 처리할 수 있습니다.
const promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("Done"), 1000);
});
promise.then(result => console.log(result));

1️⃣ then(onFulfilled, onRejected)

  • 프로미스가 성공적으로 완료되었을 때와 실패했을 때 각각의 콜백 함수를 지정합니다.
let promise = new Promise((resolve, reject) => {
    // 비동기 작업을 수행
    let success = true; // 성공 여부를 결정
    if (success) {
        resolve("작업이 성공적으로 완료되었습니다.");
    } else {
        reject("작업이 실패했습니다.");
    }
});

promise.then(
    (result) => { console.log("성공:", result); },  // 작업 성공 시 실행
    (error) => { console.error("실패:", error); }   // 작업 실패 시 실행
);

2️⃣ catch(onRejected)

  • 프로미스가 실패했을 때 실행될 콜백 함수를 지정합니다.
promise.catch((error) => {
    console.error("에러 발생:", error);
});

3️⃣finally(onFinally)

  • 프로미스의 성공 또는 실패와 상관없이 항상 실행되는 콜백 함수를 지정합니다.
promise.finally(() => {
    console.log("비동기 작업이 완료되었습니다.");
});

📌 async/await

  • 비동기 작업을 동기적으로 작성할 수 있게 해주는 문법입니다.
    async 함수는 항상 프로미스를 반환하며, await 키워드는 프로미스가 해결될 때까지 대기합니다.
async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
}

1️⃣ async 함수

  • async 키워드를 사용하여 선언된 함수는 항상 프로미스를 반환합니다.
  • 특징
    함수 내부에서 await 키워드를 사용할 수 있습니다. 함수가 실행될 때, 결과적으로 프로미스가 반환되며, 이는 비동기 작업의 완료를 나타냅니다.

async function fetchData() {
    // 이 함수는 항상 프로미스를 반환합니다.
}

2️⃣ await 키워드

  • await 키워드는 프로미스가 해결될 때까지 함수의 실행을 일시 중지합니다.
    - 사용 방법
    await는 오직 async 함수 내에서만 사용됩니다.
    await는 프로미스가 완료될 때까지 기다리며, 프로미스가 해결되면 그 결과를 반환합니다.
async function fetchData() {
    const response = await fetch('https://api.example.com/data'); // 프로미스가 해결될 때까지 대기
    const data = await response.json(); // JSON 데이터로 변환할 때까지 대기
    console.log(data); // 데이터를 콘솔에 출력
}
profile
이전 포스트

자바스크립트를 이해하기 위한 컴퓨터 프로그래밍 언어 개념

다음 포스트

JS_폼 전송 : HTML과 JavaScript의 역할 개념정리

0개의 댓글