☁️ goormTIL | JavaScript #12

매루·2025년 9월 17일

DEEPDIVE_FE TIL goormTIL

goormTIL

목록 보기

10/67

📅 2025-09-17

➡️ JavaScript에 대해 새롭게 알게 된 것 또는 헷갈리는 부분 정리

🔎 학습 리마인드

📌 반복문

💡 for-in문

객체의 속성을 순회할 때 사용하는 반복문 (배열도 가능하지만 객체 순회가 더 바람직함)

let person = { name: "John", age: 30, gender: "male" };

for (let key in person) {
  console.log(key + ": " + person[key]);
}
/*
	객체의 프로퍼티를 순서대로 접근 
*/

📌 ES6 문법

💡 구조 분해 할당

배열이나 객체에서 값을 변수에 간단하게 할당할 수 있는 문법

배열 구조 분해

const arry = [1,2,3];
// 기존
const a = arr[0];
const b = arr[1];

// 최신
const [x,y] = arr;

console.log(x); // 1
console.log(y); // 2

객체 구조 분해

const user = { name: '철수', age: 20 };

// 기존
const name = user.name;
const age = user.age;

// 최신
const { name, age } = user;

console.log(name); // "철수"
console.log(age);  // 20

함수 매개변수 구조 분해

function greet({name, age}){
	console.log("name : "+ name +" / age :" + age); 
}

greet({name:'철수', age:20});

💡 Spread (전개 구문)

배열이나 객체를 전개하는 문법. 구조 분해 할당과 함께 많이 사용

let arr = [1,2,3];

let newArr = [...arr, 4];
console.log(newArr) // [1,2,3,4]

// 객체
let user = {name: "철수", age: 30};
let user2 = {...user}

user2.name = "영희"

console.log(user.name) // 철수
console.log(user2.name) // 영희

❗ 원본은 건들지 않음

💡 단축 속성명

객체의 key와 value값이 같으면 생략 가능

const name = "철수"
const age = "30"

const obj = {
		name,         // name: name
	age: newAge
}

💡 나머지 매개변수

함수에 전달되는 매개변수의 개수가 정해져 있지 않을 때 사용

function func(a, b, ...args) {
  console.log(...args); // args 배열을 펼쳐서 출력
}

func(1, 2, 3);
// a = 1, b = 2, args = [3]
// 출력: 3

func(1, 2, 3, 4, 5, 6, 7);
// a = 1, b = 2, args = [3, 4, 5, 6, 7]
// 출력: 3 4 5 6 7

💡 템플릿 리터럴

여러 줄로 이루어진 문자열과 문자 보간 기능을 사용하게 만들어 주는 문자열 리터럴 표현식
- 백틱과 ${}로 표현
```
const name = "철수";
const age = 20;

console.log(`제 이름은 ${name}이고, 나이는 ${age}살입니다.`);
```

💡 모듈화 (import, export)

export
- 내보내기
- 내가 만든 함수, 변수 등을 다른 파일에서 쓸 수 있도록 공개하는 것
- default export → 파일에서 하나만 대표로 보낼 때
- named export → 여러 개를 동시에 내보낼 때
import
- 가져오기
- 다른 파일에서 export 한 것을 불러오는 문법
- default export 에서 가져올 때는 이름을 마음대로 지을 수 있음
- named export는 { } 중괄호 안에 정확한 이름을 써야 함
- as 키워드로 이름 바꾸기 가능
- * as 문법으로 한번에 가져오기 가능

default export

한 파일에서 하나만 내보낼 때 사용

// name.js
const Name = () => {
  console.log("Hello!");
};

export default Name;

------------------------------------------------

// 다른 파일에서 가져오기
import NewName from "./name.js";  
import NameFromOtherModule from "./name.js";

NewName();            // "Hello!"
NameFromOtherModule(); // "Hello!"

named export

한 파일에서 여러 개를 내보낼 수 있음

// name.js
export const Name1 = () => {
  console.log("Name1");
};

export const Name2 = () => {
  console.log("Name2");
};

-----------------------

// 다른 파일에서 가져오기
import { Name1, Name2 } from "./name.js";

Name1(); // "Name1"
Name2(); // "Name2"

// 다른 이름으로 바꾸려면 as 사용
import {Name1 as newName, Name2} from "./name.js";

NewName();

// 한꺼번에 모듈 가져오기 
import * as NameModule from "./name.js";

console.log(NameModule.Name1); // 함수 Name1
console.log(NameModule.Name2); // 함수 Name2

📌 일급 객체

자바스크립트에서 함수는 단순히 실행 가능한 코드 묶음이 아니라 일급 객체(First-Class Object)로 취급됨
- (함수도 값이니까 값으로 활용될 수 있는 모든 곳에 들어갈 수 있음)

변수를 통해 함수 저장

함수도 값처럼 다룰 수 있기 때문에 변수에 담아둘 수 있음

함수를 다른 함수의 인자로 전달

함수는 값이므로, 다른 함수의 매개변수로 전달할 수 있음

이런 식으로 전달된 함수를 콜백 함수(callback function)라고 부르고, 이를 받아서 실행하는 함수를 고차 함수(higher-order function)라고 함

함수를 반환

다른 함수의 실행 결과로도 만들어질 수 있음

특정 동작을 만들어내는 함수 생성기(팩토리 패턴)나 클로저(closure)를 쉽게 작성할 수 있음

객체의 프로퍼티로 함수 담기

객체의 속성으로 할당할 수 있음

객체 안에 들어간 함수는 메서드(method)라고 부름

배열의 요소로 함수 담기

배열의 원소로도 저장할 수 있음

배열을 통해 여러 함수를 관리하거나, 필요한 함수를 인덱스로 꺼내 실행할 수 있음