본문 바로가기

자바스크립트20

자바스크립트, 구조 분해 할당 Destructuring Assignment 구조 분해 할당 Destructuring Assignment 구조 분해 할당이란 배열 또는 객체의 구조를 분해하여, 그 (분해된 속성) 값을 개별 변수에 담는 표현식을 의미한다. 배열 구조 분해 const arr = [1, 2, 3, 4, 5]; const one = arr[0] const two = arr[1] const three = arr[2] console.log(one, two, three); // 1, 2, 3 우리가 잘 아는 방법은 arr[0]과 같이 인덱스로 접근해 그 값을 사용하는 것이다. 배열 내부의 값을 새로운 변수에 할당하고자 하면 위에 코드블록처럼 할당할 수 있다. const arr = [1, 2, 3, 4, 5]; const [one, two, three] = arr; conso.. 2022. 1. 19.
자바스크립트 ES6 템플릿 리터럴 템플릿 리터럴(Template literals) 템플릿 리터럴(Template literals)는 내장된 표현식을 허용하는 문자열 리터럴이다. 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공한다. 템플릿 리터럴은 런타임 시점에 일반 자바스크립트 문자열로 처리/변환된다. 프론트엔드에서는 HTML을 데이터와 결합해서 DOM을 다시 그려야 하는 일이 빈번해 템플릿을 조금 더 쉽게 편집하고 작성해야 할 필요가 있어서, 이러한 기능이 추가되었다. 표현식 삽입법(Expression interpolation) let a = 20; let b = 10; let c = "자바스크립트" let str = "저는" + ( a+ b ) + "살이고" + c + "를 좋아합니다."; .. 2022. 1. 18.
자바스크립트 Try / Catch 자바스크립트에는 try / catch 라는 문법이 존재한다. 에러가 발생 가능성이 있는 코드는 try로 감싸고 에러가 발생했을 때 catch를 이용하여 예외처리를 한다. 이를 사용하면 에러가 발생하더라도 코드에 영향을 주지 않고 조용히 처리할 수 있다. try { //에러 가능성이 있는 코드 } catch { //에러가 발생했을 때 동작 코드 } import { useMutation, gql } from "@apollo/client"; import { useState } from "react"; import { useRouter } from "next/router"; const CREATE_PRODUCT = gql` mutation createProduct( $seller: String $createPr.. 2022. 1. 17.
자바스크립트, 호이스팅(Hoisting) 호이스팅(Hoisting) 호이스팅은 코드에 선언된 변수 및 함수를 유효한 범위의 코드 상단으로 끌어 올리는 작업이다. var의 변수/함수의 선언만 위로 올려지고, 할당은 올려지지 않는다. let/const 변수 선언과 함수 표현식에서는 호이스팅이 발생하지 않는 것처럼 보인다. console.log(name) // 결과 undefined var name = "john" console.log(name) // 결과 john 위의 코드블록의 흐름을 보면 아래처럼 흘러간다. 그래서 두번째 줄의 console.log(name)에서 undefined가 나온다. var name console.log(name) name = "john" console.log(name) //error console.log(name) le.. 2022. 1. 15.

티스토리툴바