[JavaScript] 01. 변수

 

교재 : 비전공자를 위한 프로그래밍 입문 - 01. 변수

# 변수를 이용하여 도형 만들기

베리어블(variable) : 변수

공통(반복적)으로 사용되는 것들을 변수로 뽑아내서 관리/수정 쉽게 만들기!

 

전역 변수 : 맨 윗줄에 선언하여 하위 모든 함수에도 적용됨

지역 변수 : 선언한 함수 중괄호 안에 있는 부분만 적용됨

 

 

[변수 정의(define)]

let '변수이름' = 값 or '문자' (초기 값);

 

프로그래밍에서 등호(=)는 초기화(initilize)를 의미.

 

[변수 대입(assign)]

 변수 정의로 설정한 초기 값을 코드 도중에 변경하고 싶을 때 사용.

let으로 따로 선언하지 않고 바로 변수의 값을 입력한다.

변수명 = 값;

 

[변수 선언(declare)]

변수명을 선언은 했으나 초기 값 설정하지 않았을 때는 변수의 선언이라고 한다.

let 변수명;

 

 

---

 

[예제]

let diam = 30; //전역변수로 선언
let y = 60;

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

function draw() {
  fill(0, 187, 161);
  noStroke();
  

  circle(100, y, diam);
  circle(200, y, diam);
  circle(300, y, diam);
}

▽ 실행 화면 ▽

 

 

 

---

 

# width와 height 변수

p5.js에서 선언하지 않아도 사용할 수 있는 변수.

 

· width : 캔버스의 가로 너비

· height : 캔버스의 세로 너비

*이 두 가지를 사용하려면 반드시 'createCanvas'함수를 호출한 뒤에 사용할 수 있다. (캔버스의 크기가 입력되어야지 가능)

 

[예제]

function setup() {
  createCanvas(400, 400);
  background(200);

}

function draw() {
  circle(width / 2, height / 2, 50); // 연산을 이용하여 크기 조정할 수 있음
  fill(254, 165, 176);
}

▽ 실행 화면 ▽

 

---

 

# 상수(constant variable)

콘스탄트 베리어블(constant variable) : 상수 (변하지 않는 수)

 

 

[상수 정의]

const '상수이름' = 값 or '문자' (초기 값);

한 번 상수로 정의하면 값을 다시 대입할 수 없고, 대입하려고 하면 오류가 발생한다.

보통 상수 이름을 정할 때는 대문자로 표기하는 게 관례이다.

 

 

---

 

# 변수와 상수의 명명 규칙

• 밑줄(_)과 달러 기호($) 이외의 문자는 사용할 수 없다.
• 가장 첫 번째 자리에는 숫자를 사용할 수 없습니다. (2번째 문자부터는 사용 가능함)
• 이미 존재하는 변수명이나 상수명, 함수명 등은 선언할 수 없다.
• JavaScript로 예약된 키워드를 사용할 수 없다. (예 : let, const, function 등…을 예약어(reserved word)라고 한다.)