Front-End/JavaScript

ES6 - 제너레이터란? 제너레이터의 사용법

제너레이터(Generator)란? 함수의 실행을 중간에 멈추고 재개할 수 있는 기능 실행을 멈췄을때, 값을 전달할 수 있다. 때문에 반복문에서 제너레이터가 전달하는 값을 하나씩 꺼내서 사용가능 제너레이터 함수의 사용방법 제너레이터 함수를 만들때는 function* 키워드를 사용 한다. 제너레이터가 처음 만들어지면 함수의 흐름은 멈춰 있는 상태 next() 가 호출되면 다음 yield 가 있는 곳까지 호출하고 다시 함수가 멈춘다. 제너레이터 함수의 호출이 완료되면, done: true 가 같이 리턴된다. 일반적인 방법 순차적으로 값을 전달하는 예시 function* testGenerator() { //function* 키워드를 사용 console.log('제너레이터') yield 1; console.log..

[JavaScript] 배열 생성, 배열 메서드, for in, for of, forEach

배열 array(for in, for of, forEach), 구조분해 할당 배열 생성 literal로 배열생성 Array객체를 이용하여 배열생성 let a=[10,20,30]; // literal로 생성 let b=new Array(40,50,60); // Array객체로 생성 console.log(a[0]); console.log(b[0]); #배열요소 호출 const a=[10,20,30] document.write(a[2]) //30 배열의 크기 Array.length 를 사용 var a=[10,20,30]; console.log(a.length); // 3이 출력 let a=[10,20,30,40,50]; let size=a.length; for(let b=0; b

[JavaScript] 화살표 함수

화살표 함수 💡 화살표 함수란? function키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언 모든 경우 화살표 함수를 사용할 수 있는 것은 아니다. // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다. (x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다. // 함수 몸체 지정 방법 x => { return x * x } // single line block x => x * x // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다. () => { return { a: 1 }; } (..

[JavaScript]구조분해할당(destructuring assignment), 전개연산자, toObject(배열을 객체로 전환)

구조분해할당(destructuring assignment), 전개연산자, toObject(배열을 객체로 전환) 💡 구조 분해 할당이란? 객체나 배열의 요소를 변수로 분해 할 수 있게 해주는 문법 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우 사용하기 좋다. 배열 분해 하기 let [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 배열[10,20]이 분해 되어 각각 a와 b에 할당됨 let array = [1, 2, 3]; let [a, b, c] = array; console.log(a, b, c); // 1 2 3 array의 [1, 2, 3]을 선언후, 배열 [a, b, c]에 각각 할당함 만약 배열의 첫 번째 요소를 가져와..