Javascript 공부

 

💡 JavaScript를 공부하며 중요하다 생각되는 부분만 정리하는 노트입니다.

let과 var (보통 let 사용)

• var은 중복 선언 가능 하지만 let은 중복 선언 불가
• const도 중복 선언 불가(read-only)

템플릿 리터럴?

let name = 'yeachan';
let name2 = `name is ${name}` //-< 이거 유용함 기억

비교 연산자 ==과 ===

• ==은 값만 ===은 자료형까지 비

함수 표현식과 함수 선언식의 차이

• 함수 선언식은 호이스팅을 통해 최상단으로 올려져 실행된다.
• 함수 표현식은 화살표 함수로도 표현 가

// 함수 표현식
let helloA = function(){
    return "집가고싶다..";
} 
// 위 함수 표현식을 화살표 함수로 사
let helloA = () => {
    return "집가고싶다..";
} 

// 함수 선언식 (최상단으로 실)
function helloB(){
    return "집 정말 가고싶습니다..";
} 

객체/ 점 표기법 괄호 표기법/삭제

// 함수 표현식
let person = {
    name : "yeachan",
    age : 25
};

person.location = "제주도"; // 점 표기법
person["gender"] = "남좌"; // 괄호 표기법

delet person.name; // 삭제는 아니고 링크를 끊어주는 것
person.name = null; // 이게 진짜 삭제에 가깝다.

• 괄호 표기법에서 괄호 안에는 변수 혹은 문자열(키값)을 입력 해주어야 함. !

유용한 배열 내장함수

const arr = [1, 2, 3, 4];
// forEach = 배열 안의 모든 요소를 한 번씩 호출
arr.forEach((el) => {
  console.log(el);
}); 

// map = 값들을 배열로 반환
const newarr = arr.map((el) => {
  return el * 2;
});

• forEach - 배열의 각 요소들을 호출
• map - 리턴값들을 모아 배열 생성
• includes() - 요소가 있는지 판단
• indexof() - 요소의 인덱스 추출
• findIndex() - 콜백함수가 true를 반환하는 첫번째 요소의 인덱스 리턴
• find() - 콜백함수가 true를 반환하는 첫번째 요소 자체를 리턴
• filter() - 콜백 함수를 만족하는 요소들을 배열로 리턴
• slice(begin, end) - 배열을 begin부터 end-1까지만 리
• concat(붙일 배열) - 배열 붙이고 리턴
• sort() - 원본 배열을 사전 순으로 정렬함(문자열 기준임)
• sort((a,b)=>a-b) - 숫자 정렬하는 방법 외우면 좋을 듯
• join(”구분자”) - 배열을 하나의 문자열로 합쳐서 리

삼항 연산자

조건문 ? 참일경우 : 거짓일경우

• 삼항 연산자를 중첩으로 사용하면 가독성 개똥 가급적 사용 x

단락회로 평가

• &&연산자와 ||연산자를 이용하면 코드를 더 빠르게 동작하게 할 수 있음
• 예) 거짓 && 참 인 경우에는 앞에 거짓인 것만 확인하고 뒤는 접근도 안하 false를 반환한다.
• 예2) 참 || 거짓 인 경우에는 앞에 참인 것만 확인하고 바로 참 반환

비 구조 할당(스왑, 객체)

let a = 1;
let b = 2;
[a,b] = [b,a]; //스왑!

let object = { one: "one", two: "two", three: "three", name: "예찬" };

let { name: myName, one: oneOne, two, three } = object;

Spread 연산자 …뭐시기

const cookie = {
  base : "cookie",
  madeIn : "kr"
};

const chochochipCookie={
  ...cookie, //cookie 객체를 채워
  toping:"chocochip"
}

동기 비동기

자바스크립트는 싱글 스레드

동기: 먼저 작성된 코드가 끝나고 다음 거 실행

문제점: 하나의 작업이 너무 오래 걸릴 시 전반적인 흐름이 느려

비동기: 그냥 여러 작업을 동시 실행

async → 비동기 함수로 만들겠다

await → async 내에서만 사용 가능/ 비동기를 동기처럼 만들어줌

Promise 기본형

function taskA(a, b) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a + b;
      resolve(res);
    }, 1000);
  });
}

taskA(5, 1).then((a_res) => {
  console.log(a_res);
});

• resolve → then
• reject → catch

API호출 기본형

async function getData() {
  let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts");
  let jsonResponse = await rawResponse.json();
  console.log(jsonResponse);
}

GET, POST 요청 예시

const [data, setData] = useState([]);
  // const dataId = useRef(0);

  const getData = async () => {
    const res = await fetch("http://127.0.0.1:8000/posts/").then((res) =>
      res.json()
    );

    const initData = res.slice(0, 20).map((it) => {
      return {
        author: it.writer,
        content: it.content,
        emotion: it.view_count,
        id: it.id,
      };
    });

    setData(initData);
  };

const onCreate = (author, content, emotion) => {
    fetch("http://localhost:8000/posts/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        writer: author,
        content: content,
        view_count: emotion,
      }),
    }).then((response) => response.json());