Study/JavaScript

[JavaScript_study] DOM & EVENT 노드 생성, 추가, 복제, 삭제

1 2 3 * 글 중간에 append를 하고싶을경우 : Node.insertBefore(넣을값, 위치) * Node를 복제 : Node.cloneNode() // Node만 복사된다. > Node.cloneNode(true) // deep copy : Node안에 있는 text까지 전부 복사된다. * Node를 삭제 : Node.removeChild(지울값)

[JavaScript_study] DOM & EVENT 부모,자식,형제 노드

* DOM (Document Object Model) : 문서 객체 모델 Node.nodeType docs https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType const pList = document.querySelectorAll('p'); // NodeList가 출력된다. // 값이 저장된다. (예외도 있음) const pList = document.getElementsBytagName('p'); // HTMLCollection이 출력된다. // 실시간으로 값을 추가하면 값이 변환된다. * 부모 Node에 접근 const red = doucument.getElementById('red'); red.parentNode; // 부모 Node를 반..

[JavaScript_study] Generator

* Generator : 함수의 실행을 중간에 멈췄다가 재개할 수 있는 기능 ex) Redux Saga > * 을 사용해서 만든다. > 내부에 yield를 사용한다. > yield에서 함수의 실행을 멈출수있다. > next(), return(), throw() 메소드를 가진다. * Generator > iterable (반복이 가능한) - Symbol.iterator 메서드가 있다. - Symbol.iterator는 iterator를 반환해야한다. - for ... of 를 통해서 순회 가능하다. > iterator (반복자) - next 메서드를 가진다. - next 메서드는 value와 done속성을 가진 객체를 반환한다. - 작업이 끝나면 done는 true가 된다. function* fn() { ..

[JavaScript_study] 클로저 (Closure)

* Closure > 함수와 렉시컬 환경의 조합 > 함수가 생성될 당시의 외부 변수를 기억 > 생성 이후에도 계속 접근 가능 function makeAdder(x) { return function(y) { return x + y; } } // 익명함수는 y를 가지고 있고 상위함수인 makeAdder의 x에 접근 가능 const add3 = makeAdder(3); console.log(add3(2)); // 5 // add3의 함수가 생성된 이후에도 상위함수인 makeAdder의 x에 접근 가능 const add10 = makeAdder(10); console.log(add10(5)); // 15 console.log(add3(1)); // 4 // add10과 add3은 서로 다른 환경을 가지고 있다...

[JavaScript_study] Rest parameters, Spread syntax

* arguments > 함수로 넘어 온 모든 인수에 접근 > 함수내에서 이용 가능한 지역 변수 > length / index > Array 형태의 객체 > 배열의 내장 메서드 없음 (forEach, map) function showName(name) { console.log(arguments.length); console.log(arguments[0]); console.log(arguments[1]); } showName("Mike", "Tom"); // 2 // "Mike" // "Tom" * 나머지 매개변수(Rest parameters) function showName(...names) { console.log(names); } showName(); // [] showName("Mike"); // ..

[JavaScript_study] 구조 분해 할당 (Destructuring assignment)

* Destructuring assignment > 구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 // 배열 구조 분해 let [x, y] = [1, 2]; console.log(x); // 1 console.log(y); // 2 let users = ["Mike", "Tom", "Jane"]; let [user1, user2, user3] = users; // 위의 코드는 아래와 같다. // let user1 = users[0] // let user2 = users[1] // let user3 = users[2] console.log(user1) // "Mike" console.log(user2) // "Tom" console.log(user3) /..