Kimsora✨
728x90
반응형
일급객체와 고차함수
Javascript 2022. 9. 20. 22:01

일급객체 란 일급객체(First-class Object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체 다음조건을 만족 시켜야한다 무명의 리터럴로 생성이 가능하다(런타임에 생성가능) 변수나 자료구조(객체.배열)에 저장가능하다 함수의 매개변수에 전달 가능하다 다른 함수의 결과로 리턴 될수있다 =>콜백 패턴 을 사용할 수 있으며 고차함수(High-order function) 를 만들 수있다 Javascript의 클로저(closure) 를 사용해커링(currying) 과 메모이제이션(memoization) 이 가능하다 고차함수(Higher-order function) 고차 함수는 함수를 인자(argument)로 받거나 함수를 리턴하는 함수를 말한다. 이 때 다른 함수의 인자(argument..

article thumbnail
이벤트 객체
Javascript 2022. 9. 14. 15:42

이벤트(event) 는 무언가 일어났다는 신호이며 모든 DOM 노드는 이런 신호를 만들어 낸다 이벤트는 DOM에만 한정되진 않다 이벤트 핸들러 이벤트가 발생했을 때 그 처리를 담당하는 실행 함수이다 이벤트 발생시에 이벤트 핸들러가 호출될 때 이벤트 객체가 전달되는데 이 때 이벤트 핸들러 함수의 매개변수를 통해 이벤트 객체를 받을수 있다 target.onclick = function(){ } function handler(){ } target.onclick=handler(올바른코드) =>handler():함수 실행을 등록하는건 잘못된 코드이다 target.addEventListener ("click", function() { } ) =>addEventListener 현대적인 방법이다 addEventList..

article thumbnail
DOM(Document Object Model):문서 객체모델
Javascript 2022. 9. 14. 13:28

DOM은 웹 페이지 내의 모든 콘텐츠를 객체로 나타내주며,이 객체는 수정 가능하다 document 객체는 페이지의 기본 ‘진입점’ 역할하여. document 객체를 이용해 페이지 내 그 무엇이든 변경할 수 있고, 원하는 것을 만들 수도 있다 DOM은 HTML 문서에 대한 인터페이스 이다 DOM이 사용되는 곳은 뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용됩니다. 또한 페이지의 컨텐츠 및 구조, 그리고 스타일이 JavaScript 프로그램에 의해 수정되기 위해 사용한다=>API를 이용해 DOM에 접근하여 문서 구조, 스타일, 내용 등을 변경 DOM Tree 문서를 node 구조로 tree 형태로 표시=>node: 어떤 연결망에서 특정 지점과 지점을 연결하는데 표시한 것 DOM 구조를 node tree라..

구조 분해 할당
Javascript 2022. 9. 7. 17:35

객체와 배열은 자바스크립트에서 가장 많이 쓰이는 자료 구조이다 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식이다(Spread 문법을 이용하여 값을 해체한 후, 개별 값을 변수에 새로 할당) 할당받을 변수를 왼쪽에, 분해할 대상을 오른쪽에 해서 대입하는 형식으로 작성 // 이름과 성을 요소로 가진 배열 let arr = ["Bora", "Lee"] // 구조 분해 할당을 이용해 // firstName엔 arr[0]을 // surname엔 arr[1]을 할당하였습니다. let [firstName, surname] = arr; alert(firstName); // Bora alert(surname); // Lee function whois({displayName: displa..

article thumbnail
Spread / Rest 문법
Javascript 2022. 9. 7. 16:58

Spread 연산자 특정 배열 혹은 객체 값을 복제하는 문법 객체 혹은 배열을 펼칠 수 있다 ... 을 이용해 표현한다. immutalbe 해서 기존 배열을 변형시키진 않는다(존의 것은 건들이지 않고 새로운 객체를 만들 때 사용) function sum (x,y,z) { return x + y + z; } const numbers = [1,2,3] sum(...numbers); => 6 const a = { one: '1', two: '2', } const b = { ...a, three: '3' } console.log(b); // { one:'1', two:'2', three:'3' } Rest(나머지 매개변수) 연산자 Rest 파라미터(나머지 매개변수) 구문을 구조 분해 할당 문법과 같이 사용하면 ..

클로저 ★
Javascript 2022. 9. 6. 20:52

클로저를 알기전 간략하게 렉시컬이란 무엇인지 알아야 이해 할 수있다 렉시컬 스코프란(Lexical Scope)란? 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정되는 것을 말한다. 즉, 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정한다는 뜻이며, 가장 중요한 점은 함수의 호출이 아니라 함수의 선언에 따라 결정된다는 점이다. 정적 스코프(Static scope)라 부르기도 하다. var x = 'global a' function foo() { var x = 'local a' bar() } function bar() { console.log(a) } foo() // ① bar() // ② 자바스크립트는 렉시컬 스코프를 따른다고 했다. bar() 함수는 전역에서 정의되었기 때문에 전역..

728x90
반응형

검색 태그

WH