변수

변수란?

  • 이름표와 같다.

  • 변수를 만드는 문법이 있다.

  • let, const 라는 약속된 단어를 써서 변수를 만들 수 있다.

let 변화가능한변수;        // mutable
const 고정된변수 = 10;  // immutable

변수를 만드는 방법 (1)

  • 이름을 만들었으면 얘가 누구인지를 정해야 한다.

  • = 이라는 기호: 왼쪽 변수에게 <= 오른쪽 값을 넘긴다.

  • 결론적으로는 왼쪽과 오른쪽의 값이 동일해진다는 이야기.

let 사이즈 = 1;
const 가로위치 = 10;

변수를 만드는 방법 (2)

let 유연한_변수;    // 일단 이름부터 만들고, (선언 declaration)
유연한_변수 = 10;   // 나중에 값을 넣어도 되고,  (할당 initialization)
유연한_변수 = 20;   // 값을 바꿔도 된다. 예) 마우스 위치 값

const 빡빡한_변수 = "단호박"; // 처음부터 값을 지정해줘야 한다.

변수와 콘솔

  • console.log() 함수는 우리가 코드를 짜면서 수많은 변수의 값, 에러를 확인할 때 매우 유용하다.

  • openprocessing 에디터에 먼저 아래와 같이 작성해보자.

let ellipseWidth = 50 / 2;       // 숫자, 정수, 소수, 계산도 가능.
let ellipseColor = “#0496ff”;   // 문자열, 스트링
let coolors1 = [ ... ];          // 배열, 리스트. Array.
console.log(ellipseWidth);
console.log(ellipseColor);
console.log(coolors1);

  • 브라우저 콘솔에서 똑같이 실행해보자.

    • 브라우저 창을 클릭한 뒤, F12 (윈도우) 혹은 fn + F12 (맥)

    • 중지 아이콘을 클릭해서 기존 log를 지운다.

    • 위 코드를 순서대로 입력해보자. 여기서는 자바스크립트를 바로 바로 실행해준다.

변수 작명과 코멘트

  • 변수의 이름은 내가 이해할 수 있고, 다른 사람이 읽어도 이해할 수 있게.

  • 코멘트로도 코드를 설명할 수 있지만, 우선은 이름을 잘 지어주는 연습을 병행하자.

    • 코멘트: // 혹은 커맨드 키 + / 혹은 컨트롤 키 + / 혹은 /* */

    • 코멘트하면 비활성화 (코드 실행 안됨). 안하면 활성화 (정상 실행).

Previousp5js 시작하기 (openprocessing)Next함수

Last updated