[노드 2팀] #2.JavaScript 반복문, 반복자, 객체

🌟키워드: 반복문, 반복자(iterators), 배열 메소드, 객체, getter & setter

---

 

1. 반복문

반복문은 for반복문, while 반복문, do~while 반복문으로 총 3가지가 있다.
 
 
1-1. for 반복문

- for 반복문은 세미콜론(;)으로 구분된 3개의 표현식으로 구성된다.

1) 초기화: 변수의 초기화를 담당한다.
2) 중지 조건: 반복문을 계속 실행할지 중지할지를 결정하는 조건이다.
3) 증감식: 반복문이 한 번 실행된 후, 반복문의 다음 사이클로 넘어가기 전에 실행되는 코드이다. 주로 변수를 증가시키거나 감소시키는 역할을 한다.

for (let i=5; i<=10; i++) {
  console.log(i);
}

 
 

1-2. while 반복문
- while 반복문은 특정 조건이 true일 동안 반복적으로 코드를 실행하는 루프 구조이다.
- for 반복문과 달리, 반복 횟수를 사전에 알 수 없는 경우에 자주 사용된다.
- 동작 방식: while의 조건 평가 → 조건이 true인 경우 블록({ }) 안의 코드 실행 → 조건이 false가 될 때까지 반복하고, false가 되면 종료

let counter = 0;

while (counter < 5) { // counter가 5보다 작은 동안 반복
  console.log("Counter: " + counter);
  counter++; // counter를 1씩 증가
}

 
 
1-3. do~while 반복문
- do while 반복문은 while 반복문의 변형으로, 블록 안의 코드가 최소 한 번은 실행되도록 보장한다.

let counter = 0;

do {
  console.log("Counter: " + counter);
  counter++; // counter를 1씩 증가
} while (counter < 5); // counter가 5보다 작을 때까지 반복

 

---

2. 반복자(Iterators)

반복자란, 자바스크립트에서 배열이나 다른 자료구조의 각 요소를 하나씩 처리할 수 있는 방법을 제공하는 메소드이다.
 
 
2-1. 함수 자체를 변수에 할당하기
→  아래에서 배울 forEach, map, filter 같은 반복자 메소드들은 함수를 인자로 받는 고차 함수이다. 이 메소드들은 배열이나 다른 반복 가능한 객체의 각 요소에 대해 반복적으로 함수를 호출하여 작업을 수행한다. 이때, 함수 자체를 변수에 할당하거나 인자로 전달할 수 있는 개념이 필요하다.
 
- 아래의 예제 코드처럼 함수 이름이 너무 긴 경우가 있다. 이런 경우, 함수 자체를 변수에 할당하여 함수를 짧은 이름으로 사용 가능하다.

※ 함수를 변수에 할당할 때는, 함수의 이름 뒤에 괄호를 붙이지 않는다.

const IwanttosayhellotoChris = () => { //함수의 이름이 너무 길다.
  console.log('Hello!');
};

// 함수 자체를 변수에 할당하기
const sayHello = IwanttosayhellotoChris;

// 할당된 함수 호출
sayHello(); // 'Hello!' 출력
console.log(sayHello.name); // 'greet' 출력

 
 
2-2. 괄호를 붙이는 경우 vs 괄호를 붙이지 않는 경우

→ 괄호의 유무는 콜백 함수나 이벤트 핸들러에서 매우 중요하므로 꼭 잘 구분하여 알아두어야 한다.
① 함수 이름 뒤에 괄호를 붙이지 않는 경우 (함수 자체를 대입)

const greet = () => {
  console.log('Hello!');
};

const sayHello = greet; // 함수 자체를 변수에 대입 (실행하지 않음)
sayHello(); // 'Hello!' 출력 (여기서 함수가 실행됨)

 
- 괄호 없이 함수명을 대입하는 경우, 함수 그 자체가 변수에 저장된다.
- 이때 함수는 호출되지 않고, 해당 변수를 통해 나중에 함수로서 실행할 수 있다.
 
 
② 함수 이름 뒤에 괄호를 붙이는 경우 (함수 호출 후 반환값을 대입)

const greet = () => {
  console.log('Hello!');
};

const sayHello = greet(); // 함수가 즉시 호출되고, 반환값이 변수에 대입됨
console.log(sayHello); // undefined 출력 (greet 함수는 반환값이 없기 때문에 undefined)

 
- 괄호를 붙이면 함수가 즉시 호출된다.
- 그 결과로 함수의 반환값이 변수에 대입됩니다. greet 함수는 반환값이 없기 때문에 undefined가 sayHello에 대입된다.
- 함수가 반환값을 가지고 있을 경우, 그 값이 변수에 할당된다.
 
 

∴ 차이를 요약하면,

• 괄호 없이 함수명을 대입: 함수 자체가 대입되어, 나중에 그 변수를 통해 함수를 실행할 수 있다.
• 괄호를 붙여 함수 호출: 함수가 즉시 실행되고, 그 반환값이 변수에 대입된다.

 
2-3. 자바스크립트의 배열 메소드 5가지

① .forEach() 메소드
- 배열의 각 요소에 대해 주어진 함수를 한 번씩 호출한다.

const fruits = ["London", "Paris", "Japan"];

fruits.forEach((fruit) =>
  console.log("I want to go " + place);
);
/* 출력 결과
I want to go London.
I want to go Paris.
I want to go Japan.
*/

 
 

② .map() 메소드
- 주어진 함수를 배열의 각 요소에 대해 호출하고, 그 결과로 새로운 배열을 생성한다. 원본 배열은 변경되지 않는다.

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(number => number * 2);

console.log(doubled); 
//출력 결과: [2, 4, 6, 8, 10]

 
 

③ .filter() 메소드
- 주어진 조건을 만족하는 요소만으로 구성된 새로운 배열을 생성한다. 원본 배열은 변경되지 않는다.

const words = ['apple', 'banana', 'kiwi', 'cherry', 'grape', 'orange'];

const longWords = words.filter(word => word.length > 5);

console.log(longWords);
//출력 결과: ['banana', 'cherry', 'orange']

 
 

④ .findIndex() 메소드
- 주어진 조건을 만족하는 첫 번째 요소의 인덱스를 반환한다. 만약 조건을 만족하는 요소가 없으면 -1을 반환한다.

const numbers = [10, 20, 30, 40, 50];

const index = numbers.findIndex(number => number > 25); // 25보다 큰 첫 번째 요소의 인덱스를 찾음

console.log(index);
//출력 결과: 2

 
 

⑤ .reduce() 메소드
- 배열의 각 요소에 대해 주어진 함수를 실행하여 단일 값으로 축소하는 데 사용된다. 이 메소드는 누적 값과 현재 요소를 결합하여 결과를 생성한다.
* 두 번째 매개 변수를 사용하여 초기값을 설정할 수도 있다.

const numbers = [1, 2, 3, 4, 5];

const total = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue; //
}, 0); // 초기 값을 0으로 설정

console.log(total); 
// 출력: 15

 
 

---

 

3. 객체

3-1. 객체 리터럴

- '키: 값' 쌍으로 구성된 데이터를 중괄호{ } 로 묶어 객체 리터럴을 만들 수 있다.
※ '키: 값'들 사이를 쉼표로 구분하는 것을 잊지 말것!

let Pubao = {
    species : "panda",
    color: "black and white"
};

 
 
3-2. 키의 값에 접근하는 방법

① '.' 연산자
- 객체의 이름 뒤에 점을 붙이고, 속성 이름(키)을 작성한다.

pubao.color

 
 

② 대괄호[ ] 표기법
- 객체의 이름 뒤에 대괄호를 써주고, 대괄호 안에 속성 이름(키)을 작성한다.

pubao["color"]

 
 
* 대괄호 안에 변수를 사용할 때는 따옴표 없이 대괄호 안에 써주고, 키를 직접 사용할 때는 따옴표를 사용하여 대괄호 안에 써준다.

const person = { name: "John", age: 30 };
const n = "name"

console.log(person[n]); // John
console.log(person["age"]);  // 30

 
 
3-3. 속성 할당

if, 속성이 이미 객체에 존재하는 경우 → 새로운 값으로 변경됨
if, 속성이 객체에 없는 경우 → 새 속성이 객체에 추가됨

const person = { name: "John", age: 30 };

person.age = 45; //age의 값이 45로 변경됨
person.job = "teacher"; //새로운 속성이 추가됨

 
 
3-4. 속성 삭제
- delete 연산자를 사용하여 속성을 삭제할 수 있다.

delete person.job;

 
 
3-5. 중첩된 객체
※ 객체 중첩시에는 객체 사이를 쉼표(,)로 구분해주는 것을 잊지말자.

const library = {
  name: "City Library",
  address: {
    street: "123 Library St.",
    city: "Booktown",
    zipCode: 12345
  }
}

 
 
3-6. 메소드
- 객체에 저장된 함수를 '메소드'라고 부른다.

let robotAssistant = { //robotAssistant라는 객체 안에 assist 메소드가 저장되어 있다.
  assist() {
    console.log("Activating assistance mode. How can I help you today?");
  }
};

 
 
3-7. this 키워드

- 메소드 내부에서 this를 사용하면, 그 객체의 다른 속성이나 메소드에 접근할 수 있다.

const student = {
  name: 'Emily',
  introduce() {
    return `Hi, I am ${this.name}`; //this 키워드 필수
  }
};

 
 
3-8. getter & setter

- getter: 내부 속성의 값을 반환할 수 있음
- setter: 속성 값을 안전하게 재할당할 수 있음

정수가 저장되어 있는 변수에 실수로 문자열을 재할당하려고 하면, 에러가 발생할 수 있다.
이와 같은 실수를 방지하기 위해 객체 안에서 setter 메소드를 사용해 타입 체크를 하여, 값이 올바른 타입인지 확인한 후 속성을 재할당할 수 있다. 또한 getter 메소드를 사용해 속성 값을 반환할 때도 유효성 검사를 추가하거나, 값을 읽기 전용으로 만들어 안전하게 값을 관리할 수 있다.

∴ 따라서, getter & setter를 함께 사용하면 속성 값을 안전하게 읽고 수정하는 방식을 모두 관리할 수 있다.

const person = {
  age: 25, // 속성

  // Getter: 나이 반환
  getAge() {
    return this.age;
  },

  // Setter: 나이를 안전하게 설정
  setAge(newAge) {
    if (typeof newAge === 'number' && newAge >= 0) {
      this.age = newAge;
    } else {
      console.error('Error: Age must be a positive number.');
    }
  }
};

// Getter 사용
console.log(person.getAge()); // 25

// Setter 사용 - 올바른 값
person.setAge(30);
console.log(person.getAge()); // 30

// Setter 사용 - 잘못된 값
person.setAge(-5); // Error: Age must be a positive number.

 

---

 

quiz
1. (   ), (   ) 메소드는 원본 배열을 변경하지 않고 새로운 배열을 반환한다.
 
2. 배열의 각 요소에 대해 주어진 함수를 한 번씩 호출하는 메소드는 (   ) 이다.
 
3. 객체에 저장된 함수를 (   )라고 부른다.
 
4. (   ) 연산자를 사용하여 객체의 속성을 삭제할 수 있다.
 
5. 메소드 내부에서 (   ) 를 사용하면, 그 객체의 다른 속성이나 메소드에 접근할 수 있다.
 
6. 키의 값에 접근하는 방법은 총 2가지로, (   ) 연산자를 활용하는 방법과 (   ) 표기법을 활용하는 방법이 있다.
 
7. 내부 속성의 값을 반환하는 메소드는 (   )이고, 속성 값을 안전하게 재할당할 수 있도록 해주는 메소드는 ( )이다.
 

programming quiz
8. 다음 배열에 담긴 숫자들을 한 줄씩 출력하도록 forEach() 메소드를 사용하여 코드를 작성하시오.

const numbers = [10, 20, 30, 40, 50];

 
9. 'This is a Tesla S, and the battery level is at 85%.'의 출력문이 나오도록 아래의 코드를 수정하시오.

const car = {
  brand: "Tesla",
  model: "S",
  batteryLevel: 85,
  provideInfo() {
    return //채우기
  }
};

//채우기

 
 

---

 
answer
1. map(), filter()
2. . ForEach()
3. 메소드
4. delete
5. this
6. '.', 대괄호
7. getter, setter
8. 

const numbers = [10, 20, 30, 40, 50];

numbers.forEach((number) => {
  console.log(number);
});

9.

const car = {
  brand: "Tesla",
  model: "S",
  batteryLevel: 85,
  provideInfo() {
    return `This is a ${this.brand} ${this.model}, and the battery level is at ${this.batteryLevel}%.`;
  }
};

console.log(car.provideInfo());
// 출력: This is a Tesla S, and the battery level is at 85%.

 
 
 

Corner node.js 2팀

Editor : 푸짐바오