JavaScript

기본적인 산술연산자 (+ = \* / % ) 를 이용하여 산술 계산을 할 수 있다.기호 = 을 활용하여 변수에 값을 할당한다.기호 ===을 활용하여 변수에 값을 비교한다.&&은 and, ||는 or 와 같다. &&은 false가 하나라도 있으면 false, ||는 tr

if (조건) {실행} else if (조건) {실행} else {실행}for (시작조건; 종료조건; 변화조건) { }

변수 유효범위(Variavle Scope) > var / let / const var와 let의 재할당이 가능하지만 const는 불가능하다. var 의 경우 함수 레벨에서 작동, let과 const는 블럭레벨 안에서 작동. var 가 다른 변수보다 더 넓은 유효범위를

숫자 -> 문자불린 -> 문자문자 -> 숫자불린 -> 숫자문자 -> 불린숫자 -> 불린boolean 값으로 참이 나오는 데이터 타입을 Truthy, 거짓이 나오는 데이터 타입을 Falthy 라고 한다.Truthy(참 같은 값) : true, {}, \[], 1, 2,

다른 언어의 경우 데이터 타입이 다르면 연산이 불가능하지만 자바스크립트는 자동 형변환으로 서로 다른 데이터 타입을 일치시켜 연산한다.===,!== 는 일치, 불일치==,!= 는 동등, 부등이라고 한다.일치비교는 형변환이 일어나지 않지만 동등 비교는 형변환이 일어난다.

function

객체 heropy, amy, neo 모두 로직과 메소드 모두 동일한 상황에서 객체 데이터를 각각 지정해주는 것은 메모리 측면에서 매우 비효율 적이다. 이를 프로토타입을 통해 해결할 수 있다.User 라는 함수를 선언하면 User.prototype이라는 Object가 자

indexOf() 메서드는 호출한 String 객체에서 주어진 값과 일치하는 첫번째 인덱스를 반환합니다. 일치하는 값이 없으면 -1을 반환합니다. .length는 문자열의 길이를 반환한다.slice() 메소드는 문자열의 일부를 추출하면서 새로운 문자열을 반환한다.rep

id로 태그 선택하기class 로 태그 선택하기 유사배열의 특징1\. 숫자 형태의 indexing이 가능하다.2\. length 프로퍼티가 있다.3\. 배열의 기본 메소드를 사용할 수 없다.4\. Array.isArray(유사배열)은 false다.주의! 유사 배열은 다

웹브라우저는 객체로 이루어져있다. window 객체 안에 document 라는 객체도 있고 console이라는 객체도 있다. window 객체는 브라우저의 창을 대변하면서 자바스크립트 최상단에 존재하는 객체이기도 하다. 여기서 최상단이란 window 객체가 javasc

.previousElementSibling.nextElementSibling.parentElement.childrenindex.firstElementChild.lastElementChildinnerHTML은 요소안의 값을 확인할 때보단 수정할 때 더 많이 사용한다. i

특히 outerHTML의 경우 프로퍼티를 수정할 때마다 새로운 요소가 되기 때문에 그 이후에 그 요소를 다시 다루려면 querySelector로 계속 찾아줘야 된다는 번거로움이 있다.요소 노드 추가하기위 메소드들은 요소노드를 추가할 뿐만 아니라 그냥 문자열을 넣어도 텍

웹 브라우저가 html 을 해석할 때 dom 객체가 만들어지는데 이 과정에서 대부분의 속성들은 가지고 있는 이름 그대로 요소 노드의 프로퍼티가 된다.그러나 모든 html 속성이 요소 노드의 프로퍼티로 생성되지는 않는다. 이 경우 일반적인 방법으로는 해당 속성에 접근할

querySelector로 태그를 선택할 때 css 선택자를 활용해서 태그를 선택하는 데에 활용할 수 있다.비표준 속성은 객체 형태의 데이터가 있을 때, 각 프로퍼티 값들이 들어갈 태그를 구분하는데 활용할 수 있다.getAttribute 메소드를 활용해서 속성값을 가져

왼쪽값이 truthy인 경우 오른쪽 값이 리턴왼쪽값이 falsy인 경우 왼쪽값이 리턴 왼쪽값이 truthy인 경우 왼쪽 값이 리턴왼쪽값이 falsy인 경우 오른쪽값이 리턴 And와 Or 연사자가 혼재할시 And 연산자의 우선순위가 더 높다.

여러 개의 값을 묶어놓은 배열이나 객체와 같은 값은 바로 앞에 마침표 세 개를 붙여서 펼칠 수 있다.spread 구문의 모양은 앞서 배운 rest parameter의 모습과 흡사하다. 하지만 rest parameter는 여러개의 아규먼트를 하나의 파라미터에 묶는 방식이

1\. 변수에 할당된 값을 이용해서 프로퍼티 만들기이때 활용하는 변수의 이름과 프로퍼티의 이름이 같다면 하나만 작성하는 표현이 가능해진다.2\. 함수 프로퍼티 표기법프로퍼티 네임과 값으로 사용할 변수나 함수의 이름이 같다면 중복해서 작성하지 않고 하나만 작성할 수 있다

배열이나 객체의 구조를 분해하는 문법, 인덱스로 여러 값의 순서가 있는 배열과 프로퍼티 네임으로 여러값의 이름이 붙는 배열이 차이가 있기 때문에 구조분해 할당도 다르게 적용된다.구조분해에 할당되는 값이(위의 예시에선 rank) 배열의 형태가 아니면 오류가 발생하기 때문

자바스크리트는 에러가 나면 자동으로 에러에 대한 정보를 담은 에러객체를 생성한다. 에러 객체는 공통적으로 에러의 이름이 담긴 name 프로퍼티와 에러에 대한 자세한 정보를 담은 message 라는 프로퍼티로 존재한다. 우리가 자주 보게 되는 에러 객체는 존재하지 않는

forEach 문은 아규먼트로 콜백함수를 작성하게 되면 이 콜백 함수의 첫번째 파라미터로 배열의 요소를순서대로 전달하면서 매번 콜백 함수를 실행하는 원리로 동작한다. 따라서 이 콜백함수에는 파라미터 하나가반드시 작성되어야 한다. 콜백함수의 파라미터는 for of 문의

새로운 이벤트 핸드러를 추가할 시 기존 이벤트가 무시되고 새로운 이벤트만 덮어씌워져 작동한다. 이로인해 의도하지 않게 중요한 이벤트가 작동하지 않을 수 있고 여러개 이벤트를 동시에 실행할 수 없다.이러한 문제를 해결하기 위해 여러개의 이벤트 핸들러를 배치하는 방식을 사

참조형 데이터의 경우 원시형 데이터와 달리 참조형 데이터가 할당된 변수를 다른 변수에 그대로 할당하면 데이터 값이 아닌 주소가 복사된다. 이로 인해 한 변수의 데이터를 변경하면 의도치 않게 다른 변수의 데이터도 변경되는 오류가 발생할 수 있다. 위의 문제점을 방지하기

자바스크립트에서 함수나 클래스를 내보내는 방식에는 크게 두가지가 있다. 첫째는 named export, 둘째는 default export 이다.named로 export할 때에는 반드시 이름이 필요하다. named export된 데이터를 불러오기 위해서는 {} 와 exp

'객체' 간의 상호작용을 중심으로 하는 프로그래밍을 의미한다. 여기서 '객체'에는 객체의 상태를 나타내는 '변수'와 객체의 행동을 나타내는 '함수'가 들어있다. 객체안의 변수는 property라고 하고 객체안의 함수는 method라고 한다. 이에 따라 객체 지향 프로그

추상은 여러가지 사물이나 개념에서 공통되는 특성이나 속성 따위를 추출하여 파악하는 작용을 의미한다. 이에 따라 추상화란 구체적인 정보에서 목적에 맞는 꼭 필요한 핵심만 추출하는 것을 추상화라고 한다. 개발에서는 단순히 클래스를 설계하는 것 뿐만 아니라 코딩하는 모든 과

1. setTimeout() > setTimeout 함수는 특정함수의 실행을 원하는 시간만큼 뒤로 미루기 위해 사용하는 함수입니다.

fetch(url)가져오다라는 뜻으로 파라미터로 넘어오는 url로 서버에 request를 보내서 원하는 내용을 가져오고 response를 받는 역할을 수행한다.then 메소드는 앞에서 리턴한 값을 response로 받아 처리한다.서버가 보낸 response는 하나의 객

리턴된 프로미스의 객체가 rejected 상태일 때 해당 에러를 핸들링 할 수 있는 방법은 다음과 같다.catch 메소드를 중간에 작성하면 그 이후 발생한 에러는 핸들링 할 수 없게 된다. 따라서 catch 메소드는 아래와 같이 주로 마지막에 작성된다.그러나 때에 따라

생성자 키워드 new와 Promise 를 함께 쓰면 프로미스 객체를 직접 만들 수 있다. 프로미스 객체 안에 위치하는 콜백함수는 resolve와 reject라는 두개의 파라미터를 가진다. resolve 와 reject는 프로미스 객체 생성시 자동으로 연결되는 메소드로

여러개의 Promise 객체를 동시에 다뤄야할 때 유용하게 사용할 수 있는 메소드 들이 있다.all 메소드는 인자로 들어온 배열안 모든 Promise 객체가 pending 상태에서 fulfileed 상태가 될때까지 기다린다. 모든 promise 객체들이 fuilled

프로미스 객체를 다루는 더 간편한 방법으로 async와 await가 있다. async await은 then 메소드나 콜백을 사용하지 않고도 비동기 실행 코드를 작성할 수 있으며 마치 동기 실행 코드처럼 코드를 훨씬 더 간단하고 편하게 작성할 수 있다.async awai