TIL - 변수, 자료형, 함수

moontag·2022년 4월 26일
0

JavaScript TIL

목록 보기
1/20
post-thumbnail





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 튜토리얼
코드스테이츠 강의

profile
터벅터벅 나의 개발 일상

0개의 댓글