JavaScript 변수 총 정리

이성은·2022년 11월 1일
0

변수

변수란?

  • 값을 저장하는 공간
  • 자료를 저장할수 있는 이름이 주어진 기억장소
  • let a(메모리 주소) = 0(메모리값);

변수 이름짓기

  • 값을 저장하는 공간, 자료를 저장할수 있는 이름이 주어진 기억장소
  • 변수 규칙
    • 라틴문자(0-9, a-z, A-Z,), _
    • 대소문자를 구분함
    • camelCase (likeThis)
    • 예약어는 안됌
    • 숫자로 시작 안됌
    • 특수문자 안됌(_, $ 두가지는 예외)
    • 이모지 안됌
    • 여러개의 변수를 1, 2, 3 숫자로 구분하는 것보다 최대한 의미있게, 구체적인 이름으로 작성!

데이터 타입

  • 원시타입 : 단일 데이터 담음
    • number: BigInt: 정말 큰 숫자를 표현할때
    • string
    • boolean
    • null
    • undefined
    • Symbol
  • 객체 타입 : 복합 데이터 담음
    • object
    • function

number 타입

let integer = 123; //정수
let negative = -123; // 음수
let double = 1.23; // 실수

let binary = 0b1111011; // 2진수
let octal = 0o173; // 8진수
let hex = 0x7b; // 16진수

console.log(0 / 123); // 0
console.log(123 / 0); // Infinity
console.log(123 / -0); // -Infinity
console.log(123 / "text"); // NaN (Not a Number)

let bigInt = 1234567890123456789012345678901234567890n;
console.log(bigInt);

string 타입

  • \n : 줄바꿈
  • \t\ : tab
  • \\ = \
  • \u = 유니코드
  • 템플릿 리터럴 (Template Literal) ``

boolean 타입

  • !!을 붙이면 값의 Truthy, Falshy을 나타낼수 있다.
  • Falshy 거짓인 값
console.log(!!0);
console.log(!!-0);
console.log(!!"");
console.log(!!null);
console.log(!!undefined);
console.log(!!NaN);
  • Truthy 참인 값
console.log(!!1);
console.log(!!-1);
console.log(!!"text");
console.log(!!{}); //any object
console.log(!![]);
console.log(!!Infinity);

undefined 타입

  • 모르는 상태
let variable;
console.log(variable); //undefined

null 타입

  • 없는,비어있는 상태
variable = null;
console.log(variable);

object 타입

  • 객체: 복합데이터, {key:value} value안에는 원시값과 객체값이 들어갈수 있다.
  • 원시타입은 메모리상의 원시 값에 따라 Data(global하게 선언되어 있다면), Stack(local에 선언되어 있다면)에 보관
  • 객체타입은 메모리상의 Heap안에 보관, 셀 여러개에 걸쳐서 보관

얕은 복사와 깊은 복사

얕은 복사

  • 객체타입은 메모리의 주소가 변수에 들어가있다.
  • 객체타입은 참조값(메모리주소, 레퍼런스)가 복사되어 전달됨
  • 얕은 복사는 참조 주소를 공유,객체를 복사할 때 원래 값과 복사된 값이 같은 참조를 가리키고 있는 것을 말하며, 객체 안에 객체가 있을 경우 한 개의 객체라도 원본 객체를 참조하고 있는 것을 말한다.

Array.prototype.slice(), concat()

  • 처음부터 마지막 인덱스까지 기존 배열에서 추출해 새로운 배열을 리턴하는 메소드
  • 여기서, 처음과 마지막을 설정하지 않으면 기존 배열을 전체 얕은 복사를 한다.
  • 1차원 배열에서는 깊은 복사가 허용이 되지만 2차원 이상부터는 깊은 복사가 되지 않고 얕은 복사가 된다.

Object.assign(생성할 객체, 복사할 객체)

  • 첫번째 요소로 들어온 객체에 다음인자로 들어온 객체를 복사해준다.
  • 메소드의 첫번째 인자로 빈 객체를 넣고, 두번째 인자로 복사할 객체를 넣어준다.

Spread 연산자 (전개 연산자)

깊은 복사

  • 원시타입은 값이 메모리에 들어가 있다.
  • 원시타입은 값이 복사되어 전달됨
  • 깊은 복사는 참조 주소를 공유하지 않고 참조 공간도 복사,
    즉, 객체의 실제 값을 복사
    객체 안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말한다.

재귀 함수를 이용한 복사

JSON 사용

  • JSON.stringify() - 객체를 json 문자열로 변환하면, 원본 객체와의 참조가 모두 끊어짐
  • JSON.parse() - 객체를 json 문자열로 변환 후, 다시 자바스크립트 객체로 만들어 줌
  • 간단하고 사용하기 쉽지만, 다른 방법들에 비해 느리고, 객체가 function일 경우 undefined로 처리한다는 단점이 있다.

lodash 라이브러리의 cloneDeep() 사용

  • 더 쉽고 안전하게 복사를 할 수 있지만, 라이브러리를 설치해야한다는 점과 일반적인 개발과는 달리 코딩 테스트에는 사용할 수 없다는 단점이 있다.

const,let

  • let: 재할당이 가능
  • const: 재할당이 불가능, 즉 const는 재할당만 불가능, 값을 변경하는 것은 가능하다
let a = 1;
a = 2;

const text = "hello";
// text = 'hi'; 이렇게 하면 안됨!

const apple = {
  name: "apple",
  color: "red",
  display: "🍎",
};

console.log(apple);
//{ name: 'apple', color: 'red', display: '🍎' }

apple.name = "orange";
apple.display = "🍏";
console.log(apple);
//{ name: 'orange', color: 'red', display: '🍏' }

// 즉 const로 선언하면 apple의 메모리셀의 재할당이 불가능한것 
//즉 메모리셀에 다른 주소를 담을수 없는것
//하지만! 가리키는 object안에 값은 변경할 수 있다.
//즉 const는 재할당만 불가능, 값을 변경하는 것은 가능하다는것을 기억!

typeof

  • 데이터 타입을 확인
  • 값을 타입 문자열로 반환
  • 할당된 값에 따라 타입이 결정
  • 즉 자바스크립트에도 타입이 있다. 단 동적이고(dynamic), weakly 타입이다.(할당되는 값에 따라 타입이 바뀐다.)
  • typeof null은 object
profile
함께 일하는 프론트엔드 개발자 이성은입니다🐥

0개의 댓글