수정 블로그

모듈이란 코드를 모아둔 하나의 파일로, 재사용성 및 유지 보수성을 위해 사용된다. 모듈을 구성하는데 절대적인 원칙은 없지만, 일반적으로 큰 목적 하나를 달성하기 위한 관련 조각 코드들, 또는 관련된 기능들의 모둠, 하나의 클래스 등으로 구성된다. 모듈 사용법모듈은 import와 export 명령어를 사용해 서로 다른 파일에서 해당 모듈을 가져다 쓸 수 있게끔 가져오거나, 내보낼 수 있다. export기존에 작업하던 파일과 동일한 위치에 hello.js 파일을 만들고, 다음 코드와 같이 인사말을 출력하는 함수를 작성한다. 이때 작성한 함수를 내보내기 위해서 function 키워드 앞에 export 명령어를 붙인다.export function greeting() { console.log('Hello'); ..

이벤트란 사건이 발생하는 것을 의미한다. HTML DOM 요소들은 이와 같은 이벤트가 발생했을 때 웹 브라우저에서 알아차릴 수 있는 이벤트 신호를 발생시키는데, 이때 자바스크립트는 발생한 이벤트에 반응하여 지정한 동작을 수행할 수 있다. 이벤트의 종류키보드 이벤트마우스 이벤트form 이벤트 이벤트 리스너이벤트 리스너 등록자바스크립트에서 이벤트에 대한 반응을 지정하기 위해서는 해당 이벤트를 감지할 수 있는 이벤트 리스너를 사용해서 이벤트 핸들러를 지정해야 한다.// 클릭const button = document.querySelector('button');function handler(event) { console.log(event); } button.addEventListener('click',..

DOM이란 HTML 문서의 요소들을 계층으로 표현하여 조작할 수 있게끔 해주는 인터페이스를 의미한다. 즉, 한마디로 모든 HTML 요소들은 HTML DOM을 통해서 접근할 수 있고, 조작 및 제어할 수 있다. 문서와 요소HTML 문서 객체를 의미하는 document는 모든 HTML 요소들을 포함하는 최상위 객체를 의미한다. 요소 선택HTML 문서의 요소를 선택하기 위해서 사용할 수 있는 document의 메서드는 다음과 같다.getElementById() : 아이디로 요소 선택getElementsByClassName() : 클래스로 요소 선택getElementsByTagName() : 태그 이름으로 요소 선택getElementsByName() : name 속성을 요소 선택querySelector() : ..

구조 분해 할당이란 배열 또는 객체의 구조를 분해하여, 그 값을 개별 변수에 담는 표현식을 의미한다. 배열 구조 분해먼저 우리가 잘 아는 방법으로 초기화된 배열을 하나 가정해 보자. 아래 코드처럼 배열에 접근할 때 arr [0]과 같이 인덱스에 접근해 그 값을 사용할 수 있다. 즉, 배열 내부의 값을 새로운 변수에 할당하고자 하면 아래처럼 각각 할당해야 한다.const arr = [1, 2, 3, 4, 5];const one = arr[0];const two = arr[1];const three = arr[2];console.log(one, two, three); 이때 배열에 구조 분해 할당을 사용해 변수를 선언하고 할당하는 과정을 다음 코드처럼 한 번에 해결할 수 있다.const arr = [1, 2,..

기본 문법클래스클래스란 객체 지향 프로그래밍을 정의하는 개념 중 하나로, 똑같은 객체를 여러 번 다시 찍어내기 위한 틀. 즉, 템플릿이다. 인스턴스인스턴스란 객체를 만들기 위한 틀을 의미하는 클래스를 실제로 사용할 수 있는 객체로 만든 것. 즉, 클래스로 구현된 구체적인 실체를 의미한다. 간단하게 말해 클래스가 붕어빵 틀이라면, 인스턴스는 붕어빵이라고 할 수 있다. 클래스와 인스턴스 생성클래스를 생성하기 위해서는 class란 키워드를 사용한다. 이때 클래스 내부에 위치한 생성자 함수 constructor()는 클래스로 생성된 객체를 생성하고 초기화하기 위한 특수한 메서드로, 클래스 내부에 딱 한 개만 존재할 수 있다.class User { constructor(name) { this.name = n..

Map객체와의 차이점맵은 순서를 보장한다.맵은 반복이 가능한 객체이다.맵은 모든 데이터 타입의 키를 허용한다.맵은 키를 문자열로 취급하지 않는다.위와 같은 특징들로 인해 맵은 키의 순서가 보장되어야 할 때나 객체의 키가 객체에 허용되지 않는 데이터 타입인 경우에 사용되며, 이외에는 객체가 사용된다. new Map()새로운 맵을 생성 한다. 이때 괄호 안에 반복이 가능하면서 키와 값 쌍인 객체를 받으면, 해당 값이 추가된 맵을 생성 한다.const arr = [[1, 'a'], [2, 'b']];const aMap = new Map(arr);console.log(aMap); // {1 => 'a', 2 => 'b'} set()주어진 키와 값을 맵에 추가한다.const aMap = new Map();aMap..

Set배열과의 차이점셋은 중복을 허용하지 않는다.셋은 인덱스의 개념이 없다.셋은 키와 값이 같다.이러한 차이점으로 인해 셋은 주로 중복을 제거하거나 값의 유무만을 판단해야 하는 경우에 사용된다. new Set()새로운 셋을 생성한다. 이때 괄호 안에 초깃값으로 배열과 같은 객체를 전달받으면, 해당 값을 복사하여 (중복이 제거된 채로) 셋을 생성한다.const arr = [1, 2, 1];const aSet = new Set(arr);console.log(aSet); // {1, 2} add()셋 요소의 끝에 주어진 값을 추가한다. 주어진 값이 이미 셋에 있는 경우 추가되지 않고 무시된다.const aSet = new Set();aSet.add(1);aSet.add(2);aSet.add(1);console..

객체의 축약 표현프로퍼티 축약 표현const name = 'John';const age = 20;const obj = { name: name, age: age };console.log(obj); // {name: 'John', age: 20} 위 코드는 name, age라는 변수를 obj 객체에 프로퍼티 값으로 할당할 때, 각 변수 이름과 똑같은 키값을 사용하고 있다. 이 경우는 키값을 생략해 줄 수 있다.const name = 'John';const age = 20;const obj = { name, age };console.log(obj); // {name: 'John', age: 20} 메서드 축약 표현객체는 변수나 값 외에도 함수를 프로퍼티로 가질 수 있는데, 이렇게 객체의 ..

배열 판별Array.isArray()주어진 인자가 배열인지를 판별하여, 배열이라면 true, 아니라면 false를 반환한다.const arr = ['hello', 'world'];const str = 'hello world';console.log(Array.isArray(arr)); // trueconsole.log(Array.isArray(str)); // false 배열 생성Array.from()반복 가능한 객체 또는 유사 배열 객체를 복사해 새로운 배열 객체를 반환한다. 두 번째 인자에 선택적으로 매핑할 함수를 지정할 수 있으며, 이 경우 주여진 배열을 복사할 때 각각의 요소에 지정된 함수를 실행하고 그 결과를 배열로 반환한다.const arr = [1, 2, 3, 4, 5];const newArr..

대소문자 변환toUpperCase()주어진 문자열을 모두 대문자로 변환한다.const str = 'hello world';console.log(str.toUpperCase()); // HELLO WORLD toLowerCase()주어진 문자열을 모두 소문자로 변환한다.const str = "HELLO WORLD";console.log(str.toLowerCase()); // hello world 공백 제거trim()문자열의 앞쪽과 뒤쪽의 공백을 제거한다.const str = ' hi ';console.log(str.trim()); // hi trimStart(), trimEnd(), trimLeft(), trimRight()를 사용해 앞, 뒤, 왼쪽, 오른쪽 공백만 제거할 수도 있다. 새로운 문자..