본문 바로가기
  • 성장일기

공부/JavaScript6

유용한 JS 고차함수 유용한 JavaScript 배열 메소드 중 고차 함수 forEach, map find, filter reduce sort some, every forEach, map forEach 배열 내의 모든 요소에 주어진 callback 함수를 각각에 대하여 실행합니다. arr.forEach(callback(currentvalue,index,array)) const arr = ['a','b','c']; arr.forEach((element,index)=> console.log(element,index)); // "a" 0 // "b" 1 // "c" 2 map 배열 내의 요소에 주어진 callback 함수를 각각에 대하여 실행한 결과를 모아 새로운 배열을 리턴합니다. fo.. 2021. 7. 7.
DOM 조작 CRUD CREATE : createElement READ : querySelector, querySelectorAll UPDATE : textContent, id, classList, setAttribute DELETE : remove, removeChild append, prepend, appendChild CREATE 새로운 Element를 생성하는 방법으로, 아래 코드를 입력하면 새로운 div element를 만들게 됩니다. document.createElement('div') // element 생성 const newDiv = document.createElement('div') // element 생성후 변수에 할당 앞으로 이렇게 생성한 div element를 조작.. 2021. 7. 5.
클로저 함수 클로저 함수 함수를 리턴하는 함수로써, 외부 함수와 내부 함수로 구분할 때 내부 함수를 클로저 함수라 합니다. 클로저는 리턴하는 함수에 의해 Scope가 구분되며, 클로저의 핵심은 Scope를 이용해서 접근 범위를 닫아 캡슐화 하는데 있습니다. 선언하는 방법 화살표 함수 const add = a => b =>{ return a+b; } 일반적인 함수 const add = function(a){ //외부 함수 return function(b){ return a+b; } //내부 함수 } 두 함수는 똑같은 역할을 하는 클로저 함수입니다. 외부 함수에서는 내부 함수의 변수 b에 접근할 수 없지만, 내부 함수에서는 외부 함수의 변수 a에 접근할 수 있습니다. 클로저 함수를 사용하는 이유 일반적인 함수는 함수 실.. 2021. 7. 1.
객체(Object) 객체(Object) 객체는 데이터와 함수의 집합입니다. 이런 객체가 왜 필요하냐면, 하나의 공통된 묶음으로 여러 데이터를 저장하기 위함입니다. 비교 일반적인 변수로 선언할 경우의 예시입니다. const personName = "Park"; const personAge = 27; const personAddr = "Incheon"; 다음은 배열에서의 예시입니다. const person = ["Park",27,"Incheon"]; const person2 = ["Hyun",22,"Incheon"]; 이제 객체에서의 예시를 보겠습니다. 객체는 key:value의 형태로 선언합니다. const person = { name:"Park", age:27, addr:"Incheon", }; 배열이 더 쓰기 좋은게 아닌.. 2021. 6. 29.
배열(Array) 배열(Array) 변수의 종류중 하나로, 배열에는 다양한 값을 저장할 수 있다. 배열의 특징 const animals = ["rabbit","turtle","giraffe"]; [] 안에 값을 넣어 선언을 할 수 있으며, console.log(animals[0]); animals[0] [] 안에 인덱스를 넣어 해당 부분에 접근할 수 있다. // rabbit 배열은 참조 값을 저장하기 때문에 다음과 같이 얕은 복사로 할당할 경우에 animals2의 값을 바꾸면 animals의 값도 바뀌는 문제가 생길 수 있다. const animals2 = animals; animals2[0] = "cat"; console.log(animals); // ["cat", "turtle", "giraffe"] console.l.. 2021. 6. 28.
알면 좋은 자바스크립트 최신 문법 알면 좋은 자바스크립트 최신 문법 Shorthand property Object에서 속성과 값이 같을 때 생략이 가능하다 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer Optional Chaining Object?. 로 사용하며 객체 내 참조가 null일 경우 에러가 발생하는 대신 undefined으로 리턴을 한다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining Spread Syntax iterable 문자열, 배열의 요소를 펼쳐주는 문법이다. 배열이나 객체를 복사할 수 있.. 2021. 6. 17.

티스토리툴바