✏️ 리액트 전 자바스크립트 복습
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)`으로 사용문자열을 멀티 라인(여러 줄)으로 작성 가능 ⭕${보간법} 사용 가능 ⭕변수, 표현식,
tensdiary.tistory.com
3. nullish & optional chaining
nullish
[JS] nullish 병합 연산자 ??
nullish 병합 연산자 ??: 값이 있는 첫 번째 변수를 찾는다.왼쪽(첫 번째) 피연산자가 null 또는 undefined일 때 오른쪽(두 번째) 피연산자를 반환 null과 undefined만 고려 a ?? ba 값이 있으면⭕(null / undefin
tensdiary.tistory.com
optional chaining
[JS] 옵셔널 체이닝(Optional Chaining) `?.`
옵셔널 체이닝(Optional Chaining) `?.`?. : `?.` 앞의 평가 대상이 undefined /null이면(값이 없으면) 평가를 멈추고 undefined 반환중첩 객체 내에 위치한 속성 값에 안전하게 접근`?.` 앞 평가 대상에만 동
tensdiary.tistory.com
4. 전개 구문(spread syntax)
[JS] 전개 구문(spread syntax)
전개 구문 (spread syntax): 배열이나 객체의 요소들을 개별적으로 펼치는 데 사용 배열, 객체 등을 합칠 때도 사용let first = [1, 2, 3];let second = [4, 5, 6];console.log([...first, ...second]);// [1, 2, 3, 4, 5, 6] 배
tensdiary.tistory.com
5. 구조 분해 할당(destructuring assignment)
[JS] 구조 분해 할당(destructuring assignment)
구조 분해 할당(destructuring assignment)const [element1, element2] = array;const {element1, element2} = obj; : 객체나 배열을 분해해서 개별 변수에 담을 수 있게 하는 문법객체나 배열에 저장된 데이터 전체가 아닌
tensdiary.tistory.com
6. 화살표 함수 Arrow Function)
[JS] 화살표 함수 / this
화살표 함수: 함수는 방향(=>)에 따라 오른쪽의 표현식을 평가하고, 결과를 반환let 함수명 = (매개변수) => 표현식 함수의 본문이 간결하면 {괄호} 사용 Xlet sum = (a, b) => a + b;/* 아래 함수의 축약
tensdiary.tistory.com
7. 기본값 매개변수(Default Parameters) & 나머지 매개변수(Rest Parameters)
[JS] 기본값 매개변수(default parameters) / 나머지 매개변수(rest parameters)
📌 기본값 매개변수(default parameters) function 함수명(변수 = 기본값) { ...} : 함수를 정의할 때 매개변수의 기본 값을 설정해 놓는 기능 함수 호출 시 인수를 제공하지
tensdiary.tistory.com
8. Promise & Async - Await
Promise
[JS] Promise: 비동기 작업을 처리하는 객체
목차PromisePromise 메서드then()catch()finally()Promise.allPromise.racePromise 체이닝📌 Promise : 비동기 작업을 처리하고 결과를 관리하는 데 사용되는 객체let promise = new Promise(function(resolve, reject) {
tensdiary.tistory.com
Async - Await
[JS] async / await : 비동기 함수 정의, promise 반환
async: 비동기 함수를 정의, Promise를 반환 async function 함수명() { return 결과 값;} function 앞에 async를 붙이면 해당 함수는 항상 프라미스 객체(Promise object)를 반환- 내부에서 비동기 작업을 수행
tensdiary.tistory.com
9. Class syntax
[JS] Class(클래스)
Class : 객체를 생성하기 위한 템플릿 객체 = 붕어빵, 클래스 = 붕어빵 기계클래스(class)를 사용하면 객체 지향 프로그래밍에서 사용되는 다양한 기능을 자바스크립트에서도 사용할 수 있다.인스
tensdiary.tistory.com
10. ECMAScript Modules
[JS] ECMAScript Modules: 자바스크립트 모듈화
📌 ECMAScript Modules (ESM): JavaScript에서 모듈화를 지원하는 공식 표준모듈 정의 및 가져오기export: 모듈에서 내보내고자 하는 코드를 정의import: 다른 모듈에서 정의된 것들을 가져와 사용정적 분석ES
tensdiary.tistory.com
11. 배열 메서드
[JS] 배열(array) 메서드
목차배열 검사배열로 변환배열 복사배열 요소 추가배열 요소 제거배열 탐색배열 변형 배열 요소 순회 📌 배열 검사 Array.isArray() : 값이 배열(array)인지 확인 배열과 arguments(유사 배열 객체)
tensdiary.tistory.com
12. 객체 메서드
[JS] 객체(Object) 메서드
Object.keys(): 객체의 키(key)를 모아서 하나의 배열로 반환// 유사 배열const arrayLike = { 0: 'body', 1: 'head', 3: 'div', length: 3}const keys = Object.keys(arrayLike);for (let key of keys) { console.log(key);}// 출력 결과// 0// 1//
tensdiary.tistory.com