JavaScript - 기초 복습

2021년 7월 18일 글

 

HTML 첨부

<script src="index.js"></script>

비동기적 첨부법,
differ : 병렬적으로 JS 다운로드 후 HTML 완료되면 실행
async : 병렬적으로 JS 다운 및 실행

배열 다루기

• new Array(n) : n만큼의 길이를 갖는 배열 생성
• Array.length : 길이
• Array.slice(시작인덱스, 끝인덱스+1) : 배열 슬라이싱 (기존 배열은 유지됨)
• Array.splice(시작인덱스, 끝인덱스+1) : 배열 자르기 (기존 배열이 수정됨)
• Array.join('A') : A를 기준으로 문자열로 합침
• Array.toString : 문자열로 변환
• Array.findIndex(찾을 문자) : 찾을 문자의 인덱스를 반환
• Array.shift() : 배열의 맨 첫 번째 값을 pop
• Array.unshift(값) : 배열의 맨 앞에 값을 push
• Array.fill(값) : 배열 모든 요소를 값으로 대체
• Array.reverse() : 배열을 뒤집음
• Array.includes(값) : 배열이 값을 갖는지 판단
• Array.sort() : 배열을 문자열로 보고 정렬 (자세한 건 밑에 서술)

• Array.forEach(func) : 배열의 각 요소마다 함수를 호출
• Array.map(func) : 배열 각 요소마다 함수 실행 후 결과를 새로운 배열에 담아 반환
• Array.filter(func) : 배열 각 요소마다 함수 실행 후 결과가 true인 것만 새로운 배열에 담아 반환
• Array.every(func) : 배열 각 요소마다 함수 실행 후 결과가 모두 true인 경우에만 true 반환
• Array.some(func) : 배열 각 요소마다 함수 실행 후 결과가 어느 하나라도 true인 경우 true 반환
• Array.reduce(func) : 배열의 1,2번째 인수 전달 후 함수 실행한 다음 그 결과값과 3번째 인수 함수 실행... 배열의 끝까지 위와 같이 실행 후 결과값 반환
• Array.reduceRight(func) : 위와 같으나 오른쪽 맨 마지막 인덱스부터 반대로 실행
• Array.entries() : 배열의 각 인덱스를 key로 갖는 Object를 만들어 반환

문자열 다루기

• String.length : 문자열 길이
• String.indexOf('abc') : 'abc'의 인덱스 시작값 리턴
• String.slice(시작 인덱스, 끝 인덱스+1) : 시작인덱스부터 끝 인덱스까지 슬라이싱
• String.toLowerCase() : 소문자로 변환
• String.toUpperCase() : 대문자로 변환
• String.replace(바꿀, 바꾸는) : 문자를 부분적으로 바꿈
• String.split('나눌 기준') : 나눌 기준을 기준으로 배열을 만듬

해시

"기본적으로 자바스크립트의 객체는 해시와 유사하게 쓸 수 있으나, 조회나 갱신 삭제 등이 잦은 경우 Map을 이용하는 것이 성능적으로 좋다."

const map = new Map();

• map.set(key, value) : 키에 값 넣기
• map.get(key) : 키에 해당하는 값 가져오기
• map.size : 크기
• map.has('a') : 'a'가 map에 있는지 판단

Set

const mySet = new Set();

• mySet.add(값) : 값 넣기
• mySet.has(값) : 값 가지고 있는지 판단
• mySet.size : 크기
• mySet.delete(값) : 값을 set에서 지우기

배열 정렬하기

숫자 정렬하기

Array.sort((a,b)=> (a-b)) // 오름차순 정렬 (작은 값이 앞으로 옴)
           (b-a) // 내림차순 정렬 ( 큰 값이 앞으로 옴)

sort 응용

Array.sort((a,b) => {
    if (a.genre !== b.genre) return cntMap.get(b.genre) - cntMap.get(a.genre)
        // 장르가 다를 경우 cntMap의 값에 따라 내림차순 정렬

        if (a.count !== b.count) return b.count - a.count
        // count 값이 다를 경우 값에 따라 내림차순 정렬

        return a.index-b.index});     // 위의 모든 조건이 같은 경우 인덱스 오름차순 정렬

코딩테스트시 장단점(파이썬에 비해)

"개인적으로 느낀 장단점이므로 참고만 해주세요."

장점

• 객체를 이용한 정렬 알고리즘
• reduce, map, forEach, filter 등의 함수의 편리함

단점

• itertools 라이브러리에 있는 순열, 조합 함수가 없다.. (직접 구현해야 된다)
• 우선순위큐를 쓸 때 힙(heap)을 직접 구현해야된다..
• collections.defaultdict를 쓰지 못한다..ㅠ

변수 선언

const : 고정
let : 가변 (재할당 가능)

var : old함

'Use Strict'

맨 위에 선언해주면 개발하면서 만나는 상식적인 오류를 검출해준다.

setTimeout vs setInterval

setTimeout(function, time) : 일정 시간 후 함수가 1번 호출된다
setInterval(function, time) : 일정 시간 후 함수가 반복적으로 호출된다

입력 후 창 새로고침 방지

event.preventDefault();

ex) canvas에서 마우스 우클릭 방지

canvas.addEventListner("contextmenu",handleCM);
function handleCM (event) {
    event.preventDefault();
}