• #1-6 Your first JS Variable(변수!)

    2021. 8. 22.

    by. 고구마달랭이

     

    안녕하세요!👻 오늘 우리가 배울 첫 번째 주제는 바로...

     

    변수. Variables 입니다. 이게 무슨 뜻일까요? 변경되거나 변경될 수 있는 것을 말합니다.
    예를 들면 수학으로 한 번 생각해 봅시다.

    변수가 뭐라고 생각하나요? 제 생각에 변수는 a가 될 수 있습니다. a는 바뀔 수 있어요.

     


    아무것도 아닌 a에 8을 넣어 줄 것입니다. 그리고 221로 바꿀거예요. 64051015987로도 바꿀 수 있어요. a는 존재하지 않았지만, 변수로 a를 선언해 줌으로써 a에는 값이 생기는 겁니다. 이게 변수라는 겁니다.
    b는 a - 5라는 변수도 있네요. 계산해 봅시다. b는 어떤 값이 될까요?

    우리는 매우 게으릅니다. 왜냐하면 프로그래밍은 게으른 사람을 위한 것이기 때문입니다. 그러니까 그냥 출력을 해봅시다.😛 console. log... 우리는 이게 무슨 뜻인지 이해해야 합니다. 괄호를 왜 써야 하는지, 이 '.'을 왜 넣어야 하는지. log() 대신에 말입니다. 나중에 모두 이해하게 될 것입니다.

     


     b를 console.log 하겠습니다. b의 값이 알고 싶으니까. 왜냐면 저는 이 계산을 하기 싫거든요. JavaScript가 해주길 원해요. 좋아요. 실행해볼까요? 216이 나왔네요. 흥미롭네요. 완전 멋져요. 난 단지 뭔갈 적었을 뿐인데, 언어가 이해했어요.

    축하합니다. 여러분의 첫 변수예요! 엄청 쉽죠. JavaScript로 변수를 만드는 건 쉬워요. 하지만 이건 아주 좋은 JavaScript 코드는 아닙니다. 왜냐면 여러분도 알다시피 JavaScript는 프로그래밍 언어입니다. 프로그래밍 언어는 일반적인 언어처럼 따라야 하는 규칙과 문법이 있습니다.

    JavaScript의 경우에는 이런 문제점을 발견했습니다.
    JavaScript의 문제점은 당신이 나쁜 것을 하는 걸 허용합니다. 그리고... 자식을 훈육하지 않는 아빠같습니다.

    예를 들어보겠습니다.
    당신은 a를 저렇게 쓸 수 있어요. 그러면 JavaScript는 당신을 최대한 이해하기 위해 노력할 것입니다. 당신을 판단하지 않고, 단지 당신을 사랑할 것입니다. 당신을 이해하려 할 것이고, 실행하기 위해 최선을 다할 것입니다.
    당신이 입력한 것들을 말이죠. 심지어 그게 좋은 문법이 아니더라도요.

    그래서 만약 우리가 문법을 철저하게 지켜서 만들려면, 몇 가지를 주의하면 됩니다.

    보다시피, 라인 1, 2 그리고 3이 있습니다. 보통 프로그래밍 세계에서는 모든 것이 다른 라인에 있습니다.


    JavaScript가 엉망이라고 생각할 수도 있는데, 이렇게 한 줄에 쓰면 에러가 생깁니다.

     



    보다시피 우리는 모든 것을 다른 라인에 적을 겁니다. 모든 instructions은 각기 다른 라인에 있습니다. 자 이제, 이 라인들을 'Lines'이라고 부르는 대신에 'Expressions'이라고 부를 것입니다. 모든 expressions는 한 줄에 있어야 합니다. 모든 instructions도 한 줄에 있어야 하듯이. 한 expression이 끝나는 곳을 선언하는 방법은 ';'을 문장 끝에 넣는 것입니다.


    CSS에서는 같은 걸 가지고 있습니다. ';'을 CSS 스타일 속성 끝에 넣어야 하죠. JavaScript에서도 똑같습니다. instructions를 제외하고 말이죠. 이건 단지 JavaScript의 문법 중 하나일 뿐입니다. 다른 문법은 변수를 이렇게 시작하면 안 된다는 겁니다. 하면 안 돼요. 왜일까요? 이유는 바로...

    두 종류의 변수가 있기 때문입니다. 우리는 이걸 나중에 볼 것입니다. 하지만 기본적으로 이런 방식은 좋은 방법이 아닙니다. 우리가 필요한 건 이 변수의 시작에 무언가를 더해주는 것입니다. 이거에 대해서는 다음에 이야기 하겠습니다.

     

    변수를 만들고 싶을 때는 기본적으로 먼저 변수를 생성하고, 초기화하고, 사용하면 됩니다. 필요할 때는 생성과 초기화를 동시에 할 수 있습니다. 그리고 나중에 사용할 수 있죠.

     

    그래서 이 경우에는 여기서 a를 생성하고,  숫자 221로 초기화한 것입니다. 이게 초기화입니다. 이걸 같은 라인에서 할 수 있습니다. 그리고 나중에 사용했죠. 규칙은 바로 변수를 초기화하기 전에 앞에다가 이 단어를 넣는 것입니다. 

     

     

    let을 처음에 써줘야 합니다. 다음 글에서는 왜인지 이해할 것입니다. 왜 let을 쓰는지, 다른 게 아닌지를요. 다른 게 하나 더 있습니다. 다음 글에서 이걸 이해할 필요가 있습니다. 그러면 문법을 따라 해봅시다.
    이제 여러분은 '이봐 니꼬,  왜 a - 5 앞엔 let을 안 쓴 거야?'라고 말할 것입니다.

    그렇게 하지 않은 이유는 변수를 초기화하거나 생성할 때에는 let을 써야하지만 이미 생성된 것을 사용할 때는 단지 참조만 하면 되기 때문입니다. a를 2번 라인에서 쓰고 있지만 let을 쓰지 않은 이유는 1번 라인에서 이미 선언했기 때문입니다.

     

    자, 기억해. a를 초기화했고, 또한 생성했고,  그러면 사용할 수 있게 되는겁니다. 왜냐면 우리가 설정한 변수와 변수가 같기 때문이죠. 변수는 가변적이기 때문에 변할 수 있습니다. 우리는  또한 a도 바꿀 수 있습니다.

    예를 들어 이렇게요. (a = 4);

     

    a를 console.log 하고 어떻게 나오는지 봅시다. 첫 번째는 b입니다. 첫 번째 출력값이에요.
    b는 216입니다. 처음에 a = 221라고 했고, b는 a에서 5를 빼는 것이니 그러면 b는 221 - 5입니다.
    그리고 나중에 a를 4로 수정했습니다. 그리고 a를 console.log 했고 4가 출력됐습니다. 이전 값인 221은 사라지고요.
    a = 221이 a = 4로 대체되었습니다.

    다시, 이걸 깜빡했네요. 3번 줄에선 let을 쓰지 않았고, 다시 선언하지 않았습니다. 단지 a를 업데이트 했어요. 보다시피 JavaScript는 여러분의 코드를 위에서 아래로 실행합니다.

    먼저 첫 번째 줄에서 a는 221이고
    두 번째 줄에서도 221이고
    세 번째 줄에선 4가 됩니다.

    위에서 아래로.

    이게 JavaScript의 변수에 대한 첫 번째 글입니다. 다음에는 변수에 대한 더 멋진 걸 발견할 것입니다. constants에 대해 이야기할 거거든요.

    잘 하고 있어요! 다음 글에서 봐요ㅎ.ㅎ 안녕!

    'Blog > 노마드코더 - 초보자를 위한 바닐라 자바스크립트' 카테고리의 다른 글

    #1-8 Data Types on JS  (0) 2021.08.22
    #1-7 let, const, var  (0) 2021.08.22
    #1-5-1 What are we learning  (0) 2021.08.22
    #1-5 Hello World with Javascript  (0) 2021.08.22
    #1-4 VanillaJS  (0) 2021.08.22

    댓글