변수, 타입, 함수에 대하여(JS)

변수에 대하여!

변수란?

• 데이터 보관함(메모리)
• 보관함의 크기는 동일
• 각 보관함의 이름 = 변수
• 이름을 통해 데이터 사용(재활용)

How to Use?

• 보관함 확보(선언 declaration)
  let age;
• 보관함에 데이터 저장(할당 assignment)
  age = 12;
• 선언과 할당 동시에 가능
  let name = ‘kim’;
  
• 표현식에서 아래와 같은 변수들을 사용할 수 있다.(변수의 결과 값을 다시 변수에 담는다)
  let pi = 3.14;
  pi * 5 * 5; // 반지름이 5인 원의 넓이(표현식)
  let radius = 5;
  pi * radius * radius; // 결과물을 다시 변수로 담을 수 있다.
  let areaOfCircle = pi * radius * radius;
• 변수는 동일한 변수를 이용해 대입할 수 있다.
  let sum = 1;
  sum = sum + 2;
  sum = sum + 3;
  sum = sum + 4;
  > 10
  * 한번 선언했던 변수를 다시 사용할 때는 let을 쓰지 않는다.
• 할당이 없는 변수
  let myName;
  > undefined // 선언은 됐지만 할당은 되지 않았다.

* 코드의 각 한줄을 표현식(expressions)이라고 한다.

* 이 표현식이 무엇인지 알아내는 것을 평가(eval)이라 한다.
* = 는 '같다'는 의미가 아니라 할당 연산자(동치연산자)이다.(할당한다,대입한다,저장한다)
* ==는 값만 비교하고, == 값과 타입까지 비교함.

타입에 대하여!

타입이란?

• 숫자형(Number): 정수 음수 모두 포함되는 숫자(일반 적인 숫자 외에 Infinity, -Infinity, NaN도 포함)
• 문자형(String):  ’가나다’, “abc” “123” 문자를 따옴표로 묶는다.
• 불린형(Boolean): 논리 타입으로 true와 false 두가지 값만 있는 자료형이다.
• 배열(타입들이 섞인 자료형):  let fruits = [];
• undefined: 변수에 값이 할당되지 않은 경우
• function(함수): 변수에 함수가 들어갔다? 변수의 타입은 함수다
• bigint: 길이 제약 없이 정수를 다룰수 있게 해주는 숫자형 
• symbol형: 변경 불가능한 원시 타입의 값, 객체의 고유한 식별자를 만들때 사용한다.
  
• 객체(타입들이 섞인 자료형, 속성이 있다):  let person = {};
• null: 비어있음(없음을 표시한 상태)

* 엄밀히 따지면, 배열,객체,함수 모두 Object형에 속한다. 그러나 같은 타입으로 두기엔 각기 다르게 사용된다.

* 함수는 함수다, 문자열과 다르다, 배열과 다르다! 

*undefined 는 변수를 선언만 하고 값을 할당하지 않았을 때 자동적으로 들어가며,

null은 변수에 인위적으로 null 이라는 값을 할당해주지 않으면 들어가지 않는다.

참고 링크 : https://ko.javascript.info/types

자료형

 

typeof 연산자 사용하기!

typeof 값;

console.log(typeof 1) // number
console.log(typeof '1') // string
console.log(typeof (1 < 2)) // boolean

let number = 1;
console.log(typeof number) // number

let string = '1';
console.log(typeof string) // string

* 변수에 할당한 값도 typeof 연산자로 타입을 확인할 수 있다.

* typeof 연산자는 두 가지 형태의 문법을 지원한다.
연산자: typeof x
함수: typeof(x)

괄호가 있든 없든 결과가 동일.

 

함수에 대하여!

함수란?

• 코드의 묶음(즐겨찾기 버튼)
• 기능(function)의 단위
• 입력과 출력간의 매핑(mapping)
• 반드시 돌아온다(return)

How to use?

• 버튼 제작 선언(declaration)
  function cal(param1, param2) {
    console.log(param1 + param2);
    return param1 * 10;
  }
• 버튼 사용
  호출(call, invocation)
  cal(10, 20);

* 함수는 입력값을 설정할 수 있고 반드시 출력값을 갖는다. 출력은 return이 반환이되고 동시에 함수는 종료된다.

return문을 사용하지 않았다면? undefined가 출력된다.

 

함수 선언 방법 3가지!

• 함수 선언식

function () {};

• 함수 표현식
  함수를 변수 안에 할당

const a = function () {};

• 화살표 함수

const a = (idx1, idx2) => {};

ex)
const getTriangleArea = (base, height) =>  {
  let triangleArea = (base * height) / 2;
  return triangleArea;
}

* 본문(body)에 return문만 있는 경우 return과 {}중괄호는 생락할 수 있다.(중괄호도 생략해야 한다)

const getTriangleArea = (base, height) = > base * height / 2; // 0, 정상 작동
const getTriangleArea = (base, height) = > {base * height / 2}; // X, undefined 리턴

* return문에서 소괄호는 사용할 수 있다.

const getTriangleArea = (base, height) = > (base * height / 2) // 정상 작동 됨.

* 함수 내의 표현식이 2줄 이상인 경우라면?
: return과 {}중괄호를 명시적으로 쓰는것이 좋다.

함수의 호출

• 선언 / 매개변수 (parameter)

function getTriangleArea(**base, heigth**) {
	 let triangleArea = (base * height) / 2;
}

매개변수의 이름은 수정이 가능하다.
말그대로 변수이다. 바뀔수 있는 변수이고, let을 쓰지않고 사용하는 변수이다.

• 호출 / 전달인자 (argument)

getTriangleArea(3,4)

전달인자는 함수를 호출할 때 매개변수에 할당되는 값

함수 표현식
const getRactangleArea = function (width, height) {
	let ractangleArea = width * height;
	retrun ractangleArea;
}

화살표 함수
const getRactangleArea = (width, heigth) => {
	let ractangleArea = width * height;
	retrun ractangleArea;
}

화살표 함수(return, {} 생략)
const getRactangleArea = (width, height) => width * height;

 

 

---