Javascript

📖 데이터 타입 📌 원시 타입 | - | | 종류 | | String | | Number | | Boolean | | Null | | Undefined | | BigInt | 📌 객체 타입

📖 연산자 수리연산자 | 종류 | . | | - | - | | 사칙연산자 | +, -, *, / | | 증감연산자 | ++, -- | | 제곱연산자 | ** | | 계수연산자 | % | 1. 사칙연산자 2. 증감연산자

기본 사용구조if 단독 사용if / elseif / else if/ else엄격동등연산 수행기본 사용구조조건 ? true(t) : false(f) // 조건이 참이면 t, 거짓이면 f 리턴

forwhiledo whilefor infor offoreach어떤 특정한 조것이 거짓으로 판별될 때까지 반복하는 작업기본 사용 구조for문과 동일하게 반복 작업을 하지만 기본 구조는 차이점이 있다.증감 연산자를 사용하지 않을 경우 무한 반복에 빠지게 된다.기본 사용구

변수는 데이터를 저장할 때 쓰이는 이름이 붙은 저장소고정된 타입이 없으며 같은 변수에 여러 타입의 값을 자유롭게 할당할 수 있다.변수는 var, let, const 키워드를 사용하여 선언하며 할당 연산자 =를 사용하여 값을 할당한다.변수명을 사용해 변수에 저장된 값을

📖 함수

📖 배열 한개 이상의 값을 가지는 데이터 타입 배열 요소에는 여러 가지 자료형이 섞일 수 있다. 배열 선언 let arr = new Array(); let arr = []; 요소 추가 각 배열 요소는 0부터 시작하는 인덱스가 배정되어 있으며, 각 인덱스는 배열

객체는 key와 value로 구성된 프로퍼티(Property)들의 집합이다.객체는 중괄호를 이용해 데이터를 저장할 수 있다.중괄호 안에는 key : value 형식으로 구성된 프로퍼티가 존재한다.key는 문자형, values는 모든 자료형이 허용된다.각각의 프로퍼티는

문자열 인자를 파싱하여 특정 진수의 정수를 반환 (문자열 -> 정수)사용 구조 : ParseInt(string)위 예시는 ParseInt() 원칙대로 최초 문자열로 선언된 변수를 정수형으로 변환한 코드이다.파라미터의 숫자에 소수점이 존재할 경우 소수값을 버리는 역할 수

📖 에러 처리 에러 > 코드 내에서 에러가 발생하면 스크립트는 즉시 중단되며 콘솔에 에러가 출력된다. try...catch 문법을 통해 스크립트 중단을 방지할 수 있으며 에러를 잡아 합당한 작업을 할 수 있다. try...catch 문법 try, block 두

특정 아이디, 클래스, 태그를 가진 요소의 값을 얻어올 때 사용getElementById()'aaa'라는 id값을 id라는 변수에 담아 'aaa'의 글자 크기, 색상 등 해당 id를 갖고있는 요소의 속성을 변경할 수 있다.2) getElementsByClassName(

이벤트리스너 html을 사용하다 보면 버튼 클릭에 대한 이벤트를 처리해야 할 일이 자주 발생한다. button 태그에 onClick을 사용해도 되지만 코드 가독성 및 편리함을 추구하고자 addEventListner라는 메소드를 알아보고자 한다. addEventLi

페이지 내의 스크롤 조작 시 scroll 이벤트가 발생한다.전체 페이지에 scroll 이벤트리스너 사용 시 스크롤 할때마다 특정 기능을 실행할 수 있다.scroll 이벤트에는 document가 아닌 window를 사용한다.document.documentElement.s

이벤트리스너의 target 속성은 이벤트가 발생한 요소를 반환해준다.event.target 속성을 사용해 다양한 이벤트를 구현할 수 있다.btn이라는 요소를 클릭할ㄷ 때 이벤트가 발생하며, 클릭한 요소를 콘솔창에 반환한다.위 예제는 좌측 상단의 버튼을 클릭 시 숨겨져있

📖 정규식 > - 문자열에서 특정 문자 조합을 찾기 위한 패턴 로그인, 회원가입 과정에서 유효성 체크를 필요로 할때 주로 사용 ex) 아이디, 비밀번호, 전화번호... 사용법 >

사용자가 키를 누르거나 놓을 때 발생한다.DOM 상에서 창(window)이나 문서(document), 또는 특정 요소(element)에서 발생한다.키를 놓을 때는 keyup, 키를 누를 때는 keydown 타입의 이벤트가 발생한다.아래 코드는 키보드 이벤트를 구분하기

마우스로 특정 element 접근 시 발생하는 이벤트마우스로 특정 요소 클릭 시 발생마우스를 element 바깥에서 안으로 옮겼을 때 발생마우스를 element 안에서 바깥으로 옮겼을 때 발생element를 우클릭 시 발생preventDefault()를 활용해 우클릭

웹 브라우저의 창을 나타내는 객체자바스크립트의 객체, 함수, 변수는 모두 window 객체의 프로퍼티window 객체의 프로퍼티는 전역 변수, 메소드는 전역 함수가 된다.브라우저나 스크립트의 로드가 완료되었을 때 발생브라우저를 스크롤할 때 발생스크롤 발생 시 마다 브라

📖 Window와 Document > Window는 브라우저 창 전체를 의미하며 document는 브라우저 창의 html을 의미한다. document객체는 window 객체의 하위 요소라고 생각하면 된다. 이미지로 차이점 이해하기 이미지 참고 window, do

브라우저 내에 key-value 형식으로 데이터 저장하기 위해 사용한다.사용함에 따라 페이지를 브라우저를 다시 열거나 새로고침 후에도 데이터가 유지된다.localSotrag에 저장된 데이터는 url별로 구분된다.Storage 타입은 문자열 데이터만 저장하기에 객체를 저

운영체제의 파일 관리 애플리케이션으로부터 파일을 드래그해 화면에 드롭하는 기능 제공drag 이벤트가 지정된 요소를 드래그할 때마다 이벤트가 발생한다.draggend 이벤트는 드래그가 끝났을 때, 즉 마우스를 놓았을 때 이벤트가 발생한다.dragenter 이벤트는 드래그

📖 innerHTML, innerText, textContent 차이점 innerHTML > - Element의 속성으로 해당 Element의 HTML, XML을 읽어오거나, 설정할 수 있다. innerHTML을 사용할 경우 태그 및 스타일을 별도로 지정할 수 있

createElement() 메서드는 지정한 파라미터의 HTML 요소를 생성해 반환한다.기본 문법 : document.createElement(사용할 태그명)작성한 태그가 신규 생성된 것을 확인할 수 있다.힌 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으

for...of 명령문은 반복 가능한 객체를 순회할 수 있도록 해주는 반복문이다.보통 배열을 반복하기 위해 사용된다.변수의 이름은 key,num... 등 사용자 임의대로 설정하면 된다.선언한 변수에 배열의 각 요소들에 반복마다 할당되는 방식이다.배열의 각 요소가 순서대

배열 내 각각의 요소에 대해 콜백함수 실행으로 인해 리턴된 값을 원소로 하는 새로운 배열을 생성한다.매개변수로는 콜백함수, 콜백함수를 실행했을 때 this로 실행되는 값인 thisArg가 있다.콜백함수의 매개변수는 아래와 같다. currentValue : 현재 요소

📖 array.filter() > - 배열 내 각각의 요소에 대해 콜백함수 실행으로 인해 리턴된 값을 원소로 하는 새로운 배열을 생성한다. map() 메서드와 다르게 기존 배열과 길이가 동일할 필요가 없다. 콜백함수가 리턴한 값이 참일 때만 새로운 배열에 담음 새로

배열의 각 요소에 대해 지정한 함수를 실행 후 결과값을 반환한다.map(), filter() 메서드처럼 새로운 배열을 생성하는 것이 아닌 하나의 결과값만을 반환한다.reduce() 메서드는 누산기라는 개념으로 이해하면 편할 것 같다.매개변수로는 가 있다.배열명.redu

배열의 기존 요소를 삭제, 교체하거나 새 요소를 추가해 배열의 내용을 변경하는 메서드이다.배열명.splice(startIndex, deleteCount, addElement);startIndex : 배열의 변경을 시작할 인덱스, 뒤부터 삭제하려면 -를 사용하면 된다.d

📖 string.replace(), replaceAll() > 문자열 내의 특정 문자를 변경하기 위해 사용한다. replace()는 변경하고자 하는 문자가 여러개일 경우 최초로 발견된 문자만 변경된다. replcaeAll()는 변경하고자 하는 문자와 일치하는 항목을

문자열의 시작 인덱스부터 종료 인덱스 전 문자열까지 반환매개변수로는 startIndex, endIndex가 있다.endIndex의 문자열은 최종 반환될 문자열에 포함되지 않는다.string.substring(startIndex, endIndex);endIndex가 생략

모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. es6버전에 등장한 let, const는 블록 스코프 밖에서 접근할 수 없다.위 코드를 실

주어진 객체의 키 값을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환매개변수로는 키값을 제공할 객체명이 있다.객체의 속성값을 필요로 한다면 Object.values()를 사용하면 된다.Object.keys(객체명) or Object.values(

📖 구조분해할당 > - 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 간단하게 말해보자면 구조분해할당을 통해 객체나 배열의 일부분만 분해하여 사용할 수 있다. 배열 구조분해할당 참고 구조분해할당

asd

Math.pow()는 \*\*처럼 제곱된 값을 반환한다.Math.sqrt()는 숫자의 제곱근을 반환한다.Math.pow(base, exponent);매개변수로는 base, exponent가 있다.base는 밑 값이며, exponent는 밑 값을 제곱하기 위한 지수이다.

문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열 반환한다.매개변수로는 count가 있다.count는 문자열을 반복할 횟수로 0과 양의 무한대 사이의 정수 사용 가능하다.string.repeat(count)참고string.repeat()

string 객체를 지정한 구분자를 이용해 여러 개의 문자열로 분할한다.string.split();매개변수로는 seperator, limit가 올 수 있다.seperator는 문자열을 끊어야할 부분을 나나태는 문자열을 나타낸다.seperator를 입력하지 않으면 문자열

아스키 코드는 0~127 범위의 숫자를 사용해 문자를 표현한다.소문자는 97부터 시작하며, 대문자는 65부터 시작한다.아스키 코드표지정한 문자열의 유니코드를 반환한다.charCodeAt()과 다르게 유니코드 값을 문자열로 반환한다.charCodeAt()fromCharC

key-value 형태의 값을 가지는 객체이다.키는 고유한 값이어야 하며, 값은 변경할 수 있다.새로운 Map 객체가 생성된다.Map객체 생성 시 초기값을 지정할 수 있다.set() 함수를 사용해 Map 객체에 데이터 추가 및 수정이 가능하다.동일 key값의 value

문자열이 정규식과 매치되는 부분을 검색한다.매개변수로는 정규식 개체가 올 수 있다.String.match(정규식 문법);위 코드는 문자열을 순회하며 현재 순회중인 문자열이 정규식 조건에 부합할 때 해당 요소를 출력하는 예제이다.match 이외에도 정규식 메서드는 다양하

문자열이 정규 표현식을 만족하는지 판별해 그 여부를 true 또는 false로 반환매개변수로는 판별할 문자열을 넣을 수 있다.정규식.test(문자열)문자열의 대소문자 존재 여부에 따라 boolean 값 반환출처regexp.test()

특정 배열의 시작 위치부터 종료 위치에 대해 특정 요소들을 복사해 새로운 배열 객체로 반환매개변수로는 추출 시작점을 알리는 startIndex, 추출을 종료할 endIndex가 있다.추출 범위는 startIndex ~ endIndex - 1 범위의 요소가 추출된다.ar

배열의 모든 요소를 연결해 하나의 문자열로 반환매개변수로는 배열의 각 요소를 구분할 문자열을 지정할 수 있다.매개변수를 생략할 경우 배열 요소는 쉼표로 구분된다.매개변수가 빈 문자열일 경우 각 요소 사이에 아무 문자 없이 연결된다.array.join(seperator)

객체의 키값을 반복문과 동일한 순서로 순회되는 열겨할 수 있는 배열로 반환매개변수로 키값을 얻기 위한 객체를 사용하면 된다.객체의 value값을 배열로 반환한다.매개변수로는 동일하게 객체를 사용하면 된다.참고object key-value 접근하기

객체의 키값의 갯수만큼 순회하며 키 값을 반환한다.객체 순회에서 얻을 수 있는 키값 및 객체 접근 방법중 하나인 dot notiation을 사용해 객체의 key-value값을 모두 확인할 수 있다.참고객체 순회방법 - for in

배열에 특정 요소가 포함되어 있는지를 판단해 boolean 타입으로 반환매개변수로는 찾을 요소, 검색 시작위치를 지정할 fromIndex가 있다.참고array.includes()

배열의 순서를 반전시키는 메서드로 호출한 배열도 변형된다.원본 배열을 빈 배열 안에 전개해 reverse() 메서드를 사용해주면 원본 배열은 그대로 유지된 채 반전된 새로운 배열이 생성된다.참고array.revers()

객체의 속성을 확인하기 위한 연산자로 객체에 특정 프로퍼티의 존재 여부를 boolean형으로 반환한다.기본 구조기본 구조는 객체와 동일하다.다만 문자열 프로퍼티를 속성으로 사용하면 존재 여부를 알 수 없다.배열에서 in 연산자를 사용할 때는 프로퍼티 문자열이 아닌 인덱

객체 내의 키에 접근할 때 참조값이 유효한지 판단할 수 있는 연산자연산자 ?. 앞의 평가대상이 null, undefined일 경우 평가를 멈추고 undefined 반환아래 코드를 보면 info 객체의 extra 내부에는 location이라는 속성이 존재하지 않아 에러가

코딩테스트 대비 문제풀이에서 가장 많이 사용하고 있는 메서드 중 하나인데 작동원리에 대해 모른다는 생각이 들어 개념을 잡고자 글을 쓰게 되었다. 📋 sort > 배열의 요소를 적절한 위치에 정렬한 후 해당 배열을 반환한다. 배열 요소를 문자열로 만든 뒤 유니코드