p5js로 시작하기 [8]

이 글에는 이해를 돕기 위한 거짓말이 조금 포함되어 있습니다.

개체 생성 반복하기

대표적인 반복문으로 for()문이 있습니다.

기본 모양새는 이렇게 되어있습니다.

// 기본 구성
for (let i = 0; i < 100; i++) {
  // 반복 행동 코드 블럭
  console.log(i, '번째 반복 시행.');
}

이렇게 구성되어 있구요,

for (<변수 선언>; <조건문>; <변형>) {
  <코드 블럭>
}

이 순서로 동작합니다.

for ( (0) ; (1) ; (3) ) {
  (2)
}

구성 따라가기

위 예시에 있는 for()문을 따라가면

1. 변수 i를 선언하고, i = 0 으로 설정합니다.
2. i(0) < 100 인가요? - true
3. 반복 행동 코드 블럭을 실행하여 0번 반복 시행. 을 콘솔에 출력합니다.
4. i++ 처리 해줍니다. (이제 i = 1)
5. i(1) < 100 인가요? - true
6. 반복 행동 코드 블럭을 실행하여 1번 반복 시행. 을 콘솔에 출력합니다.
7. i++ 처리 해줍니다. (이제 i = 2)
   …
8. i(99) < 100 인가요? - true
9. 반복 행동 코드 블럭을 실행하여 99번 반복 시행. 을 콘솔에 출력합니다.
10. i++ 처리 해줍니다. (이제 i = 100)
11. i(100) < 100 인가요? - false
12. 반복문 이후 코드를 실행합니다

이런식으로, 변수 선언은 시작할 때 한번만 진행한 후 조건이 거짓이 될 때까지 코드 블럭을 반복시행합니다.
이 때, 코드 블럭에서 반복하는 행동을 이번 프레임 안에 전부 실행합니다. 이러한 특성으로 인해, 1프레임(보통 1/60초) 안에 반복문이 해결되지 않으면 프로그램이 멈추거나 화면이 두둑두둑 끊기는 현상을 마주할 수 있습니다.

코드 블럭과 지역 변수

함수는 무엇인가 글에서 코드 블럭 얘기를 하며 코드의 지역 구분이라는 표현을 썼었습니다. 지금이 설명할 적기인 것 같군요.

우리가 중괄호 {}를 사용하여 코드를 작성하면, 중괄호 안쪽에는 일종의 지역이 형성됩니다.

var TargetNumber = 20;
let TestThis = 'Test';

function TestThis() { // <-- 이 지역은 함수
  if (TargetNumber < 20) { // <-- 이 지역은 조건문 발동 부분
    let ThisNumber = 10;
    var Variable = 'Text';
    console.log('숫자가 작습니다');
  }
}

지역 내에도 변수를 만들 수 있는데 이런 경우 지역 변수라고 부르며 그 지역을 벗어나는 경우 변수가 삭제됩니다. 자바스크립트의 경우 변수 선언하는 방식이 var와 let 두가지가 있는데

var: 지역과 무관하게 사용할 수 있음 (전역 변수)
let: 해당 지역을 벗어나면 사용할 수 없음 (지역 변수)

• 둘 다 변수 종류에 자유로움

이렇게 동작합니다.
이제 다시 반복문 코드를 보면

// for()문의 선언부에서 생성된 i 는
for (let i = 0; i < 100; i++) {
  // 이 코드 블럭을 반복할 때까지만 사용 가능하고
  console.log(i, '번째 반복 시행.');
}
// 코드 블럭을 벗어나면 사용할 수 없습니다. (선언되지 않은 변수라고 오류 발생)

다음 글에서 계속..