[JS]변수(Variable)

JS는 Java와 비교했을 때 자유도가 높은 언어이다. 또한 Java와 비슷하면서도 다른 언어이다.

 

▲ JS의 특징(?)

 

이번 포스팅에서는 JS에서의 변수에 대해 알아보자.

 

참고로 console.log는 브라우저에서 F12 또는 마우스 오른쪽에서 검사 부분에서 console창에 출력되는 출력코드이다. 브라우저창 위에 바로 출력되는 코드가 아니다.

 

▲ 위 코드에서 우리는 num이라는 변수를 선언만 하였다. 그리고 출력을 해봤더니 변수 num의 값과 타입 모두 undefined라고 나온 것을 볼 수 있다. 여기서 undefined는 Java에서처럼 정의가 되지 않았다라는 의미가 아닌, num이라는 변수에 참조하는 메모리(객체)가 아직 정의가 되지 않았다는 의미이다.  또한 JS에서 undefined는 하나의 자료형이자, 값으로 취급된다는 것을 기억하자! 

 

 

 

▲ 우리는 num1을 선언한적이 없다. 위코드에서 보다시피 num1을 선언조차 하지않고 cosole창에 출력하고 있으며 그 이후에 num1을 선언과 동시에 객체(메모리)할당을 하고 있다. 위 console.log코드의 결과는 아래와 같다.

 

▲ 다시 말하지만 JS에서 undefined는 정의되지 않았다는 의미가 아니라, num1이라는 변수가 참조하는 메모리(객체)가 아직 정의되지 않았다. 즉 아직 만들어지지 않았다는 의미이다! 

 

선언도 하지 않은 변수에 자료형이자 하나의 값인 undefined가 값으로 들어있는 것을 볼 수 있다. 이를 우리는 호이스팅(Hoisting)이라고 한다. Hoist의 뜻은 '끌어올리다' 라는 의미인데 말 그대로 변수의 선언부를 끌어올리는 것이다. 변수 선언시 var를 붙여서 선언 및 객체할 당을 했기 때문에 Hoisting이 가능한 것이다. 

 

▲ 위 두줄의 코드는 아래 3줄코드처럼 hoisting된 것이다. 즉, 변수의 선언부인 var num1; 이 interpretor에 의해서 실행되면서 선언부들은 코드들의 상단부로 내부적으로 끌어올려져서 선언되게 하는 로직인 것이다.

 

이것은 다시말하지만 var를 붙여서 변수를 아래에서라도 선언했기 때문이다. 변수 선언시 var를 붙이지 않고 선언도 할 수 있다. 하지만 hoisting이 일어나지 않게 된다. 만약 위 코드에서 var를 붙이지 않고 코드를 저장한다면 아래와 같은 결과가 나온다.

 

▲ hoisting이 안되기 때문에 이제는 진짜로 에러가 발생하는 모습을 볼 수 있다.

 

JS에서는 변수선언을 나중에 할 때는 var를 붙여서 hoisting이 일어나게 할 수 있다는 점을 기억해두자.

 

 

 

 

 

 

 

 

포스팅 시작부에 언급했지만 JS에서는 변수에 넣은 객체에 따라 그 변수의 자료형이 결정된다.

▲ 자바에서는 100은 int형이지만 JS에는 number형인 것을 볼 수 있다.

 

 

 

▲num4_라는 변수에 위와 동일한 숫자 100이라는 객체를 할당하기위해 new 생성자를 사용했더니 타입이 object인 것을 볼 수 있다. new 생성자를 이용해 변수에 객체를 할당하게 되면 해당 객체의 타입이 아닌 object타입이 된다.

 

또한 num4_의 값이 100이 아닌 Number{100}이 출력되는 것을 볼 수 있는데 new생성자를 이용해 prototype을 만들었기 때문이다.

 

 

 

▲JS에서는 3.14또한 number 타입이다.

 

 

▲ 역시나 new 생성자로 객체를 만드니 타입은 object, 값은 Number prototype에 3.14라는 객체의 값이 저장된 것이다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이번에는 JS의 여러 자료형에 대해서 알아보자. JS는 Java에 비하면 자료형의 갯수가 적다.

 

▲여러타입의 변수를 선언하고 일부는 객체 할당까지 했다.

 

▲JS에서 숫자와 Undefined를 더하면 NaN(Not a number)가 된다. NaN이 마치 Null처럼 느껴질 수도 있지만 NaN은 하나의 값이고 number타입이라는 점을 기억하자.

 

 

▲ JS에서 숫자형식의 문자열과 숫자의 더하기 연산을 하게되면 숫자가 문자열로 자동으로 바뀌어서 문자열을 이어붙인 것 처럼 된다.

 

 

▲ 숫자형식의 문자열과 숫자를 빼기 연산하면 문자열이 숫자로 바뀌어서 숫자들끼리의 연산이 된다.

 

 

▲ 역시나 문자열이 숫자로 바뀌어서 숫자끼리의 연산처럼 작동한다.

 

 

 

 

 

 

 

▲위 두코드는 동일하게 Object타입의 Object객체가 할당된 변수들이다.

 

▲ JS에서 Object는 자바에서 Map과 같다고 생각하면 된다. key값과 value값으로 구성되므로 obj에 name이라는 키값으로 value를 가길동으로, age라는 키값으로 value를 20, walk라는 키값에 value로 함수를 주었다. JS는 함수프로그래밍 언어이기도 하므로 변수에 함수를 값으로 줄 수도 있기 때문이다.

 

▲ 위 코드 결과값이다.

 

 

▲nickname이라는 변수에 obj의 키값중 하나인 name을 넣어서 키값을 변수로 만들었다. 이처럼 키값을 변수처리한 경우에는 반드시 [](대괄호)로 접근해야 한다!!

 

▲ 또한 키값에 특수문자가 있는 경우에도 [](대괄호)로 감싸서 사용해야한다.

 

 

▲obj와 같은 방법으로 obj2를 만들었으며 출력하면 위와 같이 출력된다.

 

 

▲ 다시한번 JS는 함수프로그래밍 언어이기도 하므로 변수에 함수를 넣을 수도 있다. 변수에 저장하는 객체의 타입에 따라서 변수의 타입이 정해지므로 f의 타입은 funtion이다.

 

 

정리를 하자면