C2C Dev

 var, let, const는 자바스크립트에서 변수를 선언할 때 사용하는 키워드

var는 ES5까지 유일하게 쓰였지만, 단점을 보완하기 위해서 ES6에서 let과 const를 도입

*호이스팅 : 변수나 함수 선언이 해당 스코프의 최상단으로 끌어올려진 것처럼 동작하는 특성

1. var

• 스코프: 함수 스코프 (Function Scope)를 가지며, 변수가 선언된 함수 내부에서만 접근할 수 있다.
• *호이스팅: var로 선언된 변수는 호이스팅(hoisting)되어 변수 선언이 코드의 맨 위로 끌어올려진다. 단, 초기화는 이루어지지 않아 undefined 상태가 된다.
• 재할당/재선언: var로 선언된 변수는 재할당이 가능하고, 같은 스코프에서 재선언도 가능하다.

console.log(x); // undefined (변수 선언 전)
var x = 5;
var y = 1;
console.log(x); // 5 (변수 선언 후)
var x = 100;
var y;

console.log(x); // 100
console.log(y); // 1

var는 스코프와 호이스팅이 다소 불안정하게 작용할 수 있어서, 최신 코드에서는 잘 사용되지 않는 편

2. let

• 스코프: 블록 스코프(Block Scope)를 가집니다. 즉, 변수가 선언된 블록({}) 내부에서만 접근 가능
• * 호이스팅: let 역시 호이스팅되지만, 초기화는 선언문까지 지연되므로, 선언문 이전에 접근하면 ReferenceError가 발생
• 재할당/재선언: let으로 선언된 변수는 재할당이 가능하지만, 같은 스코프에서 재선언은 불가능

let y = 10;
if (true) { // 블록 스코프의 범위
    let y = 20;
    console.log(y); // 20
}
console.log(y); // 10

3. const

• 스코프: let과 동일하게 블록 스코프를 가진다.
• * 호이스팅: let과 마찬가지로 선언문 이전에 사용할 수 없다.
• 재할당/재선언: const로 선언된 변수는 재할당이 불가능하고, 같은 스코프에서 재선언할 수 없다. 선언 시 반드시 초기화가 필요

// 값을 변경하지 않을 변수를 선언
const z = 30;
// z = 40; // 30으로 선언하여 변경 불가능 
// Error: Assignment to constant variable.

// const로 선언한 객체나 배열의 경우, 내부 속성이나 요소는 변경 가능
const obj = { name: "Alice" };
obj.name = "Bob"; // 가능
console.log(obj); // { name: "Bob" }

const는 상수와 같이 값을 변경하지 않을 변수를 선언할 때 주로 사용한다.

다만, const로 선언한 객체나 배열의 경우, 내부 속성이나 요소는 변경 가능하다.

요약

• var: 함수 스코프, 호이스팅됨, 재할당 및 재선언 가능
• let: 블록 스코프, 호이스팅됨(초기화 전 사용 불가), 재할당 가능, 재선언 불가
• const: 블록 스코프, 호이스팅됨(초기화 전 사용 불가), 재할당 불가, 재선언 불가

최신 자바스크립트에서는 주로 let과 const를 사용하는 것을 권장

async/await

promise기반으로 동작

promise의 then/catch/finally 후속 처리 메서드에 콜백 함수를 전달하여 비동기 처리 결과를 후속 처리 필요 없이

동기처럼 promise를 사용하여 처리 결과를 반환 

1. async

async는 함수 앞에 붙여 해당 함수를 비동기 함수로 만든다.

항상 Promise 객체를 반환하며, 반환된 값이 프로미스가 아닌 경우 자동으로 Promise.resolve()로 감싸져 반환

async function fetchData() {
    return "데이터";
}

fetchData().then(data => console.log(data)); // 출력: "데이터"

2. await

await 키워드는 async 함수 내부에서만 사용

await는 Promise가 처리될 때까지 기다린 후, 해당 Promise의 결과를 반환

비동기 작업이 끝날 때까지 기다리며, try...catch 구문을 사용하여 에러를 처리

async function getData() {
    try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("에러 발생:", error);
    }
}
getData();

fetch 함수는 Promise를 반환하는데, await를 사용하면 fetch가 완료될 때까지 기다린 후 그 결과를 response에 저장

에러가 발생하면 catch 블록이 실행

3. async/await의 장점

• 코드 가독성 향상: async/await는 코드의 가독성을 높여, 비동기 작업을 순차적으로 처리할 때 코드가 더 직관적이다.
• 에러 처리 용이성: try...catch 구문으로 에러 처리가 가능해 에러 핸들링이 간단해진다.

// Promise 사용
function getDataPromise() {
    fetch("https://api.example.com/data")
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error("에러 발생:", error));
}

// async/await 사용
async function getDataAsync() {
    try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("에러 발생:", error);
    }
}

Promise

비동기 작업을 처리할 때 사용되는 객체

서버 요청, 파일 읽기, 타이머 같은 작업이 완료되거나 실패했을 때 결과 여부를 알 수 있다.

주로 콜백 함수의 복잡함을 줄이고, 비동기 코드를 좀 더 가독성 좋게 작성할 수 있도록 도와줌

1. Promise의 상태

Promise 객체는 세 가지 상태를 가진다.

• Pending (대기 중): 초기 상태로, 비동기 작업이 아직 완료되지 않은 상태
• Fulfilled (성공): 작업이 성공적으로 완료되어 결과 값을 반환한 상태
• Rejected (실패): 작업이 실패하여 에러가 발생한 상태

2. Promise 사용법

const myPromise = new Promise((resolve, reject) => {
  const success = true; // 예시 조건

  if (success) {
    resolve("작업 성공!");
  } else {
    reject("작업 실패!");
  }
});

Promise는 new Promise를 사용하여 생성하며,

두 개의 콜백 함수, resolve와 reject를 인자로 받는다.

resolve는 작업이 성공적으로 완료될 때 호출되며, reject는 작업이 실패할 때 호출한다.

3. then과 catch를 사용한 결과 처리

// 2. promise 사용법 코드 이후

myPromise
  .then((result) => {
    console.log(result); // "작업 성공!"이 출력됨
  })
  .catch((error) => {
    console.error(error); // "작업 실패!"가 출력됨
  });

then 메서드는 작업이 성공했을 때 실행

catch 메서드는 작업이 실패했을 때 실행

위에 2번 코드에 적용할 시 콘솔창에는 "작업 성공!" 출력

4. finally 메서드

myPromise
  .then((result) => console.log(result))
  .catch((error) => console.error(error))
  .finally(() => console.log("작업 완료!"));

finally는 작업의 성공 여부와 상관없이 항상 실행

주로 작업 종료 후에 해야 할 정리 작업이 있을 때 유용하다.

5. 여러 개의 Promise 처리하기

Promise.all

여러 개의 Promise를 병렬로 실행하고, 모두 완료될 때까지 기다린 후 결과를 한 번에 반환,

하나라도 실패하면 전체가 실패

const promise1 = Promise.resolve("첫 번째 작업");
const promise2 = Promise.resolve("두 번째 작업");

Promise.all([promise1, promise2])
  .then((results) => console.log(results)) // ["첫 번째 작업", "두 번째 작업"]
  .catch((error) => console.error(error));

Promise.race

Promise 배열 중 가장 먼저 완료된 Promise의 결과를 반환

const promiseA = new Promise((resolve) => setTimeout(() => resolve("A 완료"), 1000));
const promiseB = new Promise((resolve) => setTimeout(() => resolve("B 완료"), 500));

Promise.race([promiseA, promiseB])
  .then((result) => console.log(result)); // "B 완료"

Promise는 비동기 작업의 성공 또는 실패 결과를 반환하는 객체

then, catch, finally를 통해 Promise 결과를 처리

Promise.all, Promise.race 등으로 여러 Promise를 동시에 처리

this

JavaScript에서 함수 호출 방식에 따라 달라지는 컨텍스트를 가리키는 키워드

값은 함수가 어떻게 호출되었는지에 따라 동적으로 결정

1. 전역 컨텍스트

this가 전역 객체를 가리키며, 브라우저 환경에서는 window 객체, Node.js 환경에서는 global 객체를 나타낸다.

console.log(this); // 브라우저에서는 window 객체를 출력

2. 객체 메서드 컨텍스트

객체 메서드 내부에서 this는 해당 메서드를 소유하는 객체를 가리킨다.

const obj = {
  name: '홍길동',
  greet() {
    console.log(this.name); // this는 obj를 가리킴
  }
};
obj.greet(); // '홍길동' 출력

3. 생성자 함수 및 클래스 컨텍스트

생성자 함수 또는 클래스에서 this는 새로 생성된 인스턴스 객체를 가리킨다.

new 키워드를 사용하여 호출할 때 해당 함수나 클래스가 가리키는 객체가 this로 설정

function Person(name) {
  this.name = name;
}

const person1 = new Person('홍길동');
console.log(person1.name); // '홍길동' 출력

4. 함수 호출 컨텍스트

일반 함수 호출에서는 엄격 모드라면 undefined, 비엄격 모드에서는 전역 객체를 가리킨다.

function showThis() {
  'use strict';
  console.log(this); // undefined 출력
}
showThis();

5. 명시적 바인딩

• call: 함수를 호출하면서 this 값을 명시적으로 지정, 인수는 개별적으로 전달
• apply: call과 유사하지만 인수를 배열 형태로 전달
• bind: 함수를 호출하지 않고 this 값이 영구적으로 바인딩된 새로운 함수를 반환

function introduce() {
  console.log(this.name);
}

const user = { name: '홍길동' };

introduce.call(user); // '홍길동' 출력
introduce.apply(user); // '홍길동' 출력
const boundIntroduce = introduce.bind(user);
boundIntroduce(); // '홍길동' 출력

6. 화살표 함수

상위 스코프의 this를 그대로 사용, 화살표 함수는 자신만의 this를 가지지 않고, 정의된 위치에서의 this를 상속받는다.

const obj = {
  name: '홍길동',
  greet: function() {
    const arrow = () => console.log(this.name);
    arrow();
  }
};

obj.greet(); // '홍길동' 출력

this는 상황에 따라 동적으로 달라지므로, 상황에 맞게 잘 이해하며 사용하는 것이 중요하다.

Math

수학적인 상수와 함수를 위한 프로퍼티와 메서드 제공

생성자 함수가 아니다.

정적 프로퍼티와 정적 메서드만 제공

Math 프로퍼티

Math.PI

Math.PI; // 3.141592653589793

원주율(π) 값을 반환

Math메서드

1. Math.abs

Math.abs(-1); // 1
Math.abs('-2'); // 2
Math.abs([]); // 0
Math.abs(null); // 0
Math.abs(undefined); // NaN
Math.abs('String'); // NaN
Math.abs(); // NaN

인수로 전달된 숫자의 절대값 반환, 반드시 0 또는 양수여야한다.

2. Math.round

Math.round(1.4); // 1
Math.round(1.6); // 2
Math.round(-2.4); // -2
Math.round(-2.6); // -3
Math.round(); // NaN

인수로 전달된 숫자의 소수점 이하를 반올림한 정수를 반환

3. Math.ceil

Math.ceil(1.4); // 2
Math.ceil(1.7); // 2
Math.ceil(-1.4); // -1
Math.ceil(-1.8); // -1
Math.ceil(); // NaN

Math.round와 달리 인수로 전달된 숫자의 소수점 이하를 올림한 정수를 반환

4. Math.floor

Math.floor(1.9); // 1
Math.floor(9.1); // 9
Math.floor(-1.6); // -2
Math.floor(-9.1); // -10
Math.floor(); // NaN

Math.ceil와 반대의 개념 인수로 전달된 숫자의 소수점 이하를 내림한 정수를 반환

5. Math.sqrt

Math.sqrt(9); // 3
Math.sqrt(-9); // NaN
Math.sqrt(4); // 2
Math.sqrt(2); // 1.414213562373095
Math.sqrt(); // NaN

인수로 전달된 숫자의 제곱근을 반환

6. Math.random

Math.random(); // 0 ~ 1미만의 랜덤 실수 

const random = Math.floor((Math.random()*10) + 1);
console.log(random); // 1 ~ 10사이의 정수

임의의 난수를 반환

7. Math.pow

Math.pow(2,8); // 2를 8번 곱한값 256
Math.pow(2,-1); // 0.5
Math.pow(); // NaN

//ES7 지수연산자 ver
2**2**2; // 16
Math.pow(Math.pow(2,2),2); // 16

첫 번째 인수를 밑, 두 번째 인수를 지수로 거듭제곱한 결과 반환

8. Math.max

Math.max(1,2); // 2
Math.max(1,2,5); // 5
Math.max(); // Infinity

// 배열
Math.max.apply(null,[1,2,3]); // 3
// ES6 스프레드 문법
Math.max(...[1,2,4]); //4

전달 받은 인수 중 가장 큰 값 반환

9. Math.min

Math.min(1,2); // 1
Math.min(1,2,5); // 1
Math.min(); // Infinity

// 배열
Math.min.apply(null,[1,2,3]); // 1
// ES6 스프레드 문법
Math.min(...[1,2,4]); //1

전달 받은 인수 중 가장 작은 값 반환

화살표 함수 [ = ( ) => ]

ES6에서 도입된 함수 정의 방식

기존의 함수 표현식보다 간결하고, this 키워드의 동작 방식이 달라지는 것이 특징

문법

// 기본 함수 표현식
const 함수명 = (매개변수1, 매개변수2, ...) => {
  // 함수의 내용
  return 값;
};

• 매개변수가 하나일 때는 괄호를 생략 가능
• 함수 본문이 한 줄일 경우, 중괄호와 return 문도 생략 가능하다.

예시

1. 매개변수가 없는 경우

const sayHello = () => {
  console.log("Hello!");
};

sayHello(); // 출력: Hello!

2. 매개변수가 있는 경우

const greet = (name) => {
  return `Hello, ${name}!`;
};

console.log(greet("Alice")); // 출력: Hello, Alice!

3. 매개변수가 하나인 경우(괄호 생략 가능)

const double = x => x * 2;

console.log(double(5)); // 출력: 10

4. 매개변수가 여러개인 경우

const add = (a, b) => a + b;

console.log(add(3, 7)); // 출력: 10

5. 객체 반환하는 경우

const createPerson = (name, age) => ({ name, age });

console.log(createPerson("Alice", 25)); 
// 출력: { name: "Alice", age: 25 }

화살표 함수는 특히 간결한 표현과 this 바인딩이 중요한 상황에서 유용하게 사용

setInterval

자바스크립트에서 특정 작업을 일정한 시간 간격마다 반복적으로 실행하도록 설정하는 함수

setInterval(function, milliseconds);
// function: 주기적으로 실행할 함수
// milliseconds: 함수가 실행될 시간 간격을 밀리초(1초 = 1000밀리초)로 지정

사용법

setInterval(() => {
  console.log("Hello, World!");
}, 1000); // 1000 밀리초 = 1초

콘솔 결과창에서 1초마다 "Hello, World!" 라는 문구가 출력된다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>setInterval Example</title>
</head>
<body>
  <h1 id="counter">0</h1>
  <script>
    let count = 0;
    setInterval(() => {
      count++;
      document.getElementById("counter").innerText = count;
    }, 1000); // 1초마다 카운터 증가
  </script>
</body>
</html>

콘솔창에서 1초마다 1씩 카운트 되는 것을 볼 수 있다.

하지만 콘솔창을 종료하지 않는 이상 멈추지 않고 계속 진행되는데 

※주의

setInterval을 사용할 때는 종료하지 않으면 무한히 실행되기 때문에 필요할 때 clearInterval을 사용해 멈출 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>setInterval Example</title>
</head>
<body>
  <h1 id="counter">0</h1>
  <script>
    let count = 0;

    // setInterval을 변수에 저장
    let intervalId = setInterval(() => {
      count++;
      document.getElementById("counter").innerText = count;
    }, 1000); // 1초마다 카운터 증가

	// clearInterval 추가
    // 10초 후 clearInterval로 멈춤
    setTimeout(() => {
      clearInterval(intervalId);
      console.log("Counter stopped!");
    }, 10000); // 10,000밀리초 = 10초
  </script>
</body>
</html>

코드를 실행하고 10초 뒤에 카운트 동작을 멈추게 할 수 있다. 

setTimeout

자바스크립트에서 특정 작업을 일정 시간 후에 실행하도록 지연시키는 함수이며, 주어진 시간(밀리초 단위)이 지난 후에 콜백 함수를 실행하게 합니다.

setTimeout(function, delay);
// function: 일정 시간이 지난 후에 실행될 함수
// delay: 함수 실행을 지연할 시간(밀리초 단위). 1초 = 1000밀리초

사용법

setTimeout(() => {
  console.log("5초 후 메시지 출력");
}, 5000);

5초가 지나고 콘솔 결과창에 "5초 후 메시지 출력" 라는 문구가 나온다.

인자 전달하기

function greet(name) {
  console.log(`안녕하세요, ${name}`);
}

setTimeout(greet, 2000, "홍길동");

2초가 지나면 콘솔 결과창에 "안녕하세요, 홍길동" 이라는 문구가 출력

타이머 멈추기

const timeoutId = setTimeout(() => {
  console.log("출력되지 않을 메시지입니다.");
}, 3000);

clearTimeout(timeoutId);

clearTimeout 함수로 timeoutId를 취소하면, 3초 후에 실행될 예정이었던 함수는 실행되지 않는다.

따라서 setTimeOut은 특정 함수를 지연시키거나, 시간에 맞춰 실행시킨다.