Variable 변수

변수는 값을 저장하기 위한 이름이 붙은 저장소

변수명 규칙

• 변수명은 주로 카멜 표기법(camelCase)을 사용한다

• 변수명에는 문자와 숫자, 그리고 기호 $와 _만 사용한다

• 첫 글자는 숫자가 될 수 없다

• 대문자 상수
  기억하기 힘든 값을 변수에 할당해 별칭으로 사용하는 것

  const COLOR_RED = "#F00";
  const COLOR_GREEN = "#0F0";
  
  let color = COLOR_ORANGE;
  alert(color); 

변수의 선언(declaration)과 값의 할당(assignment)

// 1줄에 선언, 할당
let declaration = "data"

// 2줄로 나눠 선언, 할당
let declaration;       // 선언
declaration = "data";  // 할당

• 변수의 선언(declaration)부분 : let declartive let 변수로 선언
• 값의 할당(assignment) 부분 : = "data"로 값을 할당한다
  • 여기서 =는 "같다"라는 의미가 아닌 할당 연산자다

변수의 선언 Declaration

var, let, const 로 선언한다

var

변하는 값

• 중복 선언 가능
  마지막에 할당된 값이 저장된다
  하지만 기존에 선언한 변수를 까먹고 값을 또 재할당하게 되는 문제가 생긴다
• 변수 선언 후 재할당 가능
• 오래된 옛날 방식

let

변하는 값

• 중복 선언 불가
• 변수 선언 후 재할당 가능

const

상수(constant), 변하지 않는 값

• 중복 선언 불가
• 변수 선언 후 재할당이 불가

자료형 Type

원시 자료형

1. Boolean

논리형 타입. 참, 거짓 true, false

2. Null

함수/변수를 선언하고 빈 값(빈 객체)을 할당한 상태.
값이 없음을 의도적으로 명시 (의도적 부재)할 때 사용.

• typeof 하면 Object임 typeof null //Object

3. Undefined

함수/변수를 선언하고 값을 할당하지 않은 매개변수나 인수에 자동으로 할당됨.

null vs undefined

typeof null // 'object'
typeof undefined // 'undefined'
null === undefined // false
null == undefined // true
null === null // true
null == null // true
!null // true
isNaN(1 + null) // false
isNaN(1 + undefined) // true

4. Number

정수 또는 실수형 숫자. 예: 42 혹은 3.14159

5. BigInt

임의의 정밀도 형식의 정수 예: 9007199254740992n

6. String

문자열

7. Symbol

변경불가하여 다른 값과 중복되지 않는 고유의 값.

• Symbol() 함수 사용

Object

key : value 쌍으로 이루어진 property로 구성된 것.
let 객체 = {key : value};

• 객체의 property 참조방법
  객체.프로퍼티명 or 객체["프로퍼티명"]
  ex)

let person = {
    name: "유재석",      // 이름 프로퍼티를 정의함.
    birthday: "760707",  // 생년월일 프로퍼티를 정의함.
};
person.name    // 유재석
person["name"] // 유재석

typeof 연산자

인수의 자료형을 반환한다

• 사용 문법
  연산자: typeof x
  함수: typeof(x)
  
  
  
  
  

Function

‘동작’을 나타내는 기능단위

• parameter 매개변수, argument 인수로 입력값 받는다
• return 지시자로 결과값을 출력한다

function plus(a, b) {  // a, b : parameter 매개변수
  return a + b; 
} 
plus(2, 3);  // 2,3 : argument 인수 

함수 선언문 Declaration

// 함수 선언문 Declaration
function Declaration (width, height) {
  let area = width * height;
  return area;
}

함수 표현식 Expression

• 함수표현식의 끝엔 ;세미콜론이 붙는다
  let 이름 = ;과 같은 구문이기 때문에 끝엔 세미 콜론 ;을 붙이는 게 좋다.
  코드 블록이 아니고 값처럼 취급되어 변수에 할당되기 때문에 ;를 붙인다

// 함수 표현식 Expression
let Expression = function (width, height){
  let area = width * height;
  return area;
};

화살표 함수 arrow

• function 대신 => 를 사용한다
• 중괄호 {}사용시, return 지시자로 결과값을 반환해야 한다

// 1줄 - 간단한 경우
let sayHi = () => alert("안녕하세요!");

//여러줄 - 코드가 길어진 경우
let arrow = (width, height) => {
  let area = width * height;
  return area;
};

참조

모던 JavaScript 튜토리얼
코드스테이츠 강의