JavaScript 기초 정리 ③ 콜백 함수, 스코프, 객체, 배열

 

JavaScript 기본 문법 세 번째 정리.

이번에는 함수를 조금 더 활용하는 방법인 콜백 함수부터 시작해서, 변수의 접근 범위를 결정하는 스코프, 여러 데이터를 하나로 묶어 관리하는 객체와 배열에 대해 정리한다.

---

1. 콜백 함수

콜백 함수(Callback Function)는 다른 함수의 인수로 전달되는 함수를 의미한다.

JavaScript에서는 함수도 하나의 값처럼 사용할 수 있기 때문에 다른 함수에 전달할 수 있다.

예를 들어 다음과 같은 함수가 있다고 해보자.

function main(value) {
    console.log(value);
}

function sub() {
    console.log("I am sub");
}

sub라는 함수를 main 함수에 전달할 수도 있다.

main(sub);

여기서 sub는 함수의 실행 결과가 아니라 함수 자체가 전달되는 것이다.

즉,

sub

와

sub()

는 의미가 다르다.

sub   → 함수 자체
sub() → 함수를 즉시 실행

---

2. 콜백 함수 활용

콜백 함수는 특정 작업을 수행한 뒤 어떤 동작을 실행할지 외부에서 전달하고 싶을 때 유용하다.

예를 들어 반복 작업을 수행하는 함수를 만들어보자.

function repeat(count, callback) {

    for (let idx = 1; idx <= count; idx++) {
        callback(idx);
    }
}

repeat() 함수는 두 개의 값을 전달받는다.

count    → 몇 번 반복할 것인지
callback → 반복할 때 실행할 함수

---

숫자를 그대로 출력하기

repeat(5, (idx) => {
    console.log(idx);
});

실행 결과

1
2
3
4
5

repeat() 함수 내부에서 다음 코드가 반복해서 실행된다.

callback(idx);

여기에 전달한 콜백 함수는

(idx) => {
    console.log(idx);
}

이므로 현재 idx 값이 그대로 출력된다.

---

숫자를 두 배로 출력하기

이번에는 다른 함수를 전달할 수도 있다.

repeat(5, function (idx) {
    console.log(idx * 2);
});

실행 결과

2
4
6
8
10

repeat() 함수 자체는 똑같지만 전달하는 콜백 함수가 달라졌기 때문에 다른 결과를 만들 수 있다.

즉, 콜백 함수의 핵심은

공통적인 동작은 그대로 두고, 세부적인 동작만 외부에서 함수로 전달할 수 있다는 것

이라고 이해할 수 있다.

앞으로 map, filter, forEach, 이벤트 처리, 비동기 작업 등을 공부할 때 콜백 함수가 계속 등장한다.

---

3. 스코프

스코프(Scope)는 변수나 함수에 접근할 수 있는 범위를 의미한다.

JavaScript에서는 크게 두 가지로 나눌 수 있다.

전역 스코프(Global Scope)
지역 스코프(Local Scope)

---

4. 전역 스코프

함수나 블록 바깥에서 선언된 변수는 일반적으로 전역 스코프를 가진다.

let a = 1;

function funcA() {
    console.log(a);
}

funcA();

console.log(a);

a는 함수 밖에서 선언되었기 때문에 함수 내부에서도 사용할 수 있고 바깥에서도 사용할 수 있다.

즉, 전역 변수는 여러 영역에서 접근할 수 있다.

---

5. 지역 스코프

함수 내부에서 선언된 변수는 해당 함수 내부에서만 사용할 수 있다.

function funcA() {

    let b = 2;

    console.log(b);
}

b는 funcA() 내부에서 선언되었기 때문에 함수 내부에서는 사용할 수 있다.

하지만 다음과 같이 함수 밖에서 사용하면 오류가 발생한다.

function funcA() {

    let b = 2;
}

console.log(b);

b는 함수 내부의 지역 변수이기 때문이다.

---

6. 블록 스코프

let과 const는 {}를 기준으로 하는 블록 스코프를 가진다.

예를 들어 if문 안에서 변수를 선언해보자.

if (true) {

    let c = 1;

    console.log(c);
}

블록 내부에서는 사용할 수 있지만

console.log(c);

처럼 블록 밖에서는 사용할 수 없다.

---

for문도 마찬가지

for (let i = 0; i < 10; i++) {

    let d = 1;
}

i와 d는 모두 해당 for문의 블록 안에서만 사용할 수 있다.

따라서 바깥에서

console.log(i);
console.log(d);

를 실행하면 오류가 발생한다.

정리하면

전역 변수 → 전체 영역에서 접근 가능

지역 변수 → 선언된 특정 영역에서만 접근 가능

라고 이해할 수 있다.

---

7. 객체

객체(Object)는 여러 개의 데이터를 하나로 묶어서 관리할 수 있는 자료형이다.

예를 들어 한 사람의 정보를 저장한다고 생각해보자.

이름, 나이, 취미, 직업을 각각 별도의 변수로 관리할 수도 있다.

let name = "정재민";
let age = 27;
let hobby = "노래듣기";
let job = "ERP Developer";

하지만 이 값들은 모두 한 사람에 대한 정보이므로 객체로 묶으면 더 편리하다.

---

8. 객체 생성

객체를 만드는 방법에는 대표적으로 두 가지가 있다.

객체 생성자

let obj1 = new Object();

객체 리터럴

let obj2 = {};

실제로 JavaScript에서는 간결한 객체 리터럴 방식을 훨씬 많이 사용한다.

---

9. 객체 프로퍼티

객체 내부에 저장된 각각의 값을 프로퍼티(Property)라고 한다.

let person = {

    name: "정재민",
    age: 27,
    hobby: "노래듣기",
    job: "ERP Developer",

    extra: {},

    10: 20,

    "like cat": true,
};

객체는 기본적으로 다음과 같은 구조를 가진다.

key : value

예를 들어

name: "정재민"

에서

name     → 프로퍼티의 key
정재민   → 프로퍼티의 value

이다.

객체에는 문자열이나 숫자뿐만 아니라 다른 객체, 배열, 함수 등 다양한 값을 저장할 수 있다.

---

10. 객체 프로퍼티 접근

객체 내부의 값에 접근하는 방법은 크게 두 가지이다.

점 표기법
괄호 표기법

---

점 표기법

가장 기본적인 방법이다.

let name = person.name;

console.log(name);

결과

정재민

객체 이름 뒤에 .을 붙이고 프로퍼티 이름을 작성한다.

person.name
person.age
person.hobby

---

11. 괄호 표기법

대괄호 []를 이용해서 접근할 수도 있다.

let age = person["age"];

console.log(age);

결과

27

괄호 표기법에서는 프로퍼티 이름을 문자열로 작성해야 한다.

person["age"]

다음처럼 작성하면 의미가 달라진다.

person[age]

JavaScript는 age라는 변수가 존재하는지 찾게 된다.

---

12. 변수를 이용한 프로퍼티 접근

괄호 표기법의 중요한 장점은 변수에 저장된 값을 이용해 프로퍼티에 접근할 수 있다는 것이다.

let property = "hobby";

let hobby = person[property];

console.log(hobby);

실행하면

노래듣기

가 출력된다.

property 안에 "hobby"라는 문자열이 들어 있기 때문에 사실상 다음과 동일하다.

person["hobby"]

프로퍼티 이름이 실행 중에 달라질 수 있는 경우 유용하다.

---

13. 점 표기법으로 접근할 수 없는 경우

다음과 같은 프로퍼티가 있다고 해보자.

"like cat": true

프로퍼티 이름에 공백이 있기 때문에 다음처럼 사용할 수 없다.

// person.like cat

이럴 때는 괄호 표기법을 사용한다.

console.log(person["like cat"]);

결과

true

---

14. 객체에 새로운 프로퍼티 추가

JavaScript 객체는 생성한 이후에도 새로운 프로퍼티를 추가할 수 있다.

person.job = "FE Developer";

person["favoriteFood"] = "떡볶이";

출력해보면 기존 객체에 값이 추가된 것을 확인할 수 있다.

console.log(person);

---

15. 프로퍼티 수정

이미 존재하는 프로퍼티에 새로운 값을 대입하면 수정할 수 있다.

person.job = "Educator";

person["favoriteFood"] = "초콜릿";

주의해야 할 점은 JavaScript는 대소문자를 구분한다는 것이다.

예를 들어

person["favoriteFood"] = "떡볶이";

person["favoritefood"] = "초콜릿";

이라고 작성하면 기존 favoriteFood가 수정되는 것이 아니다.

favoriteFood
favoritefood

를 서로 다른 프로퍼티로 판단한다.

따라서 프로퍼티 이름의 대소문자를 정확하게 작성해야 한다.

---

16. 프로퍼티 삭제

객체의 프로퍼티를 삭제할 때는 delete 연산자를 사용한다.

delete person.job;

delete person["favoriteFood"];

삭제 후 객체를 출력하면 해당 프로퍼티가 사라진 것을 확인할 수 있다.

---

17. 프로퍼티 존재 여부 확인

객체 안에 특정 프로퍼티가 존재하는지 확인할 때는 in 연산자를 사용할 수 있다.

let result1 = "name" in person;

let result2 = "cat" in person;

console.log(result1);
console.log(result2);

person 객체에는 name 프로퍼티가 있으므로

true

가 반환된다.

반면 cat이라는 프로퍼티는 존재하지 않으므로

false

가 반환된다.

in 연산자의 형태는 다음과 같다.

"프로퍼티 이름" in 객체

---

18. const로 선언한 객체

객체는 const로 선언하는 경우가 많다.

const animal = {

    type: "고양이",
    name: "나비",
    color: "black",
};

const는 값을 바꿀 수 없다고 배웠지만 객체에서는 조금 주의해서 이해해야 한다.

다음 코드는 정상적으로 동작한다.

animal.age = 2;

animal.name = "까망이";

delete animal.color;

console.log(animal);

객체 내부의 프로퍼티를 추가하거나 수정하거나 삭제하는 것은 가능하다.

---

19. const 객체는 왜 수정할 수 있을까?

const는 객체 내부를 절대 수정할 수 없다는 의미가 아니다.

변수 자체에 새로운 값을 다시 할당할 수 없다는 의미이다.

따라서 다음은 가능하다.

const animal = {
    name: "나비"
};

animal.name = "까망이";

하지만 객체 자체를 새로운 객체로 교체하는 것은 불가능하다.

const animal = {
    name: "나비"
};

// 오류 발생
animal = {
    name: "초코"
};

즉,

객체 내부 변경 → 가능

변수에 새로운 객체 재할당 → 불가능

이라고 이해하면 된다.

---

20. 메서드

객체의 프로퍼티 값으로 함수를 저장할 수도 있다.

이처럼 값이 함수인 프로퍼티를 메서드(Method)라고 한다.

const person = {

    name: "정재민",

    sayHi() {
        console.log("안녕!");
    },
};

여기서 sayHi가 메서드이다.

---

21. 메서드 호출

메서드도 일반적인 프로퍼티처럼 점 표기법과 괄호 표기법을 사용할 수 있다.

person.sayHi();

또는

person["sayHi"]();

결과

안녕!

객체가 단순히 데이터만 저장하는 것이 아니라 관련 기능까지 함께 묶을 수 있다는 것이 중요하다.

예를 들어 사람 객체라면 다음처럼 구성할 수 있다.

const person = {

    name: "정재민",
    age: 27,

    sayHi() {
        console.log(`안녕하세요. 저는 ${this.name}입니다.`);
    },
};

this에 대한 내용은 이후 객체와 메서드를 더 공부할 때 따로 정리할 예정이다.

---

22. 배열

배열(Array)은 여러 개의 값을 순서대로 저장할 수 있는 자료구조이다.

객체가 key를 이용해서 값을 관리한다면 배열은 순서(Index)를 이용해서 값을 관리한다.

---

23. 배열 생성

배열을 만드는 방법도 객체와 마찬가지로 두 가지가 있다.

배열 생성자

let arrA = new Array();

배열 리터럴

let arrB = [];

대부분의 경우 배열 리터럴 방식을 사용한다.

---

24. 배열에 값 저장하기

배열에는 여러 개의 값을 저장할 수 있다.

let arr = [1, 2, 3];

JavaScript 배열에는 서로 다른 자료형도 함께 저장할 수 있다.

let arrC = [

    1,
    2,
    3,

    true,

    "hello",

    null,

    undefined,

    () => {},

    {},

    [],
];

숫자, 문자열, Boolean뿐만 아니라 함수, 객체, 다른 배열까지 저장할 수 있다.

---

25. 배열 요소와 인덱스

배열 안에 저장된 각각의 값을 요소(Element)라고 한다.

각 요소에는 순서를 나타내는 인덱스(Index)가 존재한다.

중요한 점은 배열의 인덱스는 0부터 시작한다는 것이다.

let arr = ["A", "B", "C"];

각 요소의 인덱스는 다음과 같다.

"A" → 0
"B" → 1
"C" → 2

---

26. 배열 요소 접근

인덱스를 이용해서 원하는 배열 요소에 접근할 수 있다.

let arrC = [1, 2, 3];

let item1 = arrC[0];

let item2 = arrC[1];

console.log(item1);
console.log(item2);

결과

1
2

---

27. 배열 요소 수정

배열의 특정 위치에 새로운 값을 대입하면 해당 요소를 수정할 수 있다.

let arrC = [1, 2, 3];

arrC[0] = "hello";

console.log(arrC);

결과

["hello", 2, 3]

기존 인덱스 0에 저장되어 있던 1이 "hello"로 변경된다.

---

객체와 배열의 차이

객체와 배열은 모두 여러 데이터를 하나로 묶을 수 있지만 데이터를 관리하는 방식이 다르다.

구분객체배열

기본 형태	{}	[]
데이터 구분	key	index
접근 방식	person.name	arr[0]
적합한 상황	속성이 있는 데이터	순서가 있는 데이터

예를 들어 사람 한 명의 정보를 관리한다면 객체가 적절하다.

const person = {

    name: "정재민",
    age: 27,
    job: "ERP Developer",
};

반면 여러 명의 이름을 순서대로 저장한다면 배열이 적절하다.

const users = [
    "정재민",
    "김철수",
    "이영희"
];

그리고 실제 개발에서는 객체와 배열을 함께 사용하는 경우가 많다.

예를 들어 여러 사용자의 정보를 저장한다면 다음처럼 작성할 수 있다.

const users = [

    {
        name: "정재민",
        age: 27
    },

    {
        name: "김철수",
        age: 30
    },

    {
        name: "이영희",
        age: 25
    }
];

배열 안에 여러 개의 객체가 들어 있는 형태이다.

이런 구조는 서버에서 데이터를 받아오거나 API 데이터를 처리할 때 자주 보게 된다.

---

정리

이번에는 JavaScript의 콜백 함수부터 객체와 배열까지 공부했다.

개념설명

콜백 함수	다른 함수에 인수로 전달되는 함수
스코프	변수나 함수에 접근할 수 있는 범위
전역 스코프	전체 영역에서 접근 가능
지역 스코프	특정 함수나 블록에서만 접근 가능
객체	여러 데이터를 key-value 형태로 관리
프로퍼티	객체 내부에 존재하는 각각의 속성
점 표기법	person.name
괄호 표기법	person["name"]
delete	객체 프로퍼티 삭제
in	객체에 특정 프로퍼티가 있는지 확인
메서드	객체의 값으로 저장된 함수
배열	여러 데이터를 순서대로 저장
인덱스	배열 요소의 위치를 나타내는 번호

이번 내용부터 JavaScript에서 데이터를 어떻게 구조화하고 함수와 데이터를 어떻게 함께 사용할 수 있는지가 조금씩 보이기 시작했다.

특히 콜백 함수는 앞으로 배열 메서드와 비동기 JavaScript를 공부할 때 계속 등장하는 핵심 개념이고, 객체와 배열은 실제 웹 개발에서 데이터를 다룰 때 거의 항상 사용하게 된다.

다음에는 배열을 더욱 편리하게 다룰 수 있는 배열 메서드와 객체 순회에 대해 정리해볼 예정이다.