자바스크립트 (1)

기본 문법

var와 let
- var: 옛날식 변수 선언 타입. 재선언, 재할당 가능, 함수 레벨 스코프
- let: 요즘 쓰는 변수 선언 타입. 재선언 불가, 재할당 가능, 블록 레벨 스코프
- const: 요즘 많이 쓰는 변수(상수) 선언 타입. 재선언 불가, 재할당 불가, 블록 레벨 스코프

스코프 차이: 전역/지역 변수와 유사한 개념. 하나의 함수(제일 바깥 중괄호) 안쪽 영역을 기준으로 한다.

함수 스코프: 반복문이나 조건문에서 선언된 변수를 그 밖에서도 사용 가능. 그렇다고 함수 밖에서도 사용 가능하다는 건 아님. 같은 함수 내에 있다면, 조건문에서 선언 후 조건문 밖에서 호출하더라도 쓸 수 있다는 말임.
블록 스코프: 중괄호로 제한된 범위 내에서만 사용 가능. 조건문 안에도 엄격하게 적용됨.

제미니 설명

자바스크립트의 스코프(Scope)는 식별자(변수, 함수 이름 등)의 유효 범위를 정의하는 규칙이다. 식별자가 선언된 위치에 따라 다른 코드에서 해당 식별자를 참조할 수 있는지 여부가 결정된다 [1].

함수 스코프 (Function Scope)
함수 스코프는 함수 내부에서 선언된 변수가 오직 해당 함수 내에서만 유효하며, 함수 외부에서는 접근할 수 없음을 의미한다.
- 선언 키워드: var 키워드로 선언된 변수가 이에 해당한다.
- 특징:
  - 함수 내에서 선언된 var 변수는 함수 전체(중첩된 블록 포함)에서 접근 가능하다.
  - 블록(예: if, for) 내에서 var로 선언하더라도, 해당 블록이 함수 내에 있다면 블록 외부(함수 내부)에서도 접근할 수 있다.
- 호이스팅(Hoisting): var 변수는 선언 단계와 초기화 단계가 동시에 이루어져, 실제 선언문이 실행되기 전에도 참조할 수 있다. 이때 값은 undefined로 할당된다 [2].
블록 스코프 (Block Scope)
블록 스코프는 중괄호 {}로 둘러싸인 코드 블록 내에서만 변수가 유효함을 의미한다. ECMAScript 2015(ES6)에서 도입되었다.
- 선언 키워드: let과 const 키워드가 이에 해당한다.
- 특징:
  - if문, for문, while문 등 모든 중괄호 블록 내부에서 선언된 변수는 블록 외부에서 참조할 수 없다. 외부에서 접근 시 ReferenceError가 발생한다 [1].
  - 중복 선언이 불가능하여 코드의 안정성을 높인다.
- 일시적 사각지대 (TDZ): let과 const는 선언 단계와 초기화 단계가 분리되어 있다. 선언 이전에 접근하려 하면 ‘일시적 사각지대(Temporal Dead Zone)’에 의해 오류가 발생한다 [2].

비교 요약

구분	함수 스코프 (Function Scope)	블록 스코프 (Block Scope)
관련 키워드	`var`	`let`, `const`
유효 범위	함수 단위 (Function body)	블록 단위 (Curly braces `{}`)
호이스팅 방식	선언 및 `undefined` 초기화	선언만 수행 (TDZ 발생)
중복 선언	허용됨	허용되지 않음

참고문헌
1. MDN Web Docs. (n.d.). Scope. Retrieved April 2, 2026, from https://developer.mozilla.org/en-US/docs/Glossary/Scope
2. Ecma International. (2025). ECMAScript® 2025 Language Specification. Retrieved from https://tc39.es/ecma262/

배열 처리 문법

for ... of
- 반복 가능한 객체(Iterable objects)를 순회하며 각 열거 속성 값을 처리하는 반복문
- 주요 특징 및 구문
  - 대상: Array, Map, Set, String, TypedArray, arguments 객체 등 반복 가능한(iterable) 객체에 사용됩니다.
  - 작동 방식: 객체의 각 요소에 대해 정의된 반복 동작을 수행하며, 요소의 값을 직접 참조합니다.
  - 구문:
    1 2 3 for (variable of iterable) { statement }
- for ... in과의 차이점
  - for ... in: 객체의 모든 열거 가능한 속성 이름(key)을 순회합니다.
  - for ... of: 객체가 정의한 데이터 값(value)을 순회합니다.
- 주요 활용 사례
  - 배열 순회: 배열의 각 원소 값을 순차적으로 추출할 때 사용합니다.
  - 문자열 순회: 문자열의 각 유니코드 문자를 개별적으로 추출합니다.
  - Map/Set 순회: 컬렉션에 저장된 데이터 세트를 순회하며 처리합니다.

forEach()

배열(Array) 프로토콜에 정의된 메서드로, 배열의 각 요소에 대해 제공된 함수를 한 번씩 실행합니다.
주요 특징 및 구문
- 대상: 오직 Array 객체 및 일부 유사 배열 객체(예: NodeList)에서만 사용 가능합니다.
- 반환 값: 항상 undefined를 반환하며, 체이닝(Chaining)이 불가능합니다.
- 중단 불가: for...of와 달리 break나 continue 문을 사용하여 반복을 중간에 멈출 수 없습니다.
- 구문:
  1 array.forEach(callbackFn(element, index, array))

for...of와 forEach()의 비교

구분	for…of	forEach()
적용 범위	모든 Iterable 객체	주로 Array 객체
반복 제어	`break`, `continue` 사용 가능	사용 불가 (예외 던지기 제외)
비동기 처리	`await`와 함께 사용 시 순차적 처리 가능	`await`를 기다리지 않음

동작 원리
forEach()는 인자로 받은 콜백 함수를 배열의 길이만큼 호출하며, 이때 각 호출마다 현재 요소(value), 인덱스(index), 원본 배열(array)을 인자로 전달합니다.

map()
- 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드입니다.
- 주요 특징:
  - 원본 배열을 수정하지 않고 새로운 배열을 생성합니다(불변성 유지).
  - 배열의 모든 요소를 1:1로 매핑하여 변환할 때 사용합니다.
- 구문:
  1 const newArray = array.map(callbackFn(element, index, array));
- 덤: Map (내장 객체)
  Map 객체는 키-값 쌍을 저장하며, 삽입 순서대로 요소를 기억하는 콜렉션입니다.
  - 주요 특징:
    - 키의 다양성: 일반 객체(Object)와 달리 함수, 객체, 원시 값 등 모든 값을 키로 사용할 수 있습니다.
    - 크기 확인: size 속성을 통해 요소의 개수를 즉시 확인할 수 있습니다.
    - 성능: 빈번한 키-값 쌍의 추가 및 제거가 발생하는 시나리오에서 Object보다 성능이 최적화되어 있습니다.
  - 구문:
    1 2 const myMap = new Map(); myMap.set('key', 'value');
filter()
배열의 각 요소에 대해 제공된 테스트 함수를 실행하고, 그 조건을 통과하는(결과값이 true인) 모든 요소를 모아 새로운 배열을 생성하는 메서드입니다.
- 주요 특징
  - 새 배열 반환: 조건을 만족하는 요소가 없으면 빈 배열([])을 반환하며, 원본 배열은 변경되지 않습니다.
  - 불변성(Immutability): 데이터의 원본을 유지하면서 특정 조건에 맞는 데이터만 추출할 때 사용됩니다.
  - 콜백 함수 인자: 각 순회마다 현재 요소(element), 인덱스(index), 원본 배열(array)을 인자로 받습니다.
- 구문
  1 const newArray = array.filter(callbackFn(element, index, array));
- 예시 코드
  1 2 3 const numbers = [1, 5, 8, 12, 4]; const filtered = numbers.filter(num => num > 5); // 결과: [8, 12]
- map()과의 차이점
  - map(): 배열의 각 요소를 다른 값으로 변환하여 동일한 길이의 배열을 생성합니다.
  - filter(): 조건에 맞는 요소만 선별하므로 결과 배열의 길이는 원본보다 작거나 같을 수 있습니다.
reduce()
배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환하는 메서드입니다.
- 주요 특징
  - 누적 계산: 배열의 요소를 순회하며 이전 단계의 계산 결과를 다음 단계로 전달하여 최종적으로 하나의 값(숫자, 객체, 배열 등)을 생성합니다.
  - 초기값 설정: 리듀서 함수의 첫 번째 호출에서 accumulator에 제공할 초기값을 선택적으로 지정할 수 있습니다. 초기값을 제공하지 않으면 배열의 첫 번째 요소가 accumulator가 됩니다.
  - 반환값: 배열이 아닌, 누적 계산의 최종 결과물인 단일 값을 반환합니다.
- 구문
  1 array.reduce(callbackFn(accumulator, currentValue, currentIndex, array), initialValue)
  - accumulator: 콜백의 반환값을 누적합니다.
  - currentValue: 처리할 현재 요소입니다.
- 작동 원리 예시 (합계 계산)
  [1, 2, 3, 4] 배열의 합을 구할 때, 초기값이 0이라면 다음과 같이 동작합니다.
  1. 0(누적값) + 1(현재값) = 1
  2. 1(누적값) + 2(현재값) = 3
  3. 3(누적값) + 3(현재값) = 6
  4. 6(누적값) + 4(현재값) = 10 (최종 반환값)
- 활용 사례
  - 데이터 요약: 배열의 합계, 평균, 최대값/최소값 계산.
  - 데이터 구조 변환: 객체 배열을 특정 키를 기준으로 하는 그룹화된 객체로 변환.
  - 배열의 평탄화: 중첩된 배열을 단일 배열로 결합.

some()과 every()

배열의 요소들이 특정 조건을 만족하는지 테스트하여 불리언(boolean) 값(true 또는 false)을 반환하는 논리 테스트 메서드입니다.

Array.prototype.some()
배열의 요소 중 적어도 하나가 제공된 테스트 함수를 통과하는지 확인합니다.
- 판단 논리: 논리합(OR) 연산과 유사합니다.
- 특징: 조건을 만족하는 요소를 찾는 즉시 순회를 중단하고 true를 반환합니다(단락 평가). 모든 요소가 조건을 만족하지 않을 경우에만 false를 반환합니다.
- 빈 배열: 빈 배열에서 호출하면 항상 false를 반환합니다.
Array.prototype.every()
배열의 모든 요소가 제공된 테스트 함수를 통과하는지 확인합니다.
- 판단 논리: 논리곱(AND) 연산과 유사합니다.
- 특징: 조건을 만족하지 않는 요소를 찾는 즉시 순회를 중단하고 false를 반환합니다. 모든 요소가 조건을 만족해야만 true를 반환합니다.
- 빈 배열: 빈 배열에서 호출하면 항상 true를 반환합니다(Vacuous truth).

비교 요약

메서드	조건 만족 기준	중단 시점 (Short-circuit)	빈 배열 결과
`some()`	하나 이상의 요소가 `true`	첫 번째 `true` 발견 시	`false`
`every()`	모든 요소가 `true`	첫 번째 `false` 발견 시	`true`

find(), findIndex(), includes()

이 메서드들은 배열 내에서 특정 요소나 조건을 만족하는 항목을 검색하기 위해 사용됩니다

Array.prototype.find()
배열에서 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다.
- 반환값: 조건을 만족하는 요소가 있으면 그 값을, 없으면 undefined를 반환합니다.
- 특징: 조건을 만족하는 요소를 찾는 즉시 탐색을 중단합니다.
- 구문: array.find(callbackFn(element, index, array))
Array.prototype.findIndex()
배열에서 주어진 판별 함수를 만족하는 첫 번째 요소의 인덱스(색인)를 반환합니다.
- 반환값: 조건을 만족하는 요소의 인덱스(0 이상의 정수)를 반환하며, 만족하는 요소가 없으면 1을 반환합니다.
- 특징: 값 자체가 아닌 배열 내의 위치 정보가 필요할 때 사용합니다.
- 구문: array.findIndex(callbackFn(element, index, array))
Array.prototype.includes()
배열에 특정 요소가 포함되어 있는지 여부를 확인하여 불리언(boolean) 값으로 반환합니다.
- 반환값: 포함되어 있으면 true, 그렇지 않으면 false를 반환합니다.
- 특징: 콜백 함수를 사용하는 위 메서드들과 달리, 특정 값을 직접 인자로 받아 단순 포함 여부만 판별합니다. NaN도 올바르게 식별할 수 있습니다.
- 구문: array.includes(searchElement, fromIndex)

메서드 비교 요약

메서드	확인 대상	조건 지정 방식	검색 실패 시 반환값
`find()`	요소의 값	콜백 함수 (조건식)	`undefined`
`findIndex()`	요소의 위치(인덱스)	콜백 함수 (조건식)	`-1`
`includes()`	특정 값의 존재 여부	값 직접 입력	`false`

sort()
배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환하는 메서드입니다.
- 주요 특징
  - 원본 배열 수정 (In-place): 복사본을 만드는 것이 아니라 원본 배열 자체를 직접 수정하여 정렬합니다.
  - 기본 정렬 방식: 별도의 비교 함수를 제공하지 않으면 요소를 문자열로 변환한 후, UTF-16 코드 단위 값을 기준으로 사전순으로 정렬합니다.
    - 예: [1, 10, 2]를 정렬하면 문자열 “10”이 “2”보다 앞에 오므로 [1, 10, 2] 결과가 나옵니다.
  - 반환값: 정렬된 원본 배열의 참조를 반환합니다.
- 구문 및 비교 함수 (compareFn)
  숫자 정렬이나 특정 기준에 따른 정렬이 필요한 경우 비교 함수를 인자로 전달해야 합니다.
  1 array.sort([compareFn(a, b)])
  - compareFn(a, b) < 0: a를 b보다 낮은 인덱스로 정렬합니다 (a가 먼저 옴).
  - compareFn(a, b) > 0: b를 a보다 낮은 인덱스로 정렬합니다 (b가 먼저 옴).
  - compareFn(a, b) === 0: a와 b의 상대적 순서를 변경하지 않습니다.
- 숫자 정렬 예시
  문자열 사전순 정렬 문제를 해결하기 위해 다음과 같이 작성합니다.
  1 2 3 4 5 6 7 const numbers = [10, 2, 1, 30]; // 오름차순 정렬 numbers.sort((a, b) => a - b); // [1, 2, 10, 30] // 내림차순 정렬 numbers.sort((a, b) => b - a); // [30, 10, 2, 1]
- 안정성 (Stability)
  ECMAScript 2019(ES10) 규격부터 sort() 메서드는 안정 정렬(Stable Sort)임을 보장합니다. 즉, 정렬 기준이 같은 요소들 사이의 원래 순서가 정렬 후에도 유지됩니다.

flat()

모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어 붙인 새로운 배열을 생성하여 반환하는 메서드입니다.

주요 특징 및 구문
- 평탄화(Flattening): 중첩된 배열(배열 안에 배열이 있는 구조)을 해제하여 단일 배열로 만듭니다.
- 원본 유지: 원본 배열을 수정하지 않고 새로운 배열을 반환합니다.
- 빈 요소 제거: 배열 내에 구멍(empty slots)이 있는 경우 이를 제거하고 결과 배열에 포함시키지 않습니다.
- 구문:
  1 const newArray = array.flat([depth]);
  - depth (선택 사항): 중첩 배열 구조를 얼마나 깊게 평탄화할지 지정하는 수치입니다. 기본값은 1입니다.

작동 예시

입력 배열	depth 설정	결과 배열	비고
`[1, 2, [3, 4]]`	기본값 (`1`)	`[1, 2, 3, 4]`	1단계 중첩 해제
`[1, [2, [3]]]`	`1`	`[1, 2, [3]]`	가장 바깥쪽 배열만 해제
`[1, [2, [3]]]`	`2`	`[1, 2, 3]`	2단계까지 모두 해제
`[1, [2, [3]]]`	`Infinity`	`[1, 2, 3]`	모든 깊이의 중첩 해제

특수 케이스: 빈 요소(Holes) 제거
flat()은 희소 배열(Sparse Array)에서 유효한 값이 없는 인덱스를 자동으로 무시합니다.
1 2 const arr = [1, 2, , 4, 5]; arr.flat(); // [1, 2, 4, 5]

객체 리터럴

객체를 하나하나 선언해서 배열에 넣을 수 있음

  
const person1 = {
  name : '김대리',
  age : 31,
};

const person2 = {
  name : '이과장',
  age : 38,
};

const person3 = {
  name : "박부장",
  age : 45,
};

const persons = [person1, person2, person3, { name : '장발장', age : 40 }];
console.log(persons);

객체 속성 접근/수정하기
- 알고 있는 그 다양한 방식들로 객체 속성에 접근하거나 수정할 수 있음
- 없는 속성 접근하면 추가됨

  
const person = {
  name : '김대리',
  age : 31,
};

console.log(person.name);
console.log(person.age);
console.log(person['age']);
person.age = 32;
console.log(person.age);
person.job = '개발자';
console.log(person);

객체 구조 분해 할당
- 객체의 속성을 변수로 쉽게 추출할 수 있는 문법
- 객체의 속성 이름과 추출될 변수 이름이 같아야 한다
- 순서는 달라도 됨

  
const person4 = {
  name1 : '김대리',  // 이 이름이 같아야 함
  age : 31,
};

const {age, name1} = person4;
console.log(name1);
console.log(age);

스프레드 연산자
- 객체를 복사하거나 확장할 때 유용한 문법
- ...으로 객체를 spread하고, 그 뒤에 추가 속성을 쓰거나 그대로 다른 객체에 복사해넣을 수 있다

  
const person5 = {
  name : '김대리',
  age : 31,
};

const newPerson = { ...person5, job: '개발자' };  // 객체 복사 및 확장
console.log(newPerson); // { name: '김대리', age: 31, job: '개발자' }

rest 파라미터
- 객체에서 특정 속성을 제외한 나머지 속성을 새로운 객체로 추출할 때 사용

  
const person6 = {
  name2: '김대리',
  age: 31,
  job : '개발자',
};

const { name2, ... rest } = person6;

console.log(name2); // '김대리'
console.log(rest); // { age: 31, job: '개발자' }

논리 연산

falsy와 truthy를 잘 구분합시다
- 빈 객체(빈 배열 같은 거)는 truthy다

  
console.log(false && "hello" && 123);
console.log("hi" && 0 && "world");
console.log("a" && 1 && true && "끝");

console.log(null || 0 || "" || "JS" || 42);
console.log(false || undefined || 0);

console.log(0 && "A" && null && "B" && undefined && "C");
console.log("X" && 1 && true && [] && {} && "0");

console.log(null || 0 || "" || undefined || NaN || false);
console.log(null || 0 || "" || "첫 truthy" || "두번째 truthy");

false && "hello" && 123
-> false

"hi" && 0 && "world"
-> 0

"a" && 1 && true && "끝"
-> 끝

null || 0 || "" || "JS" || 42
-> JS

false || undefined || 0
-> 0

0 && "A" && null && "B" && undefined && "C"
-> 0

"X" && 1 && true && [] && {} && "0"
-> 0

null || 0 || "" || undefined || NaN || false
-> false

null || 0 || "" || "첫 truthy" || "두번째 truthy"
-> 첫 truthy

자바스크립트 (1)

기본 문법

배열 처리 문법

객체 리터럴

논리 연산

관련된 글

자바스크립트 (2)

Vue.js (2)

현대오토에버 모빌리티 스쿨 스마트 팩토리 과정