JavaScript 문법 정리 (기초)

1) Number("123") // output : 123;

 

2)String(123) // output :"123"; 

2-1) 숫자타입.toString()

 

3)getDate() : '일' 을 출력합니다.

let a = new Date(2016.05.01)

let b = a.getDate() // output: 1

let c = new Date(2016.month.0)

console.log(c.getDate()) // output : 2016년도 month 의 '일'수 

 

4) 변수명.includes('문자') : 변수에 문자를 포함하면 true를 반환합니다.

 

5) 배열이름.push('값') :배열에 값을 추가합니다.

 

6) 배열.join(' ') :배열의 값을 하나의 문자열로 합칩니다.

 

7) 문자열변수.substring(5, 10) : 5번인덱스부터 10번 인덱스까지만 출력합니다.  

 

 

7) 변수.slice(length, num) : length번째 부터 num 번째까지만 값으로 출력합니다. (배열이 아닐때)

 

8) 변수.substr(num): 변수를 num번째 까지 삭제하고 나머지를 값으로 출력합니다. (배열이 아닐때) 

 

9) 변수.toLowerCase() : 변수 값의 대문자를 모두 소문자로 변환합니다.

9-1) 변수.toUpperCase() : 변수 값의 소문자를 모두 대문자로 변환합니다.

 

10) 배열.indexOf('값') : 변수 안에 '값'의 존재 유무 확인 (있으면 index 순서를, 없으면 -1 출력)

 

11) Math.abs(num) : num의 절대값 반환

 

12) 문자열.split("") : 문자열을 하나씩 쪼개서 배열로 넣어줍니다. 

ex) "a234" --->> ['a', '2', '3', 4'']

 

13. 배열.filter( (el) => { return 조건식  }  ) : 전체 배열에서 조건식에 해당하는 요소만 다시 배열합니다.  

 

14. const arr = new Array(숫자) : arr에 숫자 만큼의 요소를 할당받을 수 있는 배열을 만들어줍니다. (아직 빈배열 : [<숫자> empty items> ] )

 

15. 배열.fill(요소) : 요소를 배열의 숫자만큼 가득 채워줍니다.

 

16. 배열.reduce( (acc(누적값입니다.), cur(현재값입니다.), i ) =>{  }, 초기값 ) :

배열.reduce ( (acc, cur)) => {}, 초기값)  

 

17.  배열.forEach( )

 

18. 배열.sort() : 배열을 내림차순으로 정렬합니다.

그냥 사용하면 1,2,3 순으로 정렬되어 1,19, 2, 30 식으로 나옴

내림차순 : 배열.sort((a,b) => a-b);

오름차순 : 배열.sort((a,b) => b-a);

19. 배열.reverse() : 배열의 순서를 뒤집습니다.

 

20. new Set() : 배열 역할을 해주는 객체 : 배열에서 중복되는 데이터를 자동으로 제거해줍니다.

 

21. Array.isArray( [ ] )

 

22. Array.from() : 배열로 변경하겠다.

 

23. Math.min(...[2,3,4]) // 2

 

24. arr1.concat(arr2) // [arr1, arr2]

25. arr.spice( n, m, x, y ) :

x와 y는 필수값이 아닙니다.

n의 index부터 m만큼 삭제합니다. 삭제한자리에 x,y,z,a,d,b,d, 등을 추가할 수 있습니다.

 

 

To Do 리스트

 

<script src="" defer>

 

1) <input onkeydown="함수()"> : input에 값을 넣어줄때마다 함수가 실행됩니다.

2) (window.event.keyCode === 13)

console.log(event) : 무엇이 실행되고있는지 확인 가능합니다.

KeyCode : 특정 버튼 및 동작

 

3) const 변수명 : document.createElement('태그') : 함수가 실행될 경우 새로운 태그가 생성됩니다.

4) 변수1.appendChild(변수2) : 변수 1에 변수 2를 자식태그로 추가합니다.

5) 변수명.addEventListener(' 원하는 행동 ex)click, dblclick ' , 익명 함수(화살표 함수)  ) : 원하는 행동이 실행될때 익명함수가 실행됩니다.

6) 변수명.classList.toggle(클래스명) : 변수에 새로운 클래스명을 지정합니다. (toggle : 버튼이 누르면 실행, 다시 누르면 종료)

7) 변수명.remove() : 변수를 삭제합니다. (addEventListenter의 익명함수에 들어갈 수 있습니다)

8) document.querySelectorAll('태그') : 태그의 모든 것을 가져옵니다. (li 입력시 모든 li를 배열 형태로가져옴)

9) 변수명.children[i].classList.contains('complete') : 변수안에 i번째 children이 complete라는 이름의 클래스가 존재하는지  확인(불린값으로 결과반환)

10) 스코프 (scope) : 변수 참조의 유효 범위

-전역 스코프 

-지역 스코프 (함수 레벨 스코프 / 블록 레벨 스코프)

11) JSON.stringify(변수명) :  객체와 배열자체를 문자열로 변환합니다.  

      JSON.parse(변수명) : 문자열로 변환된 데이터를 원본형태로 다시 변환합니다.

12) localstorage.변수명('key 이름 ', 문자열타입의 변수) : 문자열 타입의 변수를 localstorage에 저장합니다.

13) 호이스팅(hoisting) :  인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미 

호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것이라고 함