JavaScript : 변수, 타입, 함수

---

변수

JavaScript에서는 데이터를 편하게 저장하고 꺼내 쓰기 위해 데이터에 이름을 붙일 수 있다. 바로 이 이름은 변수라고 하며, 오늘은 개발자다운 표현으로 '변수를 선언하고 값을 할당하는 방법'에 대해 배워보자.

 

📌 변수 사용하기

let age; // 변수 선언
age = 12; // 변수 할당

console.log(age * 2); // 최초 입력 코드
 // console.log(12 * 2); 보관함에서 age에 할당된 데이터 가져오기
 // console.log(24); 데이터로 계산

24 // 최종 출력 코드

📌 변수 유의사항

- 변수에서 사용하는 '=' 기호는 수학기호인 '같다'가 아닌, 할당 연산자이다. JS는 '같다'의 의미로 '==='을 사용한다.

- 변수에는 공백을 사용할 수 없으며, 공백이 있는 단어는 보통 단어의 첫 글자를 대문자로 쓴다. (camel 표기법)

- 변수 안에 담을 수 있는 데이터타입은 예시의 숫자 외에도 여러 가지가 있다. (아래의 '타입' 참조)

 

 

---

타입

앞서 '변수'를 선언하고, 변수 안에 데이터를 '할당'해줬다. 이런 데이터타입의 종류도 다양하다. 

 

📌 타입 살펴보기

let age = 12; // age라는 변수에 12라는 number 데이터 할당
let name = 'Alex' // name이라는 변수에 'Alex'라는 string 데이터 할당
let sign = 1<2; // sign이라는 변수에 1<2 비교
let none; // none이라는 변수를 선언만 하고 값을 주지 않음

console.log(age);
console.log(name);
console.log(leftright); // true 출력
console.log(none); // undefined 출력

- number : 숫자. JS에서는 정수, 소수 등을 구분하지 않고 모두 숫자로 표기한다.

- string : 문자. 표기를 할 때 작은따옴표'' 또는 큰따옴표 ""를 사용해 숫자와 구분해준다.

- boolean : true/false를 판단하는 논리 요소.

- undefined : 변수에 값을 할당하지 않을 시 표기되는 데이터타입.

이 외에도 mozilla 사이트를 통해 확인한 타입은 Null, Biglnt, Symbol, 객체 등이 있다.

 

📌 typeof 연산자 사용하기

아래와 같은 코드를 작성했을 때, 화면에 출력되는 값은 동일하다. 하지만 두 변수는 각각 다른 데이터타입이 할당되었다. 이런 데이터값의 데이터타입을 확인할 때는 typeof 연산자를 사용한다. 

let number = 153;
let string = '153';

console.log(number);
console.log(string); 
// 화면에 뜨는 결과값은 153으로 동일

console.log(typeof number); // number라는 변수의 데이터타입 -> number
console.log(typeof string); // string이라는 변수의 데이터타입 -> string

 

 

---

함수

복잡하게 만들어진 코드를 사용할 때마다 다시 작성한다면, 코드를 읽기 어려워지고 수정사항이 생길 때마다 모든 코드를 찾아 수정해줘야 할 것이다. 이를 작고 간단한 문제로 만들기 위해 사용되는 것이 함수, function이다. 함수는 입력에 따라 그에 맞는 작업을 하는 단위이다. 함수는 아래와 같이 만든다. 함수는 만드는 것을 함수를 '선언(declaration)'한다고 한다.

function calculatorFor2(num) {
    console.log(num + 2); // 8
    console.log(num - 2); // 4
    console.log(num * 2); // 12
    console.log(num / 2); // 3
}

- function : '함수'라는 키워드

- calculatorFor2 : 함수의 이름

- num : 함수를 실행할 때 입력에 따라 바뀔 수 있는 변수, '매개변수(parameter)'라고 한다.

- console.log(num + 2); ~ console.log(num / 2); : body, 함수가 실행시킬 코드. 중괄호{}로 감싸준다.

 

📌 입력값과 출력값

함수는 입력값이 있고, 항상 출력값을 반환한다. 제곱미터를 평으로 자동 계산해주는 함수를 한번 만들어보자

function calForArea(num) {
    let area = num*3.3058 + '㎡';
    return area;
    }

calForArea(10);

- num : 함수를 실행할 때 입력에 따라 바뀔 수 있는 변수, '매개변수(parameter)'라고 한다.

- return area; : 함수 내부에 입력값을 이용해 계산을 한 뒤, 이를 함수 밖 결과를 가져오기 위해 return을 사용한다. return을 사용하지 않을 시 계산을 해도 외부에 꺼내올 수 없어 undefined가 출력된다. 한번 직접 작성해보자.

- calForArea(10); : 만들어진 함수를 불러오는 것. 이를 '호출(call, invocation)'이라고 한다.

- 10 : 호출에서 소괄호() 안의 10은 함수를 호출할 때 매개변수에 할당해주는 값으로, '전달인자(argument)'라고 한다.

 

📌 함수 선언 방법

함수 선언 방법은 세 가지로, 조금씩 차이점이 있다. 

- 함수 선언식 : 위에서 사용한 방법. function을 이용해 함수를 선언한다.

- 함수 표현식 : 변수를 먼저 선언한 뒤, 거기에 익명의 함수를 할당한다.

const calForArea = function(num) {
    let area = num*3.3058 + '㎡';
    return area;
    }

calForArea(10);

- 화살표 함수 : 함수 표현식에 기반을 둔 새 선언 방법. 표현식처럼 변수를 먼저 선언하되, function키워드를 매개변수 뒤 화살표 =>로 표기한다. 화살표 함수는 함수 본문에 return만 있는 경우, return과 중괄호{}를 함께 생략할 수 있다.

const calForArea = (num) => {
    let area = num*3.3058 + '㎡';
    return area;
    }

calForArea(10);