JS 깊게 알기

김경태·2021년 2월 20일
0

원시,참조 자료형

원시 타입의 데이터(primitive data types; 원시 자료형)

원시 자료형은 객체가 아니면서 method를 가지지 않는 6가지의 타입을 말합니다
string, number, bigint, boolean, undefined, symbol, (null)

원시 자료형은 하나의 데이터만 담고있다

// 원시자료형은 고정적으로 모두 "하나"의 정보, 즉, 데이터를 담고 있습니다.
 const num1 = 123;
 const num2 = 123456789;

위 예시를 보면, 데이터의 크기와는 관계 없이하나의 변수에는 하나의 데이터만을 담을 수 있다.

원시 자료형은 값 자체에 대한 변경이 불가능(immutable)하지만, 변수에 다른 데이터를 할당할 수는 있다.

참조 자료형(reference data type; 참조 타입)

자바스크립트에서 원시 자료형이 아닌 모든 것들은 참조 자료형이다. 대표적으로 배열객체, 함수가 있다.

원시 자료형은 하나의 변수에는 하나의 데이터만을 담을 수 있는데, 참조 자료형은 여러 데이터를 담을 수 있다.

참조 자료형은 특별한 데이터 보관함에 저장된다

참조 자료형의 데이터는 heap이라고 부르는 별도의 데이터 보관함에 저장되고, 변수에는 데이터가 저장된 메모리 상의 주소가 저장된다.
원시 자료형과는 다르게 heap 안에 저장된 데이터는 원하는 대로 데이터 사이즈를 조정할 수 있다.

scope

scope란?

우리가 변수 혹은 함수를 선언할때 해당 변수 또는 함수가 어디서 부터 어디까지 유효한지 범위를 의미한다.

scope의 종류

scope는 global scope, function scope, block scope 총 3가지가 있다.

// global scope (전역 스코프) - 코드의 모든 범위
const value = "hello!";

function myFunction() {
   const value = "bye!";
   console.log(value);
}
console.log(value);
// -> hellow! 

// function scope - 특정함수 내부에서만 해당
const value = "hello!";

function myFunction() {
   const value = "bye!";
   console.log(value);
}
myFunction(); 
console.log(value); 
// -> bye!  함수 내부에서 value의 값이 재할당 되어서 나온다.
// -> hello!  함수 내부에서 value의 값이 재할당 되었지만 함수 밖에서는 영향을 받지 않는다.  

// block scope - if문 for문 등 {} 안에서만 해당
const value = "hello!";

function myFunction() {
   const value = "bye!";
   if (true) {
     const value = world;
     console.log(value);
   }
  console.log(value);
}
myFunction();
console.log(value);
// -> world! 함수안의 if문안에서 value의 값이 재할당 되어서 나온다.
// -> bye! if문안의 value의 값은 영향을 받지 않지만 함수내부에서 value의 값이 재할당 되어서 나온다.
// -> hello! if문과 함수내부에서 value의 값이 재할당 되었지만 함수 밖에서는 영향을 받지 않는다.

함수의 Hoisting

Hoisting이란 자바스크립트에서 아직 선언되지 않은 함수 변수를 끌어 올려서 사용할수있는 자바스크립트의 작동 방식이다.

myFunction();

function myFunction() {
  console.log("hello world");
}

// -> hello world

// 자바스크립트가 코드를 읽는 과정에서 위에 코드를 아래와 같이 읽기 때문에 위 코드와 같은 결과가 나오게 된다.

function myFunction() {
  console.log("hello world");
}

myFunction();

코드를 이해하기 어려워질수 있기에 Hoisting은 피해야한다 !!!

constlet은 Hoisting이 발생하지 않지만 var는 발생한다.

closure

closure는 독립적인 변수를 가리키는 함수이다. 또는 클로저 안에 정의된 함수는 만들어진 환경을 기억한다.

function makeFunc() {
  var name = "Mozilla";
  function displayName() { // 클로저 함수
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
//myFunc변수에 displayName을 리턴함
//유효범위의 어휘적 환경을 유지
myFunc();
//리턴된 displayName 함수를 실행(name 변수에 접근)

자바스크립트에서는 함수를 리턴할 때, 클로저를 형성하기 때문에 클로저가 형성될 당시의 함수와 함수가 선언된 어휘적 환경의 조합(쉽게 말해 당시의 관계되는 코드들)의 참조를 유지한다.(즉, 기억한다.)
따라서 myFunc함수를 호출하면 name 변수는 클로저에 의해 기억되고 있기 때문에 "Mozilla"가 alert에 전달되게 된다.

※클로저 함수 안에는 지역변수, 외부함수의 변수, 전역변수의 접근이 모두 가능하다.

profile
비전공자로 시작한 개발자 지망생입니다!

0개의 댓글