Javascript
≡ 목차 (Table of Contents)
Javascript
자바스크립트(Javascript)는 웹 브라우저에서 동작하는 스크립트 언어다. 뭔가 부족한 듯한 소개지만 사실상 모든 것을 대변하는 말이다. 물론 현재는 웹 브라우저 뿐만 아니라 엔진만 떼어내면 뭐든 할 수 있는 플랫폼으로 인식될 정도로 많이 쓰이는 언어이기도 해서 이 정의는 틀렸지만 말이다.
이 글에서는 Javascript 뿐만 아니라 ECMAScript를 함께 다룬다. 개념 상 이 둘은 다르게 취급하는 것이 맞겠지만, 현재로써 이 둘을 별도로 생각하는 것도 좀 이상한 것 같기도 하다. 버전은 ES6(ES2015)를 기준으로 한다.
주제별 글들
모듈(Module)
일반적으로 모듈은 아래와 같은 형식으로 쓰인다.
// someModule.js export const name = 'some value'; // someCode.js import { name } from 'someModule.js';
이름 자체를 주지 않고 default로 export 한 경우라면 이름을 마음껏 지을 수 있다.
// someModule.js export default 'default value'; // someCode.js import anyName from 'someModule.js';
이 두 가지 방식을 섞어서 쓸 수도 있다.
// someModule.js export const name = 'some value'; export default 'default value'; // someCode.js import anyName, { name } from 'someModule.js';
위에서 알 수도 있겠지만, 당연하게도 모듈은 여러 심볼을 가질 수 있다.
// someModule.js export const value1 = 'some value 1'; export const value2 = 'some value 2'; // someCode.js import * as someValues from 'someModule.js'; console.log(someValues.value1); console.log(someValues.value2);
튜플 비슷한 문법
Python의 튜플(Tuple)과 비슷한 문법을 발견해서 메모한다.
let [foo, bar] = [1, 2] [foo, bar] = [bar, foo]
무슨 문법인지 아직 이름은 모르겠다. 하여간 덕분에 중간 매개체 없이 교환(swap) 구현이 가능해졌다.
웹 브라우저 DOM 관련
요소 얻기
document.getElementById('some-id') document.getElementsByClassName('some-class')[0] document.getElementsByTagName('tag-name')[0]
메서드 이름에서 elements와 element의 차이, 즉 복수와 단수의 차이를 잘 구분하자.
특정 블록에 HTML 넣기
콘텐츠 높이 구하기
웹 브라우저에 표시되는 내용의 높이(height)를 구하는 방법이다.
document.getElementsByTagName('body')[0].clientHeight
물론 특정 element를 선택해서 할 수도 있다.
document.getElementById('some-block').clientHeight
clientHeight 말고 offsetHeight 도 비슷한 용도로 사용 가능한 듯 하다.
특정 태그 앞에 요소 넣기
수동으로 노드를 만들어서 특정 태그 노드 앞에 붙이는 예제다.
let targetElement = document.getElementById('target') let newElement = document.createElement('div') newElement.innerHTML = 'HTML CONTENT' newElement.className = 'some-class' targetElement.parentNode.insertBefore(newElement, targetElement)
좀 더 쉬운 방법도 있다.
document.getElementById('target').insertAdjacentHTML('beforebegin', 'HTML CONTENT')
beforebegin 이 위치를 가리키는 의미인데 별도의 상수 정의는 없는 것 같다. 참고로 afterbegin, beforeend, afterend 등 다양한 위치를 지정할 수 있다.
기타 팁
오브젝트 값 복제
오브젝트를 레퍼런스 복제가 아닌 값 복제를 하려면 structuredClone 을 사용할 수 있다.
let dupObj = structuredClone(origObj);
네이티브 API이기 때문에 특정 브라우저에서는 동작이 안 될 가능성도 있음에 주의하자. 하지만 별도의 외부 의존성 없이 완벽한 값 복제가 가능하다는 장점은 무시할 수 없다.
외부 링크
- 🌏ES2021 Features!
- 🌏모던 JavaScript 튜토리얼
- 🌏ECMAScript ES2016~ES2020 정리
- 🌏Math as Code: 수식을 어떻게 표현하는지에 관한 설명의 자바스크립트 버전
- 🌏2020년과 이후 JavaScript의 동향 - JavaScript(ECMAScript)