[TIL-260116] 모던 자바스크립트 기초 문법: 변수 선언부터 분할 대입까지

이 글은 2026년 1월 16일에 작성된 글입니다.

모던 자바스크립트

모던 자바스크립트: 현재의 개발 표준과 관행을 따르며, 최신 브라우저와 웹 개발 도구에서 지원되는 자바스크립트 버전 및 기술

모던 자바스크립트 특징

• 리액트, 뷰, 앵귤러 등 가상 DOM을 이용하는 라이브러리 혹은 프레임워크를 사용
• npm, yarn 등의 패키지 관리자 사용
• 주로 ES2016(ES6) 이후의 표기법 사용
• 웹팩 등의 모듈 핸들러 사용
• 바벨 등의 트랜스파일러 사용
• SPA로 작성
• SPA*: HTML 파일은 하나만 사용하고 자바스크립트를 이용해 DOM을 바꿔 써서 화면 이동을 구현하는 것
  HTML은 초기 렌더링만 하고 JS단에서 화면을 계속 바꿔줌

var, let, const

| | 중복 선언 여부 | 재할당 여부 | 변수 스코프 범위 | 호이스팅 |
| var | 가능 | 가능 | 함수 레벨 스코프 | 발생 |
| let | 불가능 | 가능 | 블록 레벨 스코프 | 발생. 하지만 다르게 작동 |
| const | 불가능 | 불가능 (상수) | 블록 레벨 스코 | 발생. 하지만 다르게 작동 |

	중복 선언 여부	재할당 여부	변수 스코프 범위	호이스팅
var	가능	가능	함수 레벨 스코프	발생
let	불가능	가능	블록 레벨 스코프	발생. 하지만 다르게 작동
const	불가능	불가능 (상수)	블록 레벨 스코프	발생. 하지만 다르게 작동

 

var는 재선언 할 수 있다는 점 때문에 거의 이용되지 않음.

const는 한 번만 할당할 수 있는 변수. 반드시 초기화 해야 함. const로 정의해도 객체나 배열 등 object type 데이터들은 값 변경이 가능함.

const obj1 = {
        name: "Java",
        age: 20,
};
obj1.name = "JavaScript"; // const 변수의 값 변경
console.log(obj1); // 정상적으로 실행됨
obj1.address = "Seoul"; // 새로운 키, 값 설정
console.log(obj1); // address가 추가된 객체 출력됨

템플릿 리터럴

표현식의 값을 문자열에 추가하거나 여러 줄의 문자열을 표현할 수 있음.
역따옴표(백틱, `)로 묶은 문자열로 사용.

var txt = `I'm going to
javascript`;

• 보간 표현식
• var num1 = 5, num2 = 10; console.log(`${num1} + ${num2} = ${num1 + num2}`);

화살표 함수

ES2015에서 추가된 새로운 함수 표기법
function 선언 없이 () 안에 인수를 입력하고, `=>` 기호로 함수를 작성.

const func1 = (value) => {
        return value;
};
console.log(func1("fun1입니다"));

// 인자가 1개인 경우 소괄호 생략 가능
const func2 = value => {
        return value;
};
console.log(func2("func2입니다"));

// 처리를 한 행으로 리턴하는 경우 중괄호와 return 생략 가능
const func3 = (num1, num2) => num1 + num2;
console.log(func3(10, 20));

// 그러나 중괄호는 쓰고 return을 생략하면 안됨
const func3 = (num1, num2) => {
num1 + num2;
}
console.log(func3(10, 20)); // undefined 출력됨

// 반환값이 여러 행일 경우 ()로 감쌈
const func4 = (val1, val2) => (
        {
                name: val1,
                age: val2,
        }
)
console.log(func4("myName", 20));

분할 대입

객체나 배열로부터 값을 추출하기 위한 방법

• 객체 분할 대입: { }를 사용하여 객체 안에 일치하는 속성 추출 가능.

const myProfile = {
		name: "myName",
		age: 20,
}
// 객체 분할 대입
const {name, age} = myProfile;
const message = `내 이름은 ${name}입니다. 나이는 ${age}세 입니다.`;
console.log(message);

// 추출한 속성에 별칭 지정
const {name: newName, age: newAge} = myProfile;
const newMessage = `내 이름은 ${newName}입니다. 나이는 ${newAge}세 입니다.`;
console.log(message);

• 배열 분할 대입: [ ]를 사용하여 배열에 저장된 순서에 임의의 변수명 설정이 가능.

const myProfile = ["myname", 20];
const [name, age] = myProfile;
const message = `내 이름은 ${name}입니다. 나이는 ${age}세 입니다.`;
console.log(message);

• 디폴트값: 값이 존재하지 않을 때의 초기값을 설정할 수 있음.

const myProfile = {
    age: 6
}
const {name} = myProfile; // myProfile에는 name 키가 없기 때문에 name의 값은 undefined가 됨
const message = `${name}님 안녕하세요`;
console.log(message); // 'undefined님 안녕하세요' 출력
const myProfile = {
        age: 6
}
// 디폴트값 설정
const {name = "guest"} = myProfile;
const message = `${name}님 안녕하세요`;
console.log(message);  // 'guest님 안녕하세요' 출력

---

❕느낀점

화살표 함수의 경우, 순간 자바의 람다식을 보는 것 같아 놀랐다. 검색해보니 자바는 ->로, 자바스크립트는 =>로 표현하니 헷갈리지 않게 주의해야 할 것 같다..

 

그리고 문자열 보간은 파이썬과 비슷해서 헷갈린다. 자바스크립트는 어떤 부분은 자바, 어떤 부분은 파이썬과 비슷한 것 같다. 언어별로 문법이 헷갈리지 않게 잘 정리해야겠다고 생각했다.

 

분할 대입은 정말 신세계였다...!