[JavaScript] JS_개념 및 동작원리 1. Value & Data type

jungeundelilahLEE·2020년 9월 12일
0

# INDEX

1. Values & Data type
   1-1. Primitive type
   1-2. Reference type
   1-3. Primitive vs Reference
2. Operators
3. Control flow
4. Scope & Hoisting
5. Object & Array
6. This
7. Prototype & Inheritance
8. Function
9. Callback function
10. Closuer
11. Class
12. Others

1. Values & Data type

** Variable (변수)

  • 변수란? 메모리 주소에 접근하기 위해 사람이 이해할 수 있는 언어로 지정한 식별자 (identifier)
    * 식별자 : 고유한 이름 (mostly 변수명) / 문자 or $ or _ (underdash)로 시작 (숫자 or 특수문자로 시작할 수 없음)
  • 값을 저장(할당)하고 그 저장된 값을 참조하기 위해 사용
  • 한번 쓰고 버리는 값이 아닌 유지(캐싱)할 필요가 있는 값은 변수에 담아서 사용

** 데이터 타입이란?

  • 프로그래밍 언어에서 사용할 수 있는 값의 종류

** 데이터 타입을 확인하는 방법

  • typeof 연산자를 사용
  • typeof @ or typeof (@)의 형태
//ex
typeof 3; 	// "number"
typeof "willy"	// "string"
typeof function foo() {}; 	// "function"
typeof {a:"apple"};		// "object"
typeof ["banana"];		// "object"

1-1. Primitive type (참조형/기본형)

  1. String
  2. Number
  3. Boolean
  4. Undefined
  5. Null
  6. Symbol

=> 변수 영역의 메모리 (불변성)

: 한 번 데이터 할당이 이뤄진 변수 공간에 다른 데이터를 재할당 할 수 없음

1. String type (문자열)

  • "",'', 백틱(``) 사용 가능
  • (""), ('')를 사용시 표현식을 넣을 수 없지만, (``) 사용시 표현식을 사용할 수 있음
  • 더할 수 있음
  • 유사배열이므로 index를 이용해 문자열 접근 가능
  • 유사배열이므로 .length 속성이 있음
//ex
let name1 = "jung";
let name2 = "eun";
"Her name is ${name1+name2+2}" // "Her name is ${name1+name2+2}"
`Her name is ${name1+name2+2}` // "Her name is jungeun2"
name1+name2; 	// "jungeun"
name1[2]; 	// "n" 
name2.length; 	// 3

2. Number type (숫자)

  • Infinity, -Infinity, NaN (Not A Number)도 숫자에 포함됨
//ex
1/0;			// infinity
infinity		// infinity
Number("숫자가 아닌가?")	// NaN

3. Boolean type (참/거짓)

  • true, false 값으로 출력되며, 긍정 또는 부정을 나타내는 값을 저장시 사용
  • Falsy 값 (Only 아래 9가지)
0;
-0;
false;
undefined;
null;
"";
'';
``;
NaN;

4. Undefined type

  • '없음'을 의미 ('값을 못찾겠는데(아직 값이 할당되지 않았는걸?)..?' 의 의미)
  • 초기값이 할당되지 않은 변수나 매개변수 등, 객체에서 없는 속성을 접근하는 경우 등은 모두 undefined값을 기본값으로 함

5. Null type

  • '없음'을 의미 ('아! 일부러 값을 없앴어(비워놨어)..^^' 의 의미)
  • null !== null; //false

6. Symbol type

  • 객체의 고유한 식별자를 만들 때 사용

1-2. Reference type (참조형)

  1. Object
    • Array
    • Function
    • Date
    • RegExp
    • Map, WeakMap
    • Set, WeakSet

=> 변수 영역의 메모리 (가변성)

: 데이터 영역에 저장된 값은 모두 불변값 / 그러나 변수 공간에는 다른 데이터를 얼마든지 재할당 할 수 있음

1. Object

  • 일반 객체, 배열, 함수 모두 객체에 포함

1-3. Primitive VS Reference

=> name tag와 luggage를 이용한 그림을 통해 이해해보기!

  • 객체 비교 시 동등연산자(==)와 일치연산자(===)는 동일하게 동작

ex1)

var a = 10;
var b = a;
a = 30;
console.log(b); 	// 무엇이 출력될까요?	// 10

=> 원시값은 '값 그대로' 저장, 할당, 복사됨

ex2)

var a = [1, 2, 3];
var b = [1, 2, 3];
var result = a === b;
console.log(result);	// 무엇이 출력될까요? // false

=> 객체는 '참조에 의해' 저장, 복사됨
=> 변수에 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어있는 '메모리 주소'인 객체에 대한 '참조값'이 저장됨

ex3)

var james = {age: 35};
var john = james;
james.age = 60;
console.log(john); 	// 무엇이 출력될까요? // {age: 60}

ex4)

var person = {age: 30};
var something = person.age;
person.age = 50;
console.log(something);	// 무엇이 출력될까요?	// 30


ex5)

var one = {name: "one"};
var two = {name: "two"};
var something = one;
one = {name: "ONE"};
console.log(something);	// 무엇이 출력될까요?	// {name: "one"}
profile
delilah's journey

0개의 댓글