자바스크립트(Javascript) 기록-1

전에 만들어 놓았던 카카오톡 클론코딩을 배포 하던 중 HTML과 CSS만으로는 부족해보이므로 Javascript로 기능을 추가해 보라는 강사님의 피드백에 따라 JS로 기능을 추가하기 위해 JS가 주인 클론코딩 강의를 듣고 카카오톡 클론코딩에 잘 버무려 보기로 했다.

그런데 HTML의 스크립트태그는 몇번 접해본적 있었지만 JS는 초면인지라 다른 언어들의 기초보다 문법이 복잡한지, 어떤 부분이 다른지 전혀 모르고 있었기에 기록 겸 가끔 보려는 용도로 포스팅 한다.

하루 배우고 하루 기록하는 토막글 형식이기에 한두번 만에 끝날것 같지는 않으니, 귀찮아 하지말고 매일 기록할것.

변수 선언 방식

---

자바에 여러개의 변수 타입이 있듯이 자바스크립트에도 변수 타입이 존재한다. 그러나 다른점이라면 자바는 변수의 크기, 타입에 따라 분류한다면 자바스크립트는 이후에 값을 수정 가능한지 아닌지로 분류한다.
일단 기본적인 변수 선언 방식은 다음과 같다.

const a = 1;
let b = 2;
var c = 3;

기본적으로 변수 선언 방식 이후 변수에 값을 넣고 닫아주는 형태이다.

갑자기 잡설을 풀어보자면
파이썬, 자바등을 공부할때 해당하는 언어를 설치해주어야 했는데 자바스크립트는 그렇지 않다.
다른 언어의 경우에는 버전이 올라감에 따라 이전버전의 문법을 사용하지 못하는 경우가 있다.
그러나 자바스크립트는 이전버전의 문법(const,let이 있음에도 var가 사용 가능한경우)이 여전히 혼용 가능하다.(그러나 쓰지않는걸 추천하는것 같다.)

각설하고, 총 세 개의 방식이 있는데 각각의 특징은 이렇다.

const

ES6 이후에 추가되었고 가장 기본적으로 사용되는 변수형이다, 상수(변수인데 상수;;)이며 그렇기 때문에 선언 이후에 변경이 불가하다.(할당된개체가 Array와 Objects등의 개체라면 내부의 값을 변경할 수는 있다. ) 선언할때 반드시 값을 할당해주어야 한다.

let

ES6 이후에 추가되었고 현재 사용되고 있는 가변 변수형이다, 선언 이후에도 변경이 가능하다. 선언할때 값을 할당하지 않을수 있지만 그럴경우 값은 undefined가 된다.

var

자바스크립트 초기에 사용되었던 변수형이며, 선언 이후에도 변경이 가능하다. 역시나 선언할때 값을 할당하지 않을수 있고, 이 경우 값은 undefined가 된다.

왜 let은 쓰는데 var는 쓰지 않는지, 왜 기본적으로 let이 아닌 const를 쓰는지 의문이 생길수 있다.
전자의 의문의 답은 세가지이다.

첫째는 변수명이 같아도 선언이 가능하다는것. (재선언 가능)
누군가는 장점이 아니냐 할 수 있겠지만 변수의 양이 매우 많거나, 다른사람과 협업을 한다면 이는 단점이 된다.

둘째는 호이스팅(Hoisting).
이는 변수의 정의가 선언과 할당으로 분리되는것을 말한다, 이게 무슨뜻인지는 다음 코드를 보자

console.log(name);
var name = "WJ";

이렇게 코드가 있을때 자바스크립트는 다음과 같이 해석한다.

var name;
console.log(name);
name = "WJ";

결국 출력은 초기화가 되지않았다는 메시지가 나오는 대신 정의되지 않았다는 뜻인 undefined 가 나오게 된다.
이는 직관적이지 못하기때문에 var보다 let을 쓰는것이 권장된다.

셋째는 const,let은 ‘블럭’수준 var는 ‘함수’수준으로 적용되기 때문이다.
이게 무슨말인지 처음엔 이해가 잘 되지 않을수 있다. (나는 그랬음..)
그러니 바로 예시를 보면

var a = 5;              # 전역변수 a 선언후 5 할당
console.log(a);         # 5 출력

function setA() {          
    var a = 10;         # '함수 내부'에서 지역변수 a 선언후 10 할당
    console.log(a);     # 10 출력
}

console.log(a);         # 5 출력

전혀 이상할것 없이 당연한 예시이다. 그럼 다음예시도 한번 보자

var a = 5;              # 전역변수 a 선언후 5 할당
console.log(a);         # 5 출력

if (true) {          
    var a = 10;         # 'if블럭 내부'에서 지역변수 a 선언후 10 할당
    console.log(a);     # 10 출력
}

console.log(a);         # 10 출력 <--  ???

if블럭 내부에서 지역변수를 할당 했음에도 전역변수로 선언했던 a의 값이 바뀌어 10이 되었다.

이는 위에서 말했듯 var의 범위는 ‘함수’수준으로 적용되기 때문이다.
즉, 블럭{}으로 감싸더라도 함수로 감싸진것이 아니기때문에 if블럭 내에서 재할당된 값이 출력된 것이다.

쓰면 안되는 이유 1,3번의 콜라보..

결국 요약하자면 var는 함수내부에서 쓰는것이 아니라면 전역변수와 같다는 것이다.

안쓰는데는 이유가있다

Array (배열, 리스트)

파이썬으로 처음 접했던 리스트 역시 자바스크립트에도 있다.
다음은 array를 선언하는 기본적인 방법이다.

const a = [1, 2, null, true, "hello"];

인덱싱은 a[2]; 처럼 가능하고, 값을 추가하고 싶을 경우 a.push(추가할 값) 해주면 해당 값이 가장 마지막의 인덱스에 추가된다.

Objects (파이썬 딕셔너리)

제목에도 적었듯이 키와 값으로 이루어진 것이 파이썬의 딕셔너리와 닮았다. 세세한기능까지 같은지는 모른다
오브젝트를 선언하는 기본적인 방법을 보면

const a = {
    name : "WJ",
    contry : "KR",
    lang : "Javascript",
    num : 123
}   

처럼 선언하는데 중괄호 내부의 프로퍼티 중 왼쪽을 이름, 오른쪽을 값이라 한다.

값 출력시엔 다음처럼 하면 된다.

a.name;
a["name"];

예시에서 배열과 오브젝트 둘다 const로 선언했지만 내부의 값은 바꿀 수 있다.

function (함수)

function a() {
    console.log("Hello!");
}

문법만 조금 다를 뿐 전체적으로 파이썬의 사용자 지정 함수나 자바의 메소드와 비슷하다.

함수호출은 a() 로 할수 있으며 결과는 Hello! 가 출력되게 된다.

Reference.

ES6의 변수 선언, const와 let - nana_log