[노드 1팀] 2주차. JavaScript 반복문(Loop), 반복자(Iterator), 객체(Object)

1. 반복문 (Loop)

 for 문 

for 문은 초기화, 조건식, 반복문으로 구성되며 세미콜론(;)으로 분리된다.

• 초기화 : 반복문을 시작하고 반복자 변수를 선언한다.
• 조건식 : 논리연산, true/false 등의 변수를 사용한다. 조건식이 true인 동안 작업문을 반복한다.
• 반복문 : 반복 후 처리될 작업이다. 주로 변수를 증감한다.

for (let counter = 0; counter < 4; counter++) {
  console.log(counter);
}

 

for 문을 이용해 배열 안의 요소들을 출력하고 싶다면 length 속성을 사용할 수 있다.

const animals = ['Grizzly Bear', 'Sloth', 'Sea Lion'];
for (let i = 0; i < animals.length; i++){
  console.log(animals[i]);
}

 

 while 문 

while 문에서는 변수를 반복문 전에 선언하며, 괄호 안의 조건식이 true인 동안 작업문을 반복한다. 

** 주로 반복 횟수를 알 수 없을 때 주로 이용한다.

let counterTwo = 1;
while (counterTwo < 4) {
  console.log(counterTwo);
  counterTwo++;
}

 

 do-while 문 

do-while 문은 코드 블럭을 최소 한 번 실행한 다음 조건식이 더 이상 충족되지 않을 때까지 작업문을 반복한다.

let countString = '';
let i = 0;

do {
  countString = countString + i;
  i++;
} while (i < 5);

 

 break 문 

break 문은 원래 중지 조건이 충족되지 않았음에도 반복을 중지하고 싶을 때 이용한다.

break를 이용하면 현재 반복문에서 벗어날 수 있다.

for (let i = 0; i < 99; i++) {
  if (i > 2 ) {
     break;
  }
  console.log('Banana.');
}

 

 

2. 반복자 (Iterator)

반복을 돕는 JavaScript 내장 메소드를 반복자 혹은 반복 메소드라고 한다. 

반복 메소드를 사용하여 배열을 반복하는 과정을 단순화하는 방법을 알아볼 것이다.

 

 함수를 변수에 할당 

함수의 이름이 긴 경우나 함수가 반복적으로 호출되어야 하는 경우, 함수를 적절한 이름의 변수에 다시 할당할 수 있다.

 

※ 함수명 뒤에 괄호를 붙이지 않는다. 함수 호출 시 반환되는 값이 아닌, 함수 자체의 값을 할당해야 하기 때문이다. 

const announceThatIAmDoingImportantWork = () => {
    console.log("I’m doing very important work!");
};

const busy = announceThatIAmDoingImportantWork;

busy();

 

 매개변수로서의 함수 

매개변수로 전달되는 함수를 콜백 함수라고 한다. 콜백 함수는 괄호 없이 함수명만 입력하여 함수 자체를 전달한다.

const higherOrderFunc = param => {
  param();
  return `I just invoked ${param.name} as a callback function!`
}
 
const anotherFunc = () => {
  return 'I\'m being invoked by the higher-order function!';
}

higherOrderFunc(anotherFunc); // anotherFunc을 콜백 함수로써 전달

 

 

 

 

 .forEach() 메소드 

배열의 각 요소에 대해 동일한 코드를 실행한다.

 

다음과 같이 => 를 이용하거나, 콜백 함수로 사용할 함수를 미리 정의할 수도 있다.

groceries.forEach(groceryItem => console.log(groceryItem)); // 화살표 함수 이용

function printGrocery(element){ // 함수 미리 정의
  console.log(element);
}

groceries.forEach(printGrocery);

 

 .map() 메소드 

배열의 각 요소에 대해 코드를 반복하고 해당 요소를 콜백 함수에 전달한다. 그 결과로, 새 배열을 반환한다.

기존 배열은 변경되지 않으며, 반환되는 배열은 새로운 배열이다.

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

const bigNumbers = numbers.map(number => {
  return number * 10;
});

console.log(numbers); // Output: [1, 2, 3, 4, 5]
console.log(bigNumbers); // Output: [10, 20, 30, 40, 50]

 

 .filter() 메소드 

.filter() 메소드는 .map() 메소드와 같이 새 배열을 반환한다. 원래 배열에서 특정 요소를 필터링한 후 배열의 요소를 반환한다.

이때, 반환된 요소는 새 배열에 추가된다.

const words = ['chair', 'music', 'pillow', 'brick', 'pen', 'door']; 

const shortWords = words.filter(word => {
  return word.length < 6;
});

console.log(words); // Output: ['chair', 'music', 'pillow', 'brick', 'pen', 'door']; 
console.log(shortWords); // Output: ['chair', 'music', 'brick', 'pen', 'door']

 

 .findIndex() 메소드 

배열에서 요소의 위치를 찾고 싶을 때 이용한다. 조건식을 만족하는 첫 번째 요소의 인덱스 값을 반환한다.

** 만약 조건식을 만족하는 요소가 없을 경우, -1을 반환한다.

const jumbledNums = [123, 25, 78, 5, 9]; 

const lessThanTen = jumbledNums.findIndex(num => {
  return num < 10;
});

console.log(lessThanTen); // Output: 3

 

 .reduce() 메소드 

배열의 요소를 반복한 후 단일 값을 반환하여 배열 요소 개수를 줄인다.

콜백 함수에는 누적 값, 현재 값 매개변수가 있다. 누적 값은 마지막 반복에서 반환된 값이고 현재 값은 현재 요소이다.

 

** 두 번째 매개변수를 이용하여 초기 값을 설정할 수도 있다.

• 초기 값 없는 경우 - 누적 값은 배열의 첫 번째 요소로, 현재 값은 배열의 두 번째 요소로 시작된다.
• 초기 값 있는 경우 - 누적 값은 초기 값으로 시작되며, 현재 값은 배열의 첫 번째 요소로 시작된다.

const numbers = [1, 2, 4, 10];

const summedNums = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue
}, 100)  // <- Second argument for .reduce()

console.log(summedNums); // Output: 117

 

 

3. 객체 (Object)

 객체 리터럴 생성 

중괄호({})를 사용하여 지정한다. 객체 안의 데이터는 키-값 쌍으로 구성되며 각 키-값 쌍은 쉼표(,)로 구분한다.

특수 문자가 없는 키의 경우 따옴표(' ')를 생략할 수 있다.

 속성 접근 

① ' . ' 으로 접근하기

 객체 이름. 속성 이름(키)로 표현한다.

let spaceship = {
  homePlanet: 'Earth',
  color: 'silver'
};
spaceship.homePlanet; // Returns 'Earth',
spaceship.color; // Returns 'silver',

 

② ' [ ] ' 사용하기

 속성 이름(키)를 문자열로 전달한다. 숫자, 공백이나 특수 문자가 포함된 키에 접근할 때는 [ ] 를 사용해야 한다.

let spaceship = {
  'Fuel Type': 'Turbo Fuel',
  'Active Duty': true,
  homePlanet: 'Earth',
  numCrew: 5
};
spaceship['Active Duty'];   // Returns true
spaceship['numCrew'];   // Returns 5

 

 속성 재정의 

객체는 변경 가능하므로 생성 후 속성을 다시 정의할 수 있다.

• 해당 속성이 이미 존재하는 경우 - 기존 값이 새로 할당된 값으로 대체된다.
• 해당 속성이 없는 경우 - 객체에 새 속성이 추가된다.

delete 연산자를 사용하여 객체에서 속성을 삭제할 수 있다.

delete spaceship.color;

 

 메소드 

객체에 저장된 함수를 말한다. 객체 메소드는 객체명. 메소드명() 으로 호출한다.

const alienShip = {
  invade: function () { 
    console.log('Hello! We have come to dominate your planet. Instead of Earth, it shall be called New Xaculon.')
  }
};
alienShip.invade();

 

 

 

 참조에 의한 전달 

객체는 참조에 의해 전달된다. 객체에 할당된 변수를 함수의 매개변수로 전달하면, 해당 객체를 보유한 메모리 공간을 가리킨다.

 

 객체 반복 

for ... in을 이용해 객체의 요소를 반복할 수 있다. for ( let 변수명 in 객체명.속성명 ) { } 형태로 사용한다.

let spaceship = {
  crew: {
    captain: { 
      name: 'Lily', 
      degree: 'Computer Engineering', 
    },
    'chief officer': { 
      name: 'Dan', 
      degree: 'Aerospace Engineering', 
    },
    medic: { 
      name: 'Clementine', 
      degree: 'Physics', 
    }
  }
}; 

for (let crewMember in spaceship.crew) {
  console.log(`${crewMember}: ${spaceship.crew[crewMember].name}`);
}

 

 this 키워드 

this를 이용하여 객체 내부에서 객체를 참조하고 해당 속성에 접근할 수 있다.

const goat = {
  dietType: 'herbivore',
  makeSound() {
    console.log('baaa');
  },
  diet() {
    console.log(this.dietType);
  }
};

 

 화살표 함수와 this 

JavaScript 화살표 함수에는 this가 없으므로 일반적으로 객체 메소드를 작성하기 적합하지 않다.

메소드 안에 this를 사용할 경우 자신을 호출한 객체가 아닌, 함수 선언 시점의 상위 스코프인 전역객체를 가리키게 된다.

 

* 자세한 내용 아래 링크 참고

[JavaScript] 화살표 함수와 this 바인딩

 

 getter & setter 

getter : 객체의 내부 속성을 가져오고 반환한다.

setter : 객체의 기존 속성을 재할당한다.

const person = {
  _firstName: 'John',
  _lastName: 'Doe',
  _age: 37,
  get fullName() {
    if (this._firstName && this._lastName)
      return `${this._firstName} ${this._lastName}`;
    else 
      return 'Missing a first name or a last name.';
    },
  set age(newAge){
    if (typeof newAge === 'number')
      this._age = newAge;
    else 
      console.log('You must assign a number to age');
    }
  }
};

 

 Factory 함수 

 객체의 인스턴스들을 빠르게 생성하고 싶을 때 사용한다. 함수의 반환 값을 변수에 할당할 수 있다.

const monsterFactory = (name, age, energySource, catchPhrase) => {
  return { 
    name: name,
    age: age, 
    energySource: energySource,
    scare() {
      console.log(catchPhrase);
    } 
  }
};

const ghost = monsterFactory('Ghouly', 251, 'ectoplasm', 'BOO!');

 

 

 

---

Quiz

1. for 문을 이용해 배열 안의 요소들을 출력할 때 ( length ) 속성을 사용할 수 있다.

2. 주로 반복 횟수를 알 수 없을 때 사용하는 반복문은 (  while  ) 문이다.

3. 배열의 요소를 반복한 후 단일 값을 반환하여 배열을 줄이는 메소드는 ( reduce() ) 메소드이다.

4. 실행 결과로 새로운 배열을 반환하는 메소드는 (  map() ) 과 (  filter()  ) 메소드이다.

5. 객체의 속성에 접근할 때 (  .  ) 와 (  [ ]  ) 를 사용하여 접근할 수 있다.

6.  (  setter ) 메소드는 객체의 기존 속성을 재할당한다.

7. (  factory ) 함수를 사용하면 객체의 인스턴스들을 빠르게 생성할 수 있다.

 

 

Programming Quiz

1. map() 메소드를 이용하여 주어진 배열 요소의 첫 글자를 연결해 출력하시오.

const words = ['coconut', 'option', 'rainbow', 'number', 'elephant', 'rat'];

 

 

2. person 객체를 생성하여 name, age, job 속성값을 채우고 getter 메소드를 이용하여 age 값이 숫자인 경우, 그 값을 반환하여 출력하시오.

 

 

 

 

 

 

 

---

 

1번 답

const words = ['coconut', 'option', 'rainbow', 'number', 'elephant', 'rat'];

const secretMessage = words.map(word => { 
    return word[0]; 
});

console.log(secretMessage.join(''));

 

2번 답

const person = {
    name: 'Haewon',
    age: 21,
    get printAge() {
        if(typeof(this.age) === 'number')
            return `I'm ${this.age} years old.`
        else
            return '해당 속성값은 숫자가 아닙니다.'
    }
};
console.log(person.printAge);

 

 

 

 

---

출처 : codecademy Learn Javascript

 

Corner Node.js 1

Editor : Oze