export 모듈 내의 식별자를 다른 모듈에서 접근하기 위해선 export 키워드를 통해 내보내기 한다. 내보내는 대상은 함수, 변수, 클래스 모두 가능하다. 반드시 모듈의 최상위 위치해야 한다. import 타 모듈에서 내보낸 식별자들을 가져오기 위해선 Import 키워드를 사용한다. 가져올 식별자와 타 모듈의 경로를 함께 작성한다. 반드시 파일의 최상위에 위치해야 한다. named exports 개별 식별자를 내보내는 것을 의미한다. 중괄호({})로 식별자들을 감싸 export, import를 사용한다. // a.js const a = 1; function foo(){ // ... } export { a, foo }; // b.js import { a, foo } from './a.js'; conso..

Map Map 객체는 key와 value의 쌍으로 이루어진 collection이다. 사용법 - Map 객체 생성하기 Map 생성자 함수로 만들 수 있다. 이터러블을 인수로 전달받으며, 키와 값으로 이루어진 요소여야 한다. 인수를 전달하지 않으면 빈 Map 객체가 생성된다. const map = new Map(['key1', 'value1'], ['key2', 'value2']); Map 객체는 중복 Key를 가지지 않는다. key가 중복될 경우, 마지막 값으로 입력된다. - 요소 개수 확인하기 size 프로퍼티로 요소의 개수를 받아온다. const count = map.size; // 2 위에서 생성한 map의 개수는 2개이므로 2가 반환된다. - 요소 추가하기 set 메서드를 사용해 Map 객체에 요소..

10진수 -> n진수 변환 `number` 는 10진수 값 let number = 1023; let binary = number.toString(2); // 2진수 let octal = number.toString(8); // 8진수 let hex = number.toString(16); // 16진수 n진수 -> 10진수 변환 let decimal; let binary = "1111"; decimal = parseInt(binary, 2); // 2진수 -> 10진수 let octal = "177"; decimal = parseInt(octal, 8); // 8진수 -> 10진수 let hex = "3ff"; decimal = parseInt(hex, 16); // 16진수 -> 10진수 n진수에서 n..

화살표 함수를 제외한 모든 함수에서 arguments 객체를 사용할 수 있다. arguments arguments 객체를 통해 함수 호출 시 전달한 인자들을 참조할 수 있다. 유사 배열 객체이기 때문에 인덱스 프로퍼티와 length 프로퍼티 등을 가지고 있다. 사용 방법 arguments로 입력해주면 바로 사용할 수 있다. 배열처럼 index 프로퍼티로 값에 접근할 수 있으며 인자로 받은 값의 갯수를 length 프로퍼티로 받을 수 있다. function sum(x, y, z) { console.log(arguments[0], arguments[1], arguments[2]); // 1, 5, undefined console.log(arguments.length); // 2 arguments[1] = 3..

매개변수와 인자는 동일한 의미 같지만 다르다. 프로그래밍 전반에서 자주 쓰이는 만큼 두 차이를 정확하게 알아보자! function message(name){ // name -> 매개변수 return `Hi, ${name}`; } console.log(message('John'))'; // 'John' -> 파라미터 // 'Hi, John' 인자(argument)란? 인자는 함수를 호출할 때 전달되는 값을 의미한다. 매개변수(parameter)란? 매개변수는 함수에서 전달된 인자를 받아들이는 변수를 의미한다. 함수 내에서 지역변수로 사용된다. 매개변수와 인자 자바스크립트 특성상 느슨하기 때문에 함수를 호출할 때 인자 값, 개수 등을 정확하게 검사하지 않는다. function message(name){ re..

NaN NaN은 Not a Number의 약자로, 숫자가 아니라는 의미이다. 숫자로 변환할 수 없는 값을 변환하려고 할 때나 결과가 숫자가 아니면 NaN을 반환한다. NaN 사용하기 let str = "123"; typeof(str) // string let num = Number(str) // 123 typeof(num) // number Number("abc") // NaN 먼저 NaN을 사용하는 방법을 알아보겠다. 문자열로 감싸진 123의 경우, 숫자로 변환 가능하다. 하지만 abc는 숫자로 변환할 수 없는 값이기에 NaN이라는 결과가 반환된다. NaN === NaN NaN === NaN // false Number("abc") === NaN // false NaN !== NaN // true Na..

리액트를 사용할 툴인 비주얼 스튜디오 코드(Visual Studio Code)를 설치하고 ES6(ecmascript) 문법에 대해서 살펴보겠다! React 리액트란 UI를 구현하는 자바스크립트 라이브러리다. 페이스북에서 제공해주는 프론트엔드 라이브러리로 사용하는 큰 기업들이 많다. 자바스크립트 친화적인 es6기반이며 성능 최적화와 유지보수가 쉽다. 공식 라이브러리가 없고 자유도가 높다. Visual Studio Code 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debug..

DOM(Document Object Model) DOM이란? Document Object Model의 뜻으로 HTML 또는 XML 등의 문서를 객체로 표현할 때 사용하는 API이다. DOM API는 트리 구조로 문서를 표현한다. XML 예제 DOM 트리에서 Document는 문서 전체를 나타내는 것이며 는 document 하위의 루트 노드이다. Element는 각각의 태그를 의미한다. firstChild : book 노드 입장에서 첫번째에 위치한 'title' lastChild : book 노드 입장에서 마지막에 위치한 'author' (현재 2개밖에 안썼지만 그 이상이더라도 처음과 끝에 위치간 태그만 가져온다.) parentNode : title 노드 입장에서 'book', book 노드 입장에서 'b..