우린 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변수의 값을 바꿔도 말이에요 와 이제 알겠죠? 이제 여러분은 변수에 대해서 완벽한 전문가가 되었어요 축하해요!