JavaScript

수도코드(pseudocode)란?프로그래밍 언어로 코드를 작성하기 전에, 무엇을 어떤 과정을 통해 만들지 사람의 언어로 먼저 작성하는 것.먼저 수도코드로 코딩의 방향성을 작성해본다.수도코드를 토대로 실제 코드를 작성한다.수도코드를 작성하지 않고 코드를 작성하다보면, 중

자바스크립트에는 다양한 타입이 존재한다.number, string, boolean, list, object, undefined, function..만약, 내가 선언한 변수의 타입을 알고싶다면 어떻게 해야될까?typeof변수의 타입을 확인하고 싶을 때는 typeof 연산

변수를 선언하는데는 3가지 방법이 있다.var, let, constvar는 변수를 다시 선언할 수 있다.var의 경우, 소규모프로젝트나 연습문제를 풀이할 경우에는 상관없지만, 규모가 큰 프로젝트를 할 경우, 변수가 언제, 어디서 사용되었는지 바뀌었는지 파악하기 어렵다는

먼저 함수와 관련된 용어부터 정리해보자.각 요소들의 명칭은 다음과 같다.직사각형의 넓이를 구하는 함수로 예시를 들어보자.함수 이름이 명시되어 있어야 한다.함수 이름으로 함수를 호출한다.참고로, 결과값을 변수에 저장하지 않고, 바로 리턴하는 것이 더 컴팩트한 코드이다.함

변하지 않은 변수일반적인 변수는 재할당을 통하여 값을 변경할 수 있지만, 상수로 사용하는 변수는 값의 재할당을 할 수 없다.(원시값이 아닌 객체가 할당될 경우 변경 가능하다.)장점 : 상태유지, 가독성, 유지보수의 편의성 등변하지 않는 값데이터 자체를 의미한다.변수

어떤 값이 의도적으로 비어있다.null은 원시값 중 하나 즉, 리터럴값이다.해당 변수가 어떤 객체도 가리키고 있지 않다는 것을 의미한다.값을 할당하지 않은 변수메서드와 선언에서 변수가 할당받지 않은 경우함수가 값을 return 하지 않았을 때undefined는 원시값이

파라미터로 입력받은 start 인덱스부터 length의 길이만큼 잘라내어 반환.매개변수로 잘라내고 싶은 문자열의 start index와 last index를 전달.substring과 동일한 방식으로 사용된다.substring() : start 값과 end 값을 바꾸어서

구하고자 하는 값의 조건이 무엇인지 정확할 경우 사용for문의 조건식에 초기값, 조건식, 증감연산이 담겨있기 때문에 가독성이 좋다.내가 구하고자 하는 값의 조건이 무엇인지 정확히 모를 경우, 유동적인 경우 사용조건식이 흩어져 있기 때문에 가독성이 좋지 않다.참고자료ht

배열을 입력받아 원하는 데이터를 얻기위해 다양한 메소드들을 사용한다.push, pop, shift, unshift, splice, slice, concat, join 등이 있다.배열과 관련된 코플릿을 풀다가 다양한 문제에 직면하게 되었다.파라미터로 입력받은 배열을 새로

.을 통해 접근객체의 key와 value를 할당하거나, 접근할 때 사용되는 방식 중 하나로 '.'을 통해 접근하는 방식이다.dot-natation을 사용했을 경우, 키값으로 변수를 할당받을 수 없다.\[]을 통해 접근'keyname' 형식으로 접근하는 방식이다.Brak

string, number, bigint, boolean, undefined, symbol, null데이터 저장공간 (변수)에 하나의 데이터만 넣을 수 있는 자료형이다.위의 예시에 따르면, a라는 변수에 10을 할당하고, b라는 변수에 a를 할당했다.여기서 a에 할당

함수를 리턴하는 함수외부함수의 변수에 접근할 수 있는 내부함수tagMaker라는 함수를 화살표함수로 선언했는데, tag와 content를 파라미터로 받고 html태그형식으로 리턴해주는 함수이다.이 때, divMaker라는 변수에 tagMaker에 'div'를 파라미터로

배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소를 넣을 때 사용...numbers는 배열 1,2,3을 풀어서 각 요소들을 할당해준다.파라미터를 배열의 형태로 받아서 사용 (파라미터 개수가 가변적일 때)

위의 함수의 경우는 outerFn의 내부함수로 innerFn이 선언된 상태이다.이 때, innerFn을 Global scope에서 선언하게 되면선언되지 않았다는 에러메세지가 나온다.그렇다면, 클로저함수를 전역scope에서 호출하고 싶으면 어떻게 해야할까?위의 코드처럼

HTML요소를 Object처럼 조작할 수 있는 ModelDOM을 이용하면 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있다.HTML의 요소를 console.dir로 출력해보면, 객체의 모습으로 출력된다.DOM을 사용하여 HTML에 CRUD(Create, R

assign메소드로 객체를 복사했을 경우, 객체는 참조형 데이터이기 때문에 주소값을 복사하고, 그렇기때문에 복사본을 수정했을 경우 원본도 수정이 될 것 같지만,위의 경우 shallow copy가 된 상황이다.shallow copy : 객체를 트리구조로 봤을 때, 최상위

HTML태그의 기본 이벤트 발생을 막아주는 메소드HTML에서 제공하는 태그 중, a, submit, button 같은 것들은 클릭했을 경우, 새로고침이 되거나 href속성을 통해 연결된 링크로 연결되게 된다.이때, event.preventDefault()메소드를 사용하

이벤트가 발생한 바로 그 요소를 가리킴위의 코드처럼 target메소드를 사용했을 경우, div.inner영역을 클릭하게 되면이벤트가 발생한 div.inner영역이 console.log로 찍히게 된다.이벤트 리스너를 가진 요소를 가리킴이번엔 currentTarget을

특별한 대우를 받는 객체JavaScript에는 특별한 대우를 받는 일급객체가 있는데, 가장 대표적인 것이 바로 함수이다.특별한 대우를 받는 일급객체인 고차함수는 다음과 같은 특징을 갖는다.변수에 할당 가능다른 함수의 전달인자로 사용가능다른 함수의 결과로서 리턴 가능

하나의 모델이 되는 청사진을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴자동차로 예를 들면, 자동차의 바퀴, 핸들, 엔진 등 생산에 필요한 정보가 담겨있는 설계도 즉, 청사진을 만들어놓고그 청사진을 토대로 생산라인에서 자동차들을 생산해내는 과정이 객

객체지향프로그래밍 방식은 청사진을 그려놓고, 그 청사진을 토대로 다양한 제품을 만드는 것이라고 할 수 있다.이런 OOP방식의 특징으로는 크게 4가지가 있다.캡슐화, 추상화, 상속성, 다형성데이터와 기능을 하나의 단위로 묶는 것예를 들어, 마우스 구동을 보면스위치 클릭

프로토타입을 알아보기 전에 JavaScript의 특징에 대해서 먼저 확인할 필요가 있다.자바스크립트는 객체지향언어이기 때문에 클래스의 개념이 없다.ES6 문법부터 class문법이 추가되긴 했지만, 그렇다고 자바스크립트가 클래스 기반 언어가 된 것은 아니다.그렇기때문에

\_\_proto\_\_ 링크를 따라 부모 객체의 property나 method에 접근하는 것.Prototype Chain을 통해 JavaScript에서 부모클래스에 대한 속성이나 메소드를 상속받을 수 있다.이름, 나이, 성별, 관심사를 속성으로 가지는 Person 클

동기(Synchronous)는 순서가 존재한다.그리고 하나의 작업이 끝나기 전까진 다른 작업을 진행할 수 없다.실생활에서 카페에서의 주문을 예로 들어보면, 우리가 카페에 가서 커피를 주문을 한다고 가정해보면,점원에게 커피 주문점원은 주문 접수커피제작고객에게 완성된 커피

우리가 흔히 보는 인터넷 사이트를 보면위의 사진처럼날씨정보나 뉴스정보같은 실시간으로 변하는 동적인 정보들이 존재한다.웹사이트를 개발할 때, 이러한 정보들은 요청 API를 통해 받아온다.그 중 대표적인 fetch API를 이용해 해당 정보를 원격 URL로 불러오는 방법이