728x90 자바스크립트14 (1-2) DOM으로 HTML 조작하기 CREATE - createElement DOM으로 HTML을 조작하는 방법 중 가장 기초적인 새로운 element를 만드는 방법이다. document.createElement('div') [코드] 새로운 div element 를 만든다. [그림] 크롬 개발자도구의 콘솔 탭에서 새로운 div 엘리먼트를 생성해보자. 자바스크립트에서 어떤 작업의 결과를 담으려면 어떻게 해야 할까? 변수를 선언하고 어떤 작업의 결과를 변수에 할당한다. 여기서는 div element를 변수 tweetDiv 에 할당한다. const tweetDiv = document.createElement('div') [코드] 새롭게 생성한 div element를 변수에 할당한다. 아직 화면에 변화가 없는 게 당연하다. tweetDiv 라는 .. 2021. 8. 5. (4-2) JS/Node Spread/Rest 문법 - 구조 분해 (Destructing) 구조 분해 할당이란? Spread 문법을 이용하여 값을 해체한 후 개별 값을 변수에 할당하는 과정을 말한다. 분해 후 새 변수에 할당 배열 const [a, b, ...rest] = [10, 20, 30, 40, 50]; // 질문: a, b, rest는 각각 어떤 값인가요? // 10 // 20 // [30, 40, 50] 객체 const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40} // 질문: a, b, rest는 각각 어떤 값인가요? // 10 // 20 // {c: 30, d: 40} 객체에서 구조 분해 할당을 사용하는 경우 선언(const, let, var)과 함께 사용하지 않으면 에러가 발생할 수 있다. 선언없이 할당하는 경우 이 콘텐츠의 하단있는 공식문.. 2021. 8. 4. (4-1) JS/Node Spread/Rest 문법 - Spread/Rest 문법 Spread 문법: 주로 배열을 풀어서 인자로 전달하거나 배열을 풀어서 각각의 요소로 넣을 때에 사용한다. function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers) // 질문: 어떤 값을 리턴하나요? // 6 Rest 문법: 파라미터를 배열의 형태로 받아서 사용할 수 있다. 파라미터 수가 가변적일 때 유용하다. function sum(...theArgs) { return theArgs.reduce((previous, current) => { return previous + current; }); } sum(1,2,3) // 질문: 어떤 값을 리턴하나요? sum(1,2,3,4) // 질문: 어떤 값을 리턴하나.. 2021. 8. 4. (3-3) JS/Node 스코프,클로저 - 클로저 클로저의 정의 : " 함수와 함수가 선언된 어휘적(lexical) 환경의 조합 " MDN에서의 클로저 정의에 따르면 위와 같다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다." 여기서 주목할 만한 키워드는 "함수가 선언"된 "어휘적(lexical) 환경"이다. 특이하게도 자바스크립트는 함수가 호출되는 환경과 별개로 기존에 선언되어 있던 환경 - 어휘적 환경 - 을 기준으로 변수를 조회하려고 한다. "외부함수의 변수에 접근할 수 있는 내부함수"를 클로저 함수로 부르는 이유도 그렇다. 클로저 함수는 아래와 비슷한 모양을 갖고 있다. 이를 통해 알아볼 수 있는 첫번째 특징은 클로저 함수는 "함수를 리턴하는 함수" 라는 점이다. 함수를 리턴하는 함수가 클로저의 형태를 만든다.. 2021. 8. 4. 이전 1 2 3 4 다음
