JavaScript

JavaScript는 웹 페이지의 동작 구현을 비롯해 서버와 여러 실행 환경에서 쓰이는 범용 프로그래밍 언어이다. 언어의 핵심 규칙과 브라우저·Node.js 같은 실행 환경이 제공하는 기능은 구별한다. Java와 이름이 비슷하지만 별개의 언어이며 문법과 실행 모델을 같은 것으로 취급하지 않는다.

언어와 호스트 환경

ECMAScript는 JavaScript의 핵심 언어 규칙을 정의하는 표준이다. 브라우저는 여기에 DOM 같은 웹 기능을 제공하고 서버 실행 환경은 파일·네트워크 등의 기능을 별도로 제공한다. 배열과 함수 같은 언어 기능은 여러 환경에서 사용할 수 있지만 document처럼 특정 환경에 속한 객체가 모든 곳에 있는 것은 아니다.

따라서 오류를 조사할 때 브라우저 콘솔에서 실행했는지, Node.js에서 실행했는지부터 구분한다. 패키지의 실행 대상과 모듈 형식, 지원하는 문법 버전도 맞아야 한다. 한 환경에서 이름이 정의되어 있다고 다른 환경에서도 같은 이름을 사용할 수 있다고 가정하지 않는다.

값과 변수 선언

let과 const는 블록 범위의 선언에 사용한다. const는 그 이름에 다른 값을 다시 대입할 수 없도록 하지만, 그 값이 객체일 때 객체 내부까지 자동으로 불변이 되는 것은 아니다. 객체와 배열을 공유하는 코드에서는 누가 내부 상태를 바꾸는지 살펴야 한다.

동적 타입 언어이므로 실행 중 값에 따라 동작이 결정된다. 자동 형 변환을 이해하지 못하면 문자열 연결과 숫자 계산을 혼동하기 쉽다. 외부 입력은 원하는 형태로 명시적으로 변환하고, 변환 결과가 사용 가능한지 검사하는 것이 중요하다.

함수와 배열 처리

함수는 값으로 전달하거나 반환할 수 있다. 배열의 map은 각 원소에 함수를 적용한 결과로 새 배열을 만든다. 원래 배열과 변환 결과를 분리해서 다루기 편하지만 콜백 안에서 외부 객체를 수정하면 부수 효과가 생길 수 있다.

화살표 함수는 간결한 함수 표현이지만 일반 함수의 모든 동작을 그대로 대체하는 것은 아니다. 특히 this의 동작이 다르므로 객체 메서드나 이벤트 처리 코드에서는 문맥을 확인해야 한다. 아래 예제는 this를 사용하지 않는 단순 계산이다.

예시: 가격 목록에서 세금 포함 금액 계산

브라우저 개발자 도구의 콘솔 또는 Node.js에서 아래 코드를 실행할 수 있다. 외부 패키지나 네트워크 요청은 필요하지 않다. 원 단위 정수 가격에 10%를 더한 뒤 반올림한다. 출력은 1100,2750,4400 문자열과 8250이다.

map의 각 price는 원래 배열의 원소이며 taxIncluded는 새 배열이다. reduce는 초기 누적값 0에서 시작해 모든 값을 더한다. 이 예제는 언어 기능 설명을 위해 단순한 단가와 세율을 가정했다. 실제 금액 처리에서는 통화의 최소 단위, 반올림 시점, 세금 규칙을 명시해야 한다.

const prices = [1000, 2500, 4000];
const taxIncluded = prices.map(price => Math.round(price * 1.1));
const total = taxIncluded.reduce((sum, price) => sum + price, 0);
console.log(taxIncluded.join(","));
console.log(total);

예시: const와 객체 변경

다음 예제에서 state의 count를 1로 바꾸는 것은 허용되며 출력은 1이다. const가 막는 것은 state라는 이름에 다른 객체를 다시 대입하는 작업이다. 객체 속성을 읽기 전용으로 만드는 동작은 아니다.

공유 객체를 함수 여러 곳에서 바꾸면 변경 시점을 추적하기 어려울 수 있다. 객체를 새로 만들어 전달하는 방식이나 변경 책임을 한곳에 모으는 방식 등을 선택할 수 있지만, 어떤 전략을 택하든 얕은 복사와 내부 객체 공유를 구분해야 한다.

const state = { count: 0 };
state.count = 1;
console.log(state.count);

비동기 작업의 이해

파일 읽기나 통신처럼 완료까지 시간이 걸리는 작업은 비동기 API와 함께 사용되는 경우가 많다. Promise는 작업의 미래 완료 또는 실패를 표현하고 async·await는 이를 다루는 코드 형태를 제공한다. await를 사용했다고 계산량이 줄거나 모든 코드가 다른 스레드에서 병렬로 실행되는 것은 아니다.

성공 경로뿐 아니라 실패와 취소, 결과가 도착하는 순서도 설계해야 한다. 예를 들어 사용자가 검색어를 빠르게 바꾸면 먼저 보낸 요청의 응답이 나중에 도착할 수 있다. 화면에는 최신 요청의 결과를 표시하도록 요청의 유효성을 구별할 필요가 있다.

주의할 점

숫자는 자료형과 범위의 제약을 가진다. 일반 Number 계산은 부동소수점이므로 소수의 모든 연산이 수학적 십진수 계산과 똑같이 표현되는 것은 아니다. 큰 정수를 다루거나 정확한 금액 계산이 필요하면 자료 표현과 연산 규칙을 먼저 정한다.

브라우저에서 받은 값이나 사용자 입력을 코드로 실행하는 방식은 피하고 데이터로 처리한다. HTML 표시, 서버 요청, 파일 경로처럼 사용 위치에 따라 검증과 인코딩 요구가 달라진다. 라이브러리가 있다고 입력 검증 책임까지 사라지는 것은 아니다.

참고 자료