변수에 대해 더 알아보기 (비디오 버전)

우린 Winston의 눈의 크기에
대한 멋진 변수를 만들었어요

이건 아주 유용했어요

왜냐하면 Winston의
눈의 크기를 변경하고 싶을 때

일일이 변수를
쓰지 않아도 되니까요

기억나죠?
전에는 크기를 바꿀 때마다

같은 숫자를
네 번 적어줘야 했어요

하지만 변수를 이용하면
그 숫자들을 대신할 수 있을까요?

숫자들이
같지 않다고 해도요?

만약 Winston을
조금만 움직이고 싶다면 어떨까요?

x좌표를 각각
바꿀 수도 있지만

그게 항상
같지는 않아요

그러니까 그 숫자 전체를
어떤 변수로 대체할 수는 없어요

하지만!

변수에 수를 할당하면
그 변수를

마치 그 숫자처럼
사용할 수 있어요

즉 변수를 수학적으로
표현할 수 있다는 거에요

이렇게 해 볼까요?
변수를 만들어 봐요

먼저 Winston의
x좌표로요

var x를
선언해요

간단하죠

이제 Winston의 얼굴의
x 좌표에 변수를 주도록 해요

얼굴은 x좌표상
200에 그려져 있네요

그러므로 var x는
200 이 되겠네요

이제 이 숫자를 새로운 변수인
x로 표현 할 수 있어요

그리고 x의 값을 변화할때
Winston의 얼굴이 변화함을 볼 수 있어요

하지만 눈과 입은 빼고
움직여요

이걸 고치려면
눈과 입의 위치를

얼굴의 위치에 대해
상대적으로 주도록 해보죠

x좌표는 다른 원들의
중심을 나타내요

그러니까 얼굴은 중심이
200인 곳에 그려지겠죠

이제 그럼 왼쪽 눈을
먼저 고려해봐요

이 원이
왼쪽 눈 이네요

좌표 상 150에 그려진 것을
볼 수 있어요

여기가
150이에요

150은 200보다
50만큼 작으니까

얼굴이 어디에 있든지
왼쪽 눈은 50을 뺀 위치에 있어요

그 어디에 있는 곳이 x 이고
얼굴의 -50의 지점에 있어요

그리고 이제
x변수 값을 조절하면

눈이 얼굴과
함께 움직이게 돼요

그러면 반대편 눈도
해볼게요

오른쪽 눈은 300의 위치에
그려져 있어요

여기서 볼 수 있듯이
300은 여기네요

그리고 300은 200에서
100을 더하면 돼요

그러므로 눈은 얼굴이 어디있든지
100을 더해주면 되겠군요

그러므로
x+100이 됩니다

이제 입만
고려해주면 되겠군요

입은 250인 지점에
그려져 있어요

여기쯤 이에요
250인걸 아니까

그리고 250은
200에 50을 더한 거니까

이건 얼굴이
어디에 있든지

x+50이
되네요

이제 이러한 숫자들을
다 지워도 돼요

x의 값을 변화시킬때마다
전체 얼굴이 움직일 거에요

우와!

끝내기 전에 변수에 대해
조금 더 배워보도록 할게요

var x를 사용하는
변수를 만들면

원할 때 마다
값을 할당할 수 있어요

x에 198이라는 값을
준 후에

x를 300으로
만들 수도 있고

아니면 150으로
만들 수도 있어요

그리고 이 이후부터는
컴퓨터는 x의 값을

마지막에
할당한 값으로 생각해요

그러니까
이 경우에는 150이네요

하지만 여러분은 var 를 한 변수에
한 번만 사용해야 해요

만일 여기 이 부분에
var x가 150을 갖는다고 해버리면

새로운 변수 x를
만들게 된 거에요

전에 있던 변수 x는
아예 없어지게 된 거에요

위의 이 변수들은
모두 다 사라지게 돼요

그리고 컴퓨터는 오직
새로운 변수만을 사용할 거에요

가끔은 이런 끔찍한 일 없이
사용할 수 있을 지 몰라도

추천해드리고
싶지는 않네요

지금부터 저는 한번만 사용할거에요
var x 는 150으로요

이제 편하게 이 그림을
화면 밖으로 움직일 수 있어요

다음 주제로
넘어갈 수 있게 말이죠

변수에 어떤 값을
지정하게 될 때

그 변수는
안전한 곳에 저장돼요

사실 '='의 왼쪽에
위치해야

진정한 변수 그 자체로
여길 수 있어요

왜냐하면
이 값을 컴퓨터가

'변수'라고
생각하게 되니까요

다른 위치에 있는 값은
그냥 '값'이라고 생각하게 될 거에요

다음과 같이 한다고
할지라도 말이죠

var x는
10이고

x는
x에요

오
헷갈리네요

왼쪽의 x를
먼저 봅시다.

이 x는
독립적인 변수에요

커질 수도 있고
변화할 수도 있죠

하지만 오른쪽 값은
그냥 '10'이에요

슬프게도요
하지만 이걸

정말 유용하게
사용할 수 있어요

x는
x+1이라고 해봐요

왼쪽의 값은
안전한 장소에 있는 변수이고

오른쪽에도
같은 변수가 있지만

알다시피 여기서의 값은
그냥 숫자일 뿐이죠

그냥
'10'이에요

머릿속으로 생각해보면
x는 10+1이 되는거에요

이 말은 x는
11이라는거죠

그러므로 이 전체 수식은
x는 11이라는 뜻이에요

그러므로 이제부터
x의 값은 11이 돼요

다른 변수를 이 방정식에
넣으면 어떻게 되는지 볼까요?

var x를
10로 하고

var y는 20

x 는 y

어머나

그리고 y는
7이라고 해요

좋아요
제가 알고 싶은 것은

x의 값은
무엇이 되는 지에요

확인해봐요

이 수식에서
새로운 변수 x를 만들어서

그리고 10의 값을
지정했어요

따라서 x의 값은
10이 됐어요

이 수식에서는
새로운 변수 y를 만들어서

20이라는 값을
지정했어요

x에는 아무 것도
하지 않았으니까

x의 값은
여전히 10이에요

여기서는
x=y라고 했어요

조금 헷갈리지만
생각해보면

우리는 이 변수 중에
단 하나만

안전한 장소에
있다는 사실을 알고 있어요

그리고
다른 변수는

마치 숫자처럼
다뤄지게 돼요

이걸 머릿속으로
생각해보면

y를 20이라는 값으로
바꿔 생각할 수 있어요

그럼 이 수식의 정확한 의미는
x는 20이 되겠죠

따라서 x의 값은
20이 되겠네요

이 수식에서는
y는 안전한 장소에 있어요

하지만 별로
헷갈리진 않아요

오른쪽에
숫자가 있기 때문이죠

하지만 궁금한 게 있어요
여기 아래 y값을 변화시키면

그게 위에 있는
x의 값을 변화시킬까요?

답은
절대 아니라는 거에요

기억해야 할 것은
이 위 쪽에서는

y는 단지 숫자로
취급된다는 거에요

컴퓨터는 이게 변수라는 사실을
완전히 무시할 것이고

바뀔 수 있는 값이란 걸
잊고요

그리고 이렇게
그냥 얘기할 거에요

"이 y?
이게 진짜 뜻하는 값은 20이지"

그러므로 이 부분에서는
x에 숫자를 할당하는 것이지

변수를
할당하는 게 아니에요

y의 값인 20을
할당하는 거에요

즉 이 말은 x의 값은
여전히 20이라는 거죠

마지막 수식에서
y변수의 값을 바꿔도 말이에요

와
이제 알겠죠?

이제 여러분은 변수에 대해서
완벽한 전문가가 되었어요

축하해요!