[JavaScript] 변수, 함수, 타입

코드 스테이츠에서 처음으로 배우는 게 변수라서 좀 놀랐다! 아무래도 비전공이신 분들도 많을텐데 'Hello World'를 출력하지 않는 강의라니, 흥미롭다...!

참고로 'Hello World'는 크롭 개발자도구 - Console 탭에서 console.log('Hello World');를 입력하고 Enter를 치면 결과를 확인할 수 있다.

변수

변수의 선언과 할당은 아래와 같이 작성한다.

let myName; // 선언
myName = 'Gray'; // 할당

다른 언어와 마찬가지로 당연히 함께 작성할 수도 있다.

let myName = 'Gray'; // 변수 선언 및 할당

 

강의에는 포함되지 않지만 JavaScript에는 let말고 var과 const라는 선언방식도 있다.

let number1 = 1; // let 선언 및 할당
var number2 = 2; // var 선언 및 할당
const number3 = 3; // const 선언 및 할당

console.log(number1, number2, number3); // 1 2 3

기존에는 var을 이용한 변수선언'만' 존재했으나, ES6 ( ECMAScript 6 )에서부터 let과 const가 추가되었다!

 

먼저, var은 아래와 같이 덮어쓰기가 가능하다. 유연하게 하나의 변수 이름을 사용할 수 있다는 게 장점이겠지만, 당연히 그 자체로 단점이 된다.

var myName = 'Que Park'; // myName 선언과 'Que Park' 할당
console.log(myName); // Que Park

var myName = 'Gray Park'; // myName 을 새로 선언하며 'Gray Park'으로 덮어쓰기
console.log(myName); // Gray Park

이후에 사용하는 모든 myName은 나중에 선언 및 할당한 'Gray Park'이 된다.

 

이러한 단점을 보완함과 동시에 다른 언어들과 선언방식이 유사해진 let과 const를 보자.

let myName = 'Que Park';
console.log(myName); // Que Park

let myName = 'Gray Park'; // ERROR: Uncaught SyntaxError: Identifier 'myName' has already been declared

const myName = 'Que Park';
console.log(myName); // Que Park

const myName = 'Gray Park'; // ERROR: Uncaught SyntaxError: Identifier 'myName' has already been declared

let 과 const 를 이용하면 위에 선언된 변수와 같은 이름으로 다시 선언할 수 없다.

 

하지만 이름이 다른 let 과 const 는 당연히 다르게 기능한다.

let myName = 'Que Park'; // myName을 선언하고 'Que Park' 할당
console.log(myName); // Que Park

myName = 'Gray Park'; // myName에 'Gray Park' 할당
console.log(myName); // Gray Park

const yourName = 'Koo Koo'; // yourName을 선언하고 'Koo Koo' 할당
yourName = 'Kee Kee'; // ERROR: Uncaught TypeError: Assignment to constant variable.

let은 한 번 선언한 변수에 할당된 값을 다른 값으로 바꿀 수 있지만, const는 상수(변하지 않는 수)를 뜻하는 constant의 줄임말로 한 번 선언한 변수의 값을 바꿀 수 없다.

 

※ JS에서는 카멜표기법을 준수하며, 변수나 함수의 이름은 소문자로 시작하며 띄어쓰기 대신 다음 문자를 대문자로 작성한다 ※

 

함수

함수에는 선언식과 표현식이 있다.

//함수 선언식
function MultipleBy2(input) {
  return input * 2;
}

//함수 표현식
let MultipleBy2 = function(input) {
  return input * 2;
}

위에서 볼 수 있듯이 선언식은 함수이름(인자), 표현식은 함수이름 = 함수(인자) 의 형태를 나타낸다.

 

JavaScript에서는 선언식 보다 표현식으로 나타내길 권장하는데, 선언식은 호이스팅( Hoisting ) 에 영향을 받지만 표현식은 그렇지 않기 때문이다.

 

코드의 가독성과 유지보수를 위해 호이스팅이 일어나지 않도록 해야하기 때문에 함수 표현식을 사용하도록 하자.

 

타입

변수에는 대표적으로 3가지의 타입이 있다.

• 숫자
• 문자열
• 불린( Boolean )

이외에도 배열, 객체, undefined, 함수도 타입으로 분류된다.

타입에 대해서는 추후 변수를 다양하게 다룰 때, 더 자세히 알아보자.