본문 바로가기

JavaScript9

자바스크립트 주요 용어와 기본 개념, 호이스팅이란? 변수 하나의 값을 저장하기 위해 확보한 메모리 공간 자체, 메모리 공간을 식별하기 위해서 붙인 이름 선언 시 var, let, const 키워드를 사용한다. (var는 es6 이전 키워드) var variable, 변할수 있는 값 var 단점 함수 레벨 스코프를 지원한다. 블록 레벨 스코프를 지원하지 않는다. -> 의도치 않게 전역 변수가 선언 되어 사이드 이펙트가 발생하게 된다. 상수 const constant, 한번 정해지면 변하지 않는, 단한번만 할당할 수 있는 변수 값을 재할당 할수 없어서 변수에 저장된 값을 변경할 수 없는 값 할당 변수에 값을 대입 저장 하는 일 참조 변수에 저장된 값을 읽어들이는 일 식별자 어떤 값을 구별해서 식별할 수 있는 고유한 이름 값이 아닌 메모리 주소를 기억하고 있다.. 2021. 1. 7.
javascript ES version up to 2020, ES11 ECMAScript version ES1 ~ ES11 에크마스크립트 버전별 특징 자바스크립트 표준, 초판은 1997년에 출시되었다. ECMAScript는 언어의 공식 이름으로 ES1, ES2, ES3, ES5 및 ES6으로 축약되었다. version Year Feature ES1 ECMAScript 1 (1997) First edition ES2 ECMAScript 2 (1998) Editorial changes ES3 ECMAScript 3 (1999) regular expressions try/catch ES4 ECMAScript 4 Never released ES5 ECMAScript 5 (2009) "strict mode" JSON support String.trim() Array.isArray(.. 2021. 1. 7.
ES6 주요 문법 활용하기 export & import //file: fibonacci.js //since these variables are not exported //they are private to the module. Code //in other modules can't reference them let fib1 = 0; let fib2 = 1; /** * next() returns the next number in the Fibonacci sequence. * @returns {number} */ export function next() { let current = fib1; fib1 = fib2; fib2 = current + fib1; return current; } /** * reset() resets the Fi.. 2020. 10. 1.
리액트 함수형 컴포넌트 리팩토링하기 state 컴포넌트내 상태관리 클래스형 컴포넌트 this.state = { isVisible: true, users: [], }; 함수형 컴포넌트 useState 훅 사용하기 const [isVisible, setIsVisible] = useState(true); const [users, setUsers] = useState([]); useCallback const toggleVisibility = () => { setIsVisible(!isVisible); } 이 메서드는 요소를 다시 렌더링 할 때마다 다시 생성되는 문제가 있다. useCallback 으로 감싸서 함수를 재사용, 캐싱할 수있다. const toggleVisibility = useCallback( () => setIsVisible(!is.. 2020. 9. 30.
javascript 연산자 Javascript Operator 자바스크립트 연산자 주요 기본식과 좌변식 의미 기본식 자바스크립트 일반식 및 기본 키워드 this 실행 문맥의 특별한 속성 function 함수 정의 class 클래스 정의 function 생성기 generator 함수 식 정의 yield 생성기 함수 일시정지 및 재개 yield* 다른 생성기 함수 또는 순회가능 객체로 위임 async function 비동기 함수 표현식 정의 await 비동기 함수를 일시 중지했다가 다시 시작하고 promise의 resolution/rejection을 ​​기다림 [] 배열 초기자 및 리터럴 구문 {} 객체 초기자 및 리터럴 구문 /ab+c/i 정규식 리터럴 구문 ( ) 그룹 연산자. 좌변식 좌변값은 할당 대상을 의미 Property a.. 2020. 9. 29.
Promise 프로미스 사용하기 Promise 프로미스는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체, 콜백을 첨부하는 방식의 객체이다. 프로미스 장점 콜백은 자바스크립트 Event Loop이 현재 실행중인 콜 스택을 완료하기 이전에는 절대 호출되지 않는다. 비동기 작업이 성공하거나 실패한 뒤에 then() 을 이용하여 추가한 콜백의 경우에도 위와 같다. then() 을 여러번 사용하여 여러개의 콜백을 추가 할 수 있으며 각각의 콜백은 주어진 순서대로 하나 하나 실행되게 된다. chaining Promise.then() then() 메서드는 Promise를 리턴하고 두 개의 콜백 함수를 인수로 받는다. 하나는 Promise가 이행했을 때, 다른 하나는 거부했을 때를 위한 콜백 함수이다. const promise1 = new Pr.. 2020. 9. 23.
JS Module 모듈 import, export export 모듈 내보내기 Named Export 모듈 밖으로 내보내려는 항목 앞에 export 를 붙인다. 각 항목(function, const 등)은 export 할 때 이름으로 참조되었으며, import 할 때에 이 이름을 참조하여 사용한다. export const name = 'square'; export function draw(ctx, length, x, y, color) { ctx.fillStyle = color; ctx.fillRect(x, y, length, length); return { length: length, x: x, y: y, color: color }; } 여러 항목 내보내기 export { name, draw, reportArea, repo.. 2020. 9. 23.
Javascript Some, Every How to properly use Javascript Some 자바스크립트 Some, Every 사용하기 Some some() 메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트한다. js Some example const array = [1, 2, 3, 4, 5] // checks whether an element is even const even = element => element % 2 === 0 console.log(array.some(even)) // expected output: true 배열의 요소 테스트, 하나라도 10보다 큰지 판별 function isBiggerThan10(element, index, array) { return element > 10 } ;[2,.. 2020. 9. 21.
JS Map, Filter, Reduce How to properly use Javascript Map, Filter, and Reduce 자바스크립트 고차함수 map, filter, reduce 사용하기 Sample Player list Array const players = [ { id: 10, name: "Jan Vertonghen", status: "Goal keeper", totalMatch: 400, retired: true, }, { id: 2, name: "Paulo Wanchope", status: "Attacker", totalMatch: 200, retired: false, }, { id: 41, name: "Ronny Johnsen", status: "Goal keeper", totalMatch: 300, retired: .. 2020. 9. 21.

티스토리툴바