JavaScript

기존 자바스크립트의 변수 선언은 var라는 키워드로 했었다. 하지만 ES6에서 const와 let이라는 새로운 변수 선언 키워드가 도입되었다. 각 키워드마다 변수의 선언, 할당, 범위의 차이가 있다.재선언: O재할당: O범위: function위 코드를 실행시키면 콘솔창

개발하면서 은근 자주 볼 수 있는 this는 사용하는 환경에 따라 각각 다른 뜻을 가지고 있다. 한 번 알아보도록 하자.그냥 <script> 태그 안에 this를 쓰거나 일반 함수 내에서 this 를 출력해보면 window객체가 출력된다.window는 모든 전역변

template literals에 대해 알아보자. 템플릿 리터럴은 문자열을 다르게 표현하는 ES6 문법이다.기존에는 문자열을 ' / " 홑/겹 따옴표를 이용해서 사용했다.하지만 템플릿 리터럴은 \` 라는 기호를 이용하여 문자열을 표현한다. backtick(백틱) 혹은

... 마침표를 연달아 3개를 찍는게 spread 연산자 이다. 한국어로는 펼침연산자 정도로 설명할 수 있다. 말 그대로 펼침/전개 를 하는 연산자 이다. 괄호를 제거해주는 연산자 정도로 생각하면 쉽다.아래 예시를 보자.a를 콘솔창에 출력해 봤을 때 첫번째는 array

default 파라미터는 함수를 만들 때 파라미터의 기본값을 설정할 수 있는 문법이다.실수로 파라미터를 적지 않아도 설정해놓은 기본값을 넣어준다.예시로 파라미터를 받아서 덧셈결과를 콘솔창에 출력하는 함수를 만들었다.위와 같이 파라미터에 =로 값을 넣어주면 된다.파라미터

자바스크립트의 자료형은 크게 2가지로 분류한다. Primitive / Reference변수와 값이 그대로 저장된다.Primitive data type을 가진 자료형Stringnumber변수에 reference가 저장된다.Reference가 저장된다는 말은 이 데이터가

Constructor(생성자)란 공식 홈페이지에서는 다음과 같이 설명한다.constructor 메서드는 클래스의 인스턴스 객체를 생성하고 초기화하는 특별한 메서드이다.Constructor(생성자)는 Object(객체)를 만들기 위한 함수이다.생성자 함수는 new 키워드

상속을 구현할 수 있는 prototype 프로토타입 이라는 또 하나의 문법이 있다.constructor를 만들면 prototype이라는 속성이 자동으로 생긴다.생성자의 프로토타입에 접근하니 무언가 출력되는 것을 확인할 수 있다.prototype에 추가한 데이터는 어떻게

이전에 constructor와 prototype을 이용한 상속방법에 대해 알아보았는데 이것들은 오래된 문법이다. ES5 / ES6에 와서 상속기능을 구현하는 다른 문법들이 생겼다.위 코드에서 자식이라는 오브젝트는 부모를 프로토타입으로 두게 된다. 코드 실행 결과 자식이

class를 상속해서 다른 class를 만들 때 사용한다.class직접 하드코딩해서 만들어도 되지만 class의 내용이 너무 많은 경우 코드가 길어지기 때문에 extends문법을 이용하면 기존 class내용을 상속해여 또 하나의 class를 만들 수 있게 도와준다.su

사용하는 이유 > 데이터의 무결성을 보존하기 위해. 요즘 데이터를 수정하거나 출력할 때 직접 원본 데이터를 만지는게 아니라 함수로 간접적으로 다루는 추세인데, 일종의 코딩 테크닉이다. getter / setter은 오브젝트 내의 함수들을 괄호 없이 쓸 수 있게 만들어

Destructuring (구조 분해 할당) 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.아래 예시를 보자.기존 array데이터를 변수에 담으려면이렇게 간단하게 변수에 데이터를 할당할 수 있다.결과순서에

1. Promise란? 공식페이지에서는 다음과 같이 설명한다. > Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. Promise는 콜백함수의 또다른 디자인패턴이다. Promise 객체는 성공(resolve) 또는 실패(r

공식페이지에서는 다음과 같이 설명한다.async function 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환합니다. 그러

1. for in > Object에 있던 값을 출력할때 사용한다. 형태는 다음과 같다 for ( 변수생성 in 오브젝트 ) { 코드입력 } 아래 예시를 보자 결과 for in 반복문은 오브젝트 내의 데이터 개수만큼 반복한다. 변수 생성 자리에는 var로 key

1. Symbol 공식페이지에서는 다음과 같이 설명한다. > Symbol 은 생성자가 symbol 원시 값을 반환하는 내장 객체입니다. symbol 원시 값은 심볼 값, 혹은 짧게 심볼이라고만 부르며 고유함이 보장됩니다. 심볼은 객체에 속성을 추가할 때 고유한 키를

Array와 비슷하나 중복값을 허용하지 않는 자료형이다.{} 중괄호로 표현된다.생성은 new Set() 을 이용한다.Set()생성자 함수로 Set객체만 생성한 후 add()를 이용하여 넣을 수 있다.생성 시 파라미터로 데이터를 넣을 수 있다.결과Set자료형은 중복을 허

optional chaining 연산자 (?.) 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다.중첩된 object 자료에서 에러없이 안전하게 데이터를 꺼낼 때 사용한다.chaining연산자 . 과

자바스크립트를 이용하여 공룡게임같은 간단한 장애물 피하기 게임을 만들어보자. 예시) 세팅 index.html과 main.js 파일을 생성한다. index.html main.js canvas를 사용하기 위한 세팅이다.