Back to list
AuthorBYCM Sirius_Alpha··
·3 min read

#02. React를 위한 빠른 JavaScript 문법 Recap

목차14

TL;DR

개요

사실 JavaScript는 책보면서 막 공부했다기보다는,
옛날에 카카오톡 자동 응답기를 만들면서 필요한 내용들만 그때그때 공부했던 느낌이었다.
따라서 대략적인 문법은 대충 알아도, React를 공부하기 전 자주 사용되는 구문은 한번 정리할 필요를 느꼈다.

변수와 함수

변수

선언은 let, const, var 세가지를 사용한다.
JS는 Type에 굉장히굉장히 관용적이므로, 정적 컴파일 언어처럼 타입을 명시할 필요는 없다.
물론 이게 불편하고 하도 문제가 되니까 TypeScript같은게 나오긴 했지만.

const a = 10;  // Kotlin의 val: 재할당 불가능
let b = 20;    // Kotlin 및 C#의 var: 재할당 가능
var c = 30;    // 과거 버전과의 호환을 위해 남겨둠. 사용 금지

const vs let의 구분 기준은 간단하다: 왠만하면 const, 나중에 바뀔 것 같으면 let.

함수

JavaScript에도 function이라는 멀쩡한 키워드가 있긴 하지만, 보통은 람다식을 쓰는 것 같다:

function foo(a, b) { return a+b; }
const foo2 = (a, b) => a+b;    // 바로 return문이 올 경우, { }와 return 생략 가능
const foo3 = (a, b) => { return a + b; }

여기서, 매개변수가 많아지면 객체로 Wrapping 후 전송하는게 깔끔하고,
뭐만하면 props가 등장하는 것도 그 이유이다.

그리고 또 한가지 짚고 넘어가자면, 여기에는 “Named argument”가 없다.
즉 foo(b = 20, a = 10)와 같은 구문이 불가능하며, 심지어 실제 동작은 “b에 20을 할당(assign)하고 그 결과값(20)을 첫번째 매개변수로 전달”해서, 결과적으로 a에 20, b에 10이 전달되는 대참사가 발생한다 — 정정: 요즘 환경에서는 에러로 막힌다.

비교

React에서 if문은 거의 사용되지 않지만(이전글 참고), 비교 자체는 자주 발생한다.

비교 연산자

  • === or !== 사용
  • falsy(false로 판단되는 값들): false, '', 0, null, NaN, undefined ← 6가지
    • truthy = falsy가 아닌것들
    • 따라서, 빈 배열([])이나 빈 오브젝트({})는 true로 취급된다.

하나만 추가하자면, == 연산자는 우리가 생각하는 것과 다르게 동작한다.
JS명세에 따르면, ==는 연산 과정에서 “암시적 형변환(Implicit Conversion)” 을 진행한다:

  1. 문자열 vs 숫자 → 문자열을 숫자로 변환하여 비교
  2. Boolean vs 다른 타입 → Boolean을 숫자로 변환(true는 1, false는 0)하여 비교
  3. 문자열 vs 문자열 → 문자열 자체(값과 길이)를 비교
  4. null과 undefined → 비교 시에는 서로 같다. NaN은 그 어떤것과도 같지 않다 (심지어 자기 자신과도)
0 == ''      // true  (1번 규칙: 0 == 0, true)
'' == '0'    // false  (3번 규칙: ''=='0', false)
0 == '0'     // true  (1번 규칙: 0 == 0, true)
1 == true    // true (2번 규칙: 1 == 1, true)
null == undefined  // true  (4번 규칙, true)
NaN == null  // false (4번 규칙, false)
NaN == NaN   // false (4번 규칙, false)

솔직히 저걸 다 외우고 받아들이기보다 그냥 === 쓰는게 제일 직관적이고 편해보인다.

자주 쓰이는 패턴

3가지 정도만 짚고 넘어가자.

const x = a ?? (기본값);  // a가 null or undefined이면 x = 기본값,  a가 null이 아니면 x = a
const y = a?.b?.c;  // a, b, c 중 하나라도 null이면 undefined (NPE 방지)
const z = (condition) ? (true) : (false) // 삼항연산자

특히, React에서 “JSX의 { } 안에는 표현식만 들어간다” 라는 조건때문에,
if문 대신 값을 뱉어내는 삼항 연산자가 자주 사용된다.

반복

JS에도 당연히 for, while문이 멀쩡히 존재한다.
그러나 상술한 이유로 인해 for/while문이 직접 쓰이기보다는 map이나 foreach에 대응하는 구문이 사용된다.

for (const item of arr) { ... }  // kotlin의 for (x in elem), Java/C#의 forEach에 해당

Array

JavaScript에서의 Array는, 다른 언어로 따지면 list에 가까운 느낌이다.
실제로 제공되는 여러 유틸 함수들도 보면 타 언어의 가변 Collection에서 보이는 친구들이다.

선언은 const arr = [1, 2, 3];처럼 해주면 된다.

유틸 함수들

const arr = [1, 2, 3];  // 배열 선언

arr.map(x => x*2);              // [2, 4, 6]
arr.filter(x => x>1);           // [2, 3]
arr.find(x => (x % 2 === 0));   // 2
arr.reduce((s,x) => s+x, 0);    // 6
arr.forEach(x => console.log(x) );      // Console에 차례대로 1, 2, 3 찍힘. 반환값 X

여기서, map과 filter는 새로운 배열을 반환한다는 점에 유의.
reduce는 전체 array 값을 단일값으로 ‘줄여주는’ 기능인데, s=누적값, x=순회값, 0=초기값이다.
위 예시 arr.reduce((s,x) => s+x, 0); 구문에서는, arr의 각 요소를 순회하면서 s(초기값 = 0) = s+x를 수행한다.

Object

JSON. 한마디로 설명된다 — 애초에 JSON이 JavaScript Object Notation 의 약어니깐.

스크린샷 2026-07-21 234953 

const user = { name: "Jeong", age: 42 }

user.name;     // 점(.) 접근
user['name'];  // 대괄호 접근
user.email;    // undefined임. null 아님!!!

하나 더 정리하면 좋을 내용은, Object의 일부 필드를 수정하는 시나리오이다:

const {name, ...others} = user;       // name은 name으로 꺼내고, 나머지는 others로
const updated = { ...user, age: 43 }  // 나머지 요소들은 그대로 두되, age만 43으로 변경

둘 모두 새로운 객체를 반환하므로, Reference copy를 걱정할 필요는 없다.

구조분해 할당과 병합

객체 구조 분해 할당(Destructuring Assignment)은 꽤 유용한 기능으로, 배열이나 오브젝트의 각 요소들을 개별 변수에 할당한다.

const arr = [1, 2, 3];  // 일반적인 배열의 선언
const [x, y, z] = arr;  // 구조 분해 할당 결과: x=1, y=2, z=3

/* 아래 구문과 동일:
const x = arr[0];
const y = arr[1];
const z = arr[2]; */

이게 특히 유용할때는, Wrapping된 Object나 배열의 각 요소에 의미있는 이름을 붙여주고자 할 때이다.

const user = [ 1, "Lee", "Lee@x.com", 26];

const [ id, name, email, age ] = user;

console.log(name);  // "Lee" 출력

쪼갤 수 있다면 병합도 가능하다.
여기서 ...(스프레드)이 등장하는데, array 앞에 등장하는 ...은 그 배열의 모든 요소들을 의미한다.

// a, b는 array
const merged = [...a, ...b];

한가지 특이한 점은, 구조분해 시 좌측항의 변수 개수와 우측항의 배열 요소 개수가 같을 필요는 없다는 점이다.
만약 길이가 3인 배열에서 처음 2개 요소만 필요할 경우, 아래와 같이 작성해도 무관하다:

const arr = [1, 2, 3];
const [a, b] = arr;  // a = 1, b = 2

const [x, y, z, w] = arr;  // w = undefined

결론

이번 글에서는 기초적인 JavaScript 문법과 관련된 내용을 다루었다.
어차피 나중가면 정확한 문법은 까먹을지도 모르겠으나, 한번씩 “이런 것도 있었지”를 리마인드 해주는 것만으로도 큰 도움이 되지 않을까 싶다.
특히 AI한테 일 시킬때라던지…

링크가 복사되었습니다