모던 자바스크립트 입문 - Chapter 4: 객체와 배열, 함수의 기초 💻

Development/Javascript

모던 자바스크립트 입문 - Chapter 4: 객체와 배열, 함수의 기초 💻

madebydev 2025. 6. 19. 14:56

안녕하세요! 오늘은 자바스크립트의 핵심 개념 중 하나인 객체(Object), 배열(Array), 그리고 **함수(Function)**에 대해 알아보겠습니다. 이 세 가지는 자바스크립트를 다루는 데 있어 필수적인 요소들이니 차근차근 정리해보겠습니다! 🚀

📌 목차

객체(Object)란 무엇인가?
객체 생성과 조작 방법
배열(Array)의 기초
배열 메서드 활용하기
함수(Function)의 기본 개념
함수 선언 방법들
마무리 정리

🏠 객체(Object)란 무엇인가?

객체는 키(key)와 값(value)의 쌍으로 구성된 데이터 구조입니다

실생활의 사물이나 개념을 코드로 표현할 때 매우 유용해요

예를 들어 사람이라는 객체는 이름, 나이, 직업 등의 속성을 가질 수 있습니다

// 객체 생성 예시
let person = {
    name: "박개발",
    age: 20,
    job: "개발자"
};

📝 객체 생성과 조작 방법

1️⃣ 객체 리터럴 방식 (권장)

const student = {
    name: "이학생",
    grade: 3,
    subjects: ["수학", "과학", "영어"],
    isActive: true
};

특징:

가장 간단하고 직관적인 방법
중괄호 {}를 사용하여 생성
키와 값을 콜론(:)으로 구분

2️⃣ 객체 속성 접근하기

const user = {
    name: "박사용자",
    age: 30,
    "favorite-color": "blue"
};

// 점 표기법 (권장)
console.log(user.name); // "박사용자"
console.log(user.age);  // 30

// 대괄호 표기법
console.log(user["name"]); // "박사용자"
console.log(user["favorite-color"]); // "blue"

// 변수로 접근
const property = "age";
console.log(user[property]); // 30

3️⃣ 객체 속성 추가/수정/삭제

const product = {
    name: "노트북",
    price: 1200000
};

// 속성 추가
product.brand = "삼성";
product["color"] = "실버";

// 속성 수정
product.price = 1100000;

// 속성 삭제
delete product.color;

console.log(product);
// { name: "노트북", price: 1100000, brand: "삼성" }

📦 배열(Array)의 기초

배열은 순서가 있는 데이터의 집합입니다.

여러 개의 값을 하나의 변수에 저장할 때 사용하며, 각 요소는 인덱스(0부터 시작)로 접근할 수 있어요.

// 배열 생성 예시
let fruits = ["사과", "바나나", "오렌지"];
let numbers = [1, 2, 3, 4, 5];
let mixed = ["문자열", 123, true, null];

1️⃣ 배열 생성 방법

// 배열 리터럴 방식 (권장)
const colors = ["빨강", "파랑", "노랑"];

// Array 생성자 사용
const emptyArray = new Array(5); // 길이가 5인 빈 배열
const numberArray = new Array(1, 2, 3); // [1, 2, 3]

2️⃣ 배열 요소 접근

const animals = ["고양이", "강아지", "토끼", "햄스터"];

console.log(animals[0]); // "고양이"
console.log(animals[1]); // "강아지"
console.log(animals.length); // 4

// 마지막 요소 접근
console.log(animals[animals.length - 1]); // "햄스터"

// 배열 요소 수정
animals[1] = "강아지";
console.log(animals); // ["고양이", "강아지", "토끼", "햄스터"]

🛠️ 배열 메서드 활용하기

const fruits = ["사과", "바나나"];

// 요소 추가
fruits.push("오렌지");        // 끝에 추가: ["사과", "바나나", "오렌지"]
fruits.unshift("딸기");       // 앞에 추가: ["딸기", "사과", "바나나", "오렌지"]

// 요소 제거
const lastItem = fruits.pop();      // 끝에서 제거: "오렌지"
const firstItem = fruits.shift();   // 앞에서 제거: "딸기"

console.log(fruits); // ["사과", "바나나"]

// 특정 위치에 요소 추가/제거
fruits.splice(1, 0, "포도");  // 인덱스 1에 "포도" 추가
console.log(fruits); // ["사과", "포도", "바나나"]

fruits.splice(1, 1);          // 인덱스 1부터 1개 요소 제거
console.log(fruits); // ["사과", "바나나"]

// 배열 합치기
const moreFruits = ["키위", "망고"];
const allFruits = fruits.concat(moreFruits);
console.log(allFruits); // ["사과", "바나나", "키위", "망고"]

⚙️ 함수(Function)의 기본 개념

함수의 입력 값을 인수라고 부르고 함수의 출력 값을 반환값이라고 부릅니다

// 함수 사용 예시
function greet(name) {
    return "안녕하세요, " + name + "님!";
}

console.log(greet("김개발")); // "안녕하세요, 김개발님!"

📝 함수 선언 방법들

1️⃣ 함수 선언문 - 호이스팅됨, 함수명 필수

function calculateSum(a, b) {
    return a + b;
}

console.log(calculateSum(5, 3)); // 8

특징:

호이스팅되어 선언 전에도 호출 가능
함수명이 필수
가장 기본적인 함수 선언 방식

2️⃣ 함수 표현식 - 호이스팅 안됨, 변수에 할당

const calculateMultiply = function(a, b) {
    return a * b;
};

console.log(calculateMultiply(4, 6)); // 24

특징:

호이스팅되지 않음
변수에 함수를 할당하는 방식
함수명 생략 가능 (익명 함수)

3️⃣ 화살표 함수 (ES6+) - 간결한 문법, this 바인딩 다름

// 기본 형태
const calculateDivide = (a, b) => {
    return a / b;
};

// 간단한 형태 (한 줄일 때)
const calculateSquare = x => x * x;

// 매개변수가 없을 때
const sayHello = () => "안녕하세요!";

// 매개변수가 여러 개일 때
const getFullName = (firstName, lastName) => `${firstName} ${lastName}`;

console.log(calculateSquare(5)); // 25
console.log(getFullName("김", "개발")); // "김 개발"

특징:

ES6에서 도입된 간결한 문법
return 키워드 생략 가능 (한 줄일 때)
this 바인딩이 일반 함수와 다름

4️⃣ 함수의 매개변수와 반환값

// 기본 매개변수
function introduce(name, age = 20, job = "학생") {
    return `이름: ${name}, 나이: ${age}, 직업: ${job}`;
}

console.log(introduce("김철수"));                    // "이름: 김철수, 나이: 20, 직업: 학생"
console.log(introduce("박영희", 25));                // "이름: 박영희, 나이: 25, 직업: 학생"
console.log(introduce("이민수", 30, "개발자"));      // "이름: 이민수, 나이: 30, 직업: 개발자"

// 나머지 매개변수
function calculateAverage(...numbers) {
    if (numbers.length === 0) return 0;
    
    const sum = numbers.reduce((total, num) => total + num, 0);
    return sum / numbers.length;
}

console.log(calculateAverage(10, 20, 30)); // 20
console.log(calculateAverage(5, 15, 25, 35)); // 20

🔍 객체와 배열 타입 확인하기

const person = { name: "김개발", age: 25 };
const fruits = ["사과", "바나나", "오렌지"];
const sayHello = function() { return "안녕하세요!"; };

console.log(typeof person);  // "object"
console.log(typeof fruits);  // "object" (배열도 객체 타입으로 표시됨)
console.log(typeof sayHello); // "function"

// 배열인지 정확히 확인하는 방법
console.log(Array.isArray(fruits)); // true
console.log(Array.isArray(person)); // false

// 좀 더 정확한 타입 확인
console.log(Object.prototype.toString.call(person)); // "[object Object]"
console.log(Object.prototype.toString.call(fruits)); // "[object Array]"
console.log(Object.prototype.toString.call(sayHello)); // "[object Function]"

📚 마무리 정리

오늘 배운 내용을 정리하면:

객체(Object)는 키-값 쌍으로 구성된 데이터 구조로, 실생활의 사물이나 개념을 코드로 표현할 때 사용합니다.

점 표기법과 대괄호 표기법으로 속성에 접근할 수 있습니다.

배열(Array)은 순서가 있는 데이터의 집합으로, 인덱스를 통해 각 요소에 접근할 수 있습니다.

push, pop, splice 등 다양한 메서드를 제공하여 배열을 조작할 수 있습니다.

함수(Function)는 코드의 재사용성과 모듈화를 위한 핵심 요소입니다.

함수 선언문, 함수 표현식, 화살표 함수 등 다양한 방법으로 정의할 수 있으며, 매개변수와 반환값을 통해 데이터를 처리합니다.

💡 오늘 새롭게 알게 된 것

배열과 객체를 정확히 구분하는 방법 (Array.isArray() 사용)
화살표 함수의 간결한 문법과 기존 함수와의 자세한 차이점
나머지 매개변수를 활용한 가변 인자 함수 작성법

🤔 어려웠던 점

객체와 배열을 조합하여 복잡한 데이터 구조를 만들 때 접근 방법이 헷갈렸어요
예제를 만들어볼때 여러 함수들을 조합하여 하나의 시스템을 만드는 부분이 복잡했네요

🎯 다음 학습 계획

다음 포스팅에서는 표현식과 연산자에 대해 알아보겠습니다.