1. 배열

비원시 데이터의 한 종류

배열 만들기

생성자를 사용하는 방법.

let arr = new Array();

배열 리터럴을 사용하는 방법.

let arr2 = [];

배열 내장 함수

forEach, 전달받은 요소의 수만큼 수행.

map()

• 배열의 각 요소를 순회하며, 주어진 콜백 함수를 호출하여 반환된 값을 새로운 배열로 만드는 자바스크립트 배열 메소드.

• 기존 배열은 변경되지 않고, 항상 새로운 배열을 반환한다.

문법

array.map(callback(currentValue, index, array), thisArg)

callback: 배열의 각 요소에 대해 호출될 함수.
currentValue: 배열의 현재 요소.
index (선택): 현재 요소의 인덱스.
array (선택): map()을 호출한 배열 자체.
thisArg (선택): callback 함수 내부에서 this로 사용할 값.

동작 과정

• 배열의 각 요소에 대해 콜백 함수를 호출.
• 콜백 함수가 반환한 값을 새로운 배열의 요소로 추가.
• 모든 요소를 처리한 후 새로운 배열 반환.

예제

const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16, 25]

// Index와 배열 활용
const numbers = [10, 20, 30];
const result = numbers.map((num, index) => `${index}: ${num}`);
console.log(result); // ["0: 10", "1: 20", "2: 30"]

// 객체 배열 변환
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];
const usernames = users.map(user => user.name);
console.log(usernames); // ["Alice", "Bob"]

// 데이터 가공
const rawData = [
  { id: 1, age: 25 },
  { id: 2, age: 30 },
];
const formattedData = rawData.map(item => ({ ...item, isAdult: item.age >= 18 }));
console.log(formattedData);
// [
//   { id: 1, age: 25, isAdult: true },
//   { id: 2, age: 30, isAdult: true }
// ]

React.js와 결합

• React.js에서 map() 함수는 UI 컴포넌트를 반복적으로 생성하는 데 매우 유용하게 사용된다.

• 배열 데이터를 기반으로 컴포넌트를 동적으로 렌더링할 때에 핵심적인 역할을 수행한다.

const products = [
  { id: 1, name: 'Laptop', price: 1500 },
  { id: 2, name: 'Phone', price: 800 },
  { id: 3, name: 'Tablet', price: 600 },
];

function Product({ name, price }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>Price: ${price}</p>
    </div>
  );
}

function ProductList() {
  return (
    <div>
      {products.map(product => (
        <Product key={product.id} name={product.name} price={product.price} />
      ))}
    </div>
  );
}

export default ProductList;

배열의 특정 값을 확인하는 함수 includes

index를 반환하는 함수 indexOf. 배열에 없으면 -1을, 있으면 index를 반환한다.

배열을 알맞게 잘라주는 slice.

배열을 알맞게 붙여주는 concat.

배열을 정렬해주는 sort. 결과값을 저장할 새로운 배열을 만들지 않고, 기존 배열의 데이터를 직접 수정한다.

모든 요소를 하나의 문자열로 합쳐주는 join.

2. 조건문과 반복문

조건문

주어진 조건에 따라서 지정된 행동을 수행하게 해주는 조건문.

결과값을 Boolean으로 낼 수 있는 상황에서 사용이 가능하다.

if, else if, else, switch이 있다.

반복문

주어진 조건에 따라서 반복 수행하게 해주는 반복문.

for, while이 있다.

for와 while의 차이점

반복 횟수가 예측 가능할 때는 for문을 사용하는 것이 좋다.

반복 횟수를 예측할 수 없으면 while문을 사용하는 것이 좋다.

3. 동기와 비동기

동기 : 순차적으로 실행.

코드의 작성 순서대로 작업을 처리한다. 하나에 스레드에서 하나의 작업을 실행하는 동안 뒤의 작업은 실행되지 않고 기다린다. -> 블로킹 방식.

비동기 : 비순차적으로 실행.

앞의 작업에 필요한 시간이 많다 -> 전체적인 흐름이 느려진다. 이는 동기 방식의 단점으로 작용한다.

이를 해결하는 방식 중 하나가 멀티쓰레드이지만 자바스크립트에서는 오직 싱글쓰레드만 지원한다.

그렇기에 자바스크립트에서 나온 해결방식은 싱글쓰레드를 이용하여 다수의 작업을 동시에 개시하도록 하는 것.

논 블로킹 방식

앞 코드의 작업이 끝나지 않더라도 뒤 코드의 작업을 동시에 가동시키는 것.

XMLHttpRequest

서버와 상호작용하기 위해 사용하는 자바스크립트 내장 생성자.

Ajax

Asynchronous Javascript And Xml의 준말.

브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로고침 하지않고 페이지의 일부만을 위한 데이터를 가져오는 기법이다.

기존에는 XMLHttpRequest API를 통해 통신을 주고 받았지만 이 것이 엄청나게 번거로운 작업이었다.

불편함을 개선하기 위해 JQuery를 통해 구현하기 시작하다가 이후 fetch API가 ES6 표준으로 등장하면서 fetch API를 통해 통신하는 것이 주요 방식으로 자리를 잡았다.

서버에서 정보를 가져올 때 리액트처럼 페이지 전체를 새로 고침 하지 않아도 받아올 수 있다.

Promise 객체

자바스크립트에서 제공하는, 비동기를 간편하게 처리할 수 있도록 도와주는 객체이다. 정해진 기능을 수행하고 나서 결과에 따라 성공이나 실패에 대한 정보를 리턴한다.

fetch API는 ES6의 Promise와 함께 AJAX를 쉽게 사용할 수 있는데, fetch가 반환값으로 가지는 것이 Promise일만큼 Promise는 네트워크 통신과 밀접한 연관이 있다.

async & await

promise를 더 쉽게 사용할 수 있게 도와주는 요소.

async 키워드를 사용하면 Promise 객체를 이용하여 알아서 비동기 작업을 진행하도록 해준다.

async function hiAsync () {

    await 키워드를 사용하면 키워드가 사용된 코드의 작업이 완료되기 전까지 뒤의 코드의 실행을 하지 않게된다.

    await delay(3000);

};

0. 참고자료

윈터루드, 자바스크립트 기초 강의. (인프런)

유노코딩, 입문자를 위한 자바스크립트 기초 강의. (인프런)