기초 소개
JavaScript는 동적이고 프로토타입 기반인 언어예요. 몇 가지 원시값이 있고, 나머지는 모두 객체로 취급해요.
웹 페이지의 스크립트 언어로 가장 잘 알려져 있지만, Node.js처럼 브라우저가 아닌 환경에서도 많이 사용해요. 이 언어는 활발하게 개발되고 있으며, 멀티 패러다임 특성 덕분에 다양한 프로그래밍 스타일을 지원해요. JavaScript는 동적 언어로, 객체 지향, 명령형, 선언형(예: 함수형 프로그래밍) 스타일을 지원해요.
(재)할당
JavaScript에서 이름에 값을 할당하는 주요 방법은 변수와 상수를 사용하는 것이에요. Exercism에서는 변수를 항상 camelCase로 쓰고, 상수는 SCREAMING_SNAKE_CASE로 써요. 따라야 할 공식 가이드가 있는 것도 아니고, 회사나 조직마다 스타일 가이드가 달라요. 변수는 원하는 방식으로 자유롭게 작성해도 괜찮아요. 연습 문제가 준비된 방식대로 작성하면 웹 인터페이스와 대부분의 IDE에서 다르게 강조 표시된다는 장점이 있어요.
JavaScript의 변수는 const, let, var 키워드로 정의할 수 있어요.
let이나 var를 사용하면 변수는 생명 주기 동안 서로 다른 값을 참조할 수 있어요. 예를 들어 myFirstVariable은 할당 연산자 =를 사용해 여러 번 정의하고 다시 정의할 수 있어요:
let myFirstVariable = 1;
myFirstVariable = 'Some string';
myFirstVariable = new SomeComplexClass();
let과 var와 달리 const로 정의한 변수는 한 번만 할당할 수 있어요. 이것은 JavaScript에서 상수를 정의할 때 사용해요.
const MY_FIRST_CONSTANT = 10;
// Can not be re-assigned.
MY_FIRST_CONSTANT = 20;
// => TypeError: Assignment to constant variable.
상수 할당
const 키워드는 변수와 상수 양쪽 모두에서 언급돼요. 상수와 함께 자주 언급되는 또 다른 개념은 (불)가변성이에요.
const 키워드는 _바인딩_만 불변으로 만들어요. 즉, const 변수에는 값을 한 번만 할당할 수 있어요. JavaScript에서는 원시값만 불변이에요. 하지만 원시값이 아닌 값은 여전히 변경할 수 있어요.
const MY_MUTABLE_VALUE_CONSTANT = { food: 'apple' };
// This is possible
MY_MUTABLE_VALUE_CONSTANT.food = 'pear';
MY_MUTABLE_VALUE_CONSTANT;
// => { food: "pear" }
상수 값 (불변성)
일반적으로 Exercism과 여러 조직, 프로젝트 스타일 가이드에서는 const SCREAMING_SNAKE_CASE처럼 보이는 값을 변경하지 않아요. 기술적으로는 그 값을 변경할 수도 있지만, Exercism에서는 명확성과 기대치 관리를 위해 권장하지 않아요. 이를 반드시 강제해야 할 때는 Object.freeze(value)를 사용해요.
const MY_VALUE_CONSTANT = Object.freeze({ food: 'apple' });
// This silently fails
MY_VALUE_CONSTANT.food = 'pear';
MY_VALUE_CONSTANT;
// => { food: "apple" }
실무에서는 코드베이스 곳곳에서 Object.freeze를 보기는 어렵지만, SCREAMING_SNAKE_CASE 값을 절대 변경하지 말라는 규칙은 좋은 규칙이에요. 보통 린터 같은 자동 분석으로 강제하죠.
함수 선언
JavaScript에서는 기능 단위가 _함수_로 캡슐화돼요. 보통 서로 관련 있는 함수라면 같은 파일에 모아 둬요. 이 함수들은 매개변수(인자)를 받을 수 있고, return 키워드로 값을 _반환_할 수 있어요. 함수는 () 문법으로 호출해요.
function add(num1, num2) {
return num1 + num2;
}
add(1, 3);
// => 4
💡 JavaScript에는 함수를 선언하는 방법이 아주 많아요. 다른 방법들은 function 키워드를 사용하는 방식과 달라 보여요. 이 트랙에서는 이런 방법들을 차근차근 소개하려고 하지만, 이미 알고 있다면 어떤 방법이든 자유롭게 사용해도 돼요. 대부분의 경우 한 방법이 다른 방법보다 더 낫거나 나쁘지는 않아요.
내보내기와 가져오기
export와 import 키워드는 평범한 JavaScript 파일을 JavaScript 모듈로 만들어 주는 강력한 도구예요. 코드가 함수, 클래스, 변수, 상수 같은 구성 요소를 선택적으로 노출할 수 있게 해 줄 뿐만 아니라, 다음과 같은 다양한 기능도 가능하게 해요:
구체적인 예로 Exercism의 JavaScript 트랙에서 테스트가 동작하는 방식을 들 수 있어요. 각 연습 문제에는 최소한 하나의 구현 파일(예: lasagna.js)과 최소한 하나의 테스트 파일(예: lasagna.spec.js)이 있어요. 구현 파일은 export로 공개 API를 노출하고, 테스트 파일은 import로 그것에 접근해요. 이렇게 해서 구현의 결과를 테스트할 수 있어요.
// file.js
export const MY_VALUE = 10;
export function add(num1, num2) {
return num1 + num2;
}
// file.spec.js
import { MY_VALUE, add } from './file';
add(MY_VALUE, 5);
// => 15
3개의 연습 문제
기초 배우기