나디아 성장 일기

구조 분해 할당(destructuring assignment)const [element1, element2] = array; const {element1, element2} = obj; : 객체나 배열을 분해해서 개별 변수에 담을 수 있게 하는 문법객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우 사용 원본 보호⭕ 📌 배열 기존 문법 let arr = ["Bora", "Lee"]; let firstName = arr[0]; let surname = arr[1]; alert(firstName); // Bora alert(surname); // Lee 구조 분해 할당let arr = ["Bora", "Lee"] // 구조 분해 할당 let [firstName, surname] = arr; aler..

옵셔널 체이닝(Optional Chaining) `?.`?. : `?.` 앞의 평가 대상이 undefined /null이면(값이 없으면) 평가를 멈추고 undefined 반환중첩 객체 내에 위치한 속성 값에 안전하게 접근`?.` 앞 평가 대상에만 동작⭕, 확장❌`?.` 앞의 변수는 꼭 선언되어 있어야 한다.  * 변수?.proplet user = null;alert( user?.address ); // undefinedalert( user?.address.street ); // undefined// user?. => user가 null이나 undefined인 경우만 처리// user가 실제 값이 존재하는 경우엔 반드시 user.address 프로퍼티는 있어야 함// 그렇지 않으면 user?.address..

템플릿 리터럴(Template literal): 자바스크립트에서 문자열을 입력하는 문자열 리터럴 `백틱(back-tick)`으로 사용문자열을 멀티 라인(여러 줄)으로 작성 가능 ⭕${보간법} 사용 가능 ⭕변수, 표현식, 연산 등을 문자열 안에 삽입할 수 있다.  * 데이터 + 템플릿 리터럴을 이용한 마크업 String// 데이터 객체const koreanFoods = { caption: "한식 메뉴", rows: [ { headline: "뚝배기 불고기", content: 8000 }, { headline: "스팸치즈볶음밥", content: 7500 }, { headline: "불고기낙지덮밥", content: 9000 }, ],};// 마크업 렌더링 함수function rende..

블록 스코프(Block Scope): 변수의 유효 범위를 블록 단위로 제한{중괄호}로 감싸서 사용{ statement_1; statement_2; ⋮ statement_n;}  var지역 및 전역 변수를 선언하는데 모두 사용블록 스코프(Block Scope) ❌ 블록을 고려하지 않고 현재 함수 또는 전역 스코프 어디에서나 접근할 수 있는 변수를 선언한다.var 변수는 호이스팅(hoisting) 되어 변수 선언이 코드의 최상단으로 끌어올려진다.function example() { if (true) { var x = 1; } console.log(x); // 1}example();======================var x = 1;{ var x = 2;}console.log(x); ..

✏️ 리액트 전 자바스크립트 복습   1. 변수 스코프 [JS] 블록 스코프(Block Scope) / 실행 컨텍스트(Execution Context)블록 스코프(Block Scope): 변수의 유효 범위를 블록 단위로 제한{중괄호}로 감싸서 사용{ statement_1; statement_2; ⋮ statement_n;}  var지역 및 전역 변수를 선언하는데 모두 사용블록 스코프(Block Scope) ❌tensdiary.tistory.com   2. 템플릿 리터럴(Template literal) [JS] 템플릿 리터럴(Template literal)템플릿 리터럴(Template literal): 자바스크립트에서 문자열을 입력하는 문자열 리터럴 `백틱(back-tick)`으로 사용문자열을 멀티 라인(..

at( index ): 배열(Array)의 해당 index의 요소 반환문자열(String)에도 사용 가능⭕양수, 음수 사용양수(+): 배열의 앞에서부터 카운트음수(-): 배열의 끝에서부터 카운트const cart = ["사과", "바나나", "배"];// 배열의 마지막 요소 반환 함수function returnLast(arr) { return arr.at(-1);}const item1 = returnLast(cart);console.log(item1); // '배'// 배열에 요소 추가cart.push("오렌지");const item2 = returnLast(cart);console.log(item2); // '오렌지' ex 1. 병합에도 사용 const numberList = [2, -2, 1]; ..

ECMAScript: ECMA-262 기술 규격에 따라 정의하고 있는 표준화 된 스크립트 언어Ecma 인터내셔널에 의해 제정된 ECMA-262 기술 규격에 의해 정의   ⏩ Ecma 인터내셔널(Ecma International): 정보와 통신 시스템을 위한 국제적 표준화 기구  1961년 유럽에서 컴퓨터 시스템을 표준화하기 위해 설립  ⏩ TC39(Technical Committee 39): ECMAScript의 표준화를 담당하는 ECMA International의 기술 위원회    ⏩ ECMA-262 기술 규격 : ECMAScript 표준의 공식 문서ECMA International의 기술 위원회인 TC39에서 개발하고 관리함  ⏩ ES6 (=== ES2015)ECMA-262 표준의 제 6판     E..

Quokka: 자바스크립트 코드 결과를 바로 확인할 수 있는 VS Code 확장 플러그인 코드의 동작을 실시간으로 볼 수 있어서 매우 유용 디버깅에 좋음 Quokka - JavaScript and TypeScript playground in your editorQuokka runs your JavaScript and TypeScript code and displays results inline in VS Code, WebStorm, and Sublime Text.quokkajs.com   설치vs code 마켓 플레이스에서 설치 Quokka.js - Visual Studio MarketplaceExtension for Visual Studio Code - JavaScript and TypeScript..