[JavaScript] 06. 배열

교재 : 비전공자를 위한 프로그래밍 입문 - 06. 배열

#배열(Array) 

배열이란? 여러 개의 값을 변수에 담는 것.

let 배열명 = [값, 값, ...];

· 요소(element/엘리먼트) : 배열의 값

· 인덱스(index) : 몇 번째 요소를 이야기하는지 지정해주는 카운트 값 (인덱스는 0부터 카운트한다.)

· 렝스(length) : 배열의 길이. 요소의 수가 몇 개인지 계산해준다.

 

 

[예제]

배열을 통해 반복문으로만은 그릴 수 없는 도형을 그릴 수 있다.

let diam = [30, 15, 70, 50, 25, 90];

function setup() {
  createCanvas(600, 200);
  background(102, 103, 171);
  noLoop();
}

function draw() {
  strokeWeight(2);

  for (let i = 0; i < diam.length; i += 1) {
    circle(50 + i * 100, height / 2, diam[i]); //원의 크기를 배열 순서따라 넣어줌
  }
}

▽ 실행화면 ▽

 

 

 

 

---

 

#배열 조작

01. '변수명[인덱스 번호]' 인덱스 번호를 지정하여 배열의 값을 나중에 다시 재선언해 줄 수 있다.

let arr = [0, 1, 2];
arr[5] = 5;
print(arr); // [0, 1, 2, undefined, undefined, 5]

 

02. '변수명.push'라는 메소드를 이용하여 배열 맨 마지막 순서에 값을 넣어줄 수 있다.

let arr = [0, 1, 2];
arr.push('end');
print(arr); // [0, 1, 2, 'end']

 

 

---

 

#빈 배열과 난수

 

빈 배열 : 아래 형태로 배열을 비워놓고 나중에 요소를 결정할 수 있다.

let 배열명 = [];

난수 : 코드 실행할때마다 랜덤으로 값을 결정하는 것.

random(최소값, 최대값)

 

[예제]

let arr = []; // arr를 빈 배열로 선언

function setup() {
  createCanvas(400, 100);
  background(102, 103, 171);
  noLoop();
}

function draw() {
  strokeWeight(2); //선 두께

  // 난수로 배열값 생성 (원의 x좌표)
  for (let i = 0; i < 10; i += 1) {
    arr.push(random(0, width)); // 난수를 배열에 추가
  }

  // 채우기 밝기를 무작위로 설정
  let val = random(0, 242); // 난수를 변수에 할당
  fill(val);

  // 난수로 생성된 위치에 원 그리기 
  for (let i = 0; i < 10; i += 1) {
    circle(arr[i], height / 2, 50);
  }
}

▽ 실행화면 ▽

실행버튼 누를 때 마다 원의 x위치와, 원 채우기 밝기가 랜덤으로 설정 됨.