unit9[javascript] 핵심개념과 주요문법

원시 자료형:고정된 저장 공간을 차지하는 데이터(String number boolean undefined null symbol)

=> 변수에 값을 할당 , 보관함의 주소가 담김 ,데이터 값 저장

 

참조 자료형:대량의 데이터 다루기 적합(배열과 객체,function(){} )

=>동적으로 크기가 변하는 보관함 , 데이터가 담긴 저장소의 주소로 저장(주소 안에 데이터 변경)

미리 주소값과 메모리 값을 잡아둔다.

heap : 특별한 데이터 보관함

a address:1

 

Q

a=[5,7];

1-5 7

변수의 주소를 참조(refer)하여

실제 변수가 있는 장소에 어떤 데이터가 있는지 본다.

 

strict equality (===) 

참조 자료형으로 주소값이 같은지 확인

 

let x = {so:2}

let y = x; // x의 주소값을 할당

y=2; //{so:2}에는 아무런 영향 X -> x.foo는 그대로 3이 나온다.

 

let x = [1,2,3,4,5]

let y = x;

y[2] = 26;

y = undefined;

주소값이 같기 때문에 x[2]=26;이 되는데 마지막에 undefined으로 y는 x에게 접근이 불가능하다.

 

?

원시자료형과 참조 자료형에는 무엇이 있는지 생각하고 데이터 값을 그대로 전달하는지, 주소값을 저장하는지를 생각해보면 문제를 잘 풀수 있을것 같다.

 

스코프:범위 => 정의 : 변수 접근 규칙에 따른 유효 범위

중괄호 또는 함수에 의해 나눠짐

안쪽에 변수가 선언 되었는가 : 지역 스코스에서 선언한 변수는 지역 변수

바깥쪽에 변수가 선언이 되었는가 : 전역 스코프에서 선언한 변수는 전역변수

 

우선순위 지역변수 > 전역변수

동일한 변수이름으로 인해 전역 변수가 지역 변수에 의해 가려짐 -> 쉐도잉

 

스코프의 종류

블록 스코프 : { } 중괄호로 둘러싼 범위

let so = user => {

      return user.month;

}

화살표 블록 스코프 취급

블록 범위를 벗어나면 접근 불가

 

함수 스코프 : function 함수 선언식 및 함수 표현식으로 함수로 둘러싼 범위

let so = function(user) { 

      return user.month;
}

중첩이 가능하다. 

let,const,var 

 

var let const

	let	var	const
유효범위	블록 또는 함수 scope	블록 또는 함수 scope	함수 스코프
값 재할당	O	X	O
재선언	X	X	O

var 사용 -> 블록 스코프 무시(화살표 함수의 블록 스코프는 무시하지 않음), 함수 스코프만 따른다. 

함수 스코프의 최상단에 선언 

선언 키워드가 없는 선언은 최고 스코프에 선언

 

var보다는 let 사용 권장

재선언 방지

새로운 값 할당할일 없으면 const 사용

var로 선언된 전역변수 및 전역 함수는 window 객체(브라우저의 창 의미, 전역 영역)에 속함

window기능을 덮어씌어 내장 기능 사용하지 못하게 할수 있음

선언없이 변수를 사용하면 해당변수는 전역변수로 취급

실수 방지를 위해 strict mode(브라우저가 엄격하게 작동으로 선언없는 변수 할당시 에러로 작동)를 적용

Strict Mode를 적용할려면 js파일 상단에 'use strict'이라고 입력한다.

전역변수 많이 사용시 부수효과(side effect:함수내의 실행으로 외부가 영향받는것) 발생

 

클로저 함수 : 외부 함수의 변수에 접근할수 있는 내부 함수

 

화살표를 이용한 함수 호출

const add = (x,y) => x + y;

add(5,6); // 11

 

const adder = x => y => x+y;

adder(5)(6); //12

adder는 함수를 리턴하는 함수

 

클로저 함수 : 변수 및 함수 선언의 형태,함수와 함수가 선언된 어휘적(lexical) 환경의 조합,외부함수의 변수를 접근할수 있는 내부함수 

const adder = function (x) {

  return function(y){

      return x + y;

  }

} //외부함수 , 외부함수의 변수 x

const adder = function (x) {

  return function(y){

      return x + y;

  }

} //내부함수, 내부함수의 변수 y

리턴하는 함수에 의해 스코프가 구분

내부 함수는 외부 함수에 선언된 변수에 접근 가능

리턴하는 함수가 선언된 주변환경 중 x포함하고 있기에 접근 가능하다.

 

const adder = function ( x) {

   return function (y) {

     return x + y;

  }

}

const add7 = adder(7);

add7(6) // 13

add7(9) // 16

외부함수 실행이 끝나도 외부 함수 내 변수가 메모리상에 저장되어서 사용 가능

(어휘적 환경을 메모리에 저장하기 때문)

변수 add7에는 리턴할 함수가 담겨져 있다.(외부 함수 실행이 끝나고 adder함수에서 5라는 값을 x변수에 계속 담겨있음)

 

const tagmake = tag => content =>`<${tag}>${content}</${tag}>`

const divmake = tagmake('div')

div라는 문자열을 tagg라는 변수에 담아둠

특정 데이터를 스코프 안에 가두어둔채로 계속 사용 가능 

 

여러개의 내부함수 리턴

 

클로저 모듈 패턴

const count = () => {

   let value = 0;

 return {

   increase: () => {

    value = value +2;

  },

  decrease: () => {

   value = value -2;

  }

  getValue:() => value

} 

}

const count1 = count();

count1는 객체 

count함수는 increase,decrease,getValue함수를 포함한 객체 하나를 return한다.

 

let value =0 ;으로 

const count2 = count();

value값을 독립적으로 가진다.

 

count2.increase(); 정보의 접근제한(캡슐화)

 

클로저: 함수와 함수가 선언된 어휘적 환경의 조합

커링:n개의 함수를 만들어 각각 인자를 받는다.

클로저모듈: 변수를 외부 함수 스코프 안쪽에 감추어 함수 밖으로 노출되는 것을 막는다.

클로저 함수: 함수 내에서 다른 함수가 리턴되면, 외부함수에 있는 변수에 접근 가능

 

?

클로저는 return하는 함수 인데 그 주변에 어휘적환경(주변글자들)이 있다.

 

자바스크립트는 가비지 컬렉션을 통해 메모리 관리

객체 참조 대상이 아닐때, 가비지 컬렉션에 의해 메모리 할당이 해제

가비지컬렉션

Execution context:코드들이 실행되기 위한 환경

종류: 전역 컨텍스트(함수 안에서 실행되는 코드 아니면 모든 스크립트는 전역 콘텍스트에서 실행)

, 함수 컨텍스트(선언된 함수가 호출될때 기점으로 생성하고 동작이 끝나면 함수 컨텍스트 소명)

객체 : 변수 객체(정보들을 담을 객체 생성 , scope chain(전역 객체와 함수의 스코프의 레퍼런스 저장) , thisvalue

 

호출 스택과 함수 실행 순서

LIFO(last in , first out) 자료 구조 코드 실행하면서 실행 컨택스트들이 저장

실행 컨텍스트가 호출 스택에서 가장 위에 있는 함수를 실행하고 할일을 마치면 스택에서 제거

 

실행컨텍스트를 구성할때 생기는 것들

먼저 크게 Creation Phase와 Execution Phase으로 구분

Creation Phase

variable environment :외부 환경 정보

 environmentRecord와 outerEnvironmentReference로 구성 

lexical environment와 동일하다.

하지만 lexcical environment는 함수 선언과 let과 const의 바인딩을 저장하지만 variable environment는 변수 var만 저장한다.

 

lexical environment : 스코프와 식별자를 관리하는 역할

변수와 해당 변수에 대입된 값이 매핑되는 곳,변경 사항이 실시간으로 반영

 

 environmentRecord와 outerEnvironmentReference로 구성 

environmentRecord로 인하여 호이스팅이 발생한다.(매개변수 식별자,변수 식별자, 선언한 함수의 식별자 수집)

-> 변수와 함수 선언을 저장 , object environment record 포함(global object environment record도 기록)

outerEnvironmentReference로 인하여 스코프와 스코프체인이 형성된다.

외부 lexical 환경으로 접근(외부 환경에서 해당 변수를 찾을 수 있다.)

thisbinding

식별자가 바라봐야 할 대상 객체

글로벌 실행 컨텍스트에서 this는 global object

함수 실행 컨텍스트에서는 어떻게 함수가 호출되는지 따라 달라짐

object reference로 호출 -> 해당 객체를 가르킴

아니면 글로벌객체(window)나 strict mode에서는 undefined를 가르킨다.

 

Execution Phase

1. 먼저 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 컨텍스트가 생김
2. 컨텍스트 생성 시 컨텍스트 안에 변수객체(arguments, variable), scope chain, this가 생성
3. 컨텍스트 생성 후 함수가 실행되는데, 사용되는 변수들은 변수 객체 안에서 값을 찾고, 없다면 스코프 체인을 따라 올라감
4. 함수 실행이 마무리되면 해당 컨텍스트는 사라짐,(클로저 제외) 페이지가 종료되면 전역 컨텍스트가 사라집니다.

 

let과 const는 어떠한 값을 가지고 있지 않지만 const는 undefined을 가지고 있다.

실행 컨텍스트가 만들어질 동안 코드는 변수와 선언을 위해 scan

함수 선언은 environment에 저장되어있지만 변수들은 undefined나 초기화 되지 않는 상태임(호이스팅)

 

var변수는 선언하기 전에 undefined으로 접근이 가능

let과 const는 선언하기 전에 접근 불가능(접근하면 reference error)

let 변수의 값이 선언된 곳을 찾지 못하면 undefined이 된다.

css

<button class="toggle">toggle</button>
<div class="box" style="width: 100px; height: 100px; background: red;"></div>

 

js

var box = document.querySelector('.box');
var toggleBtn = document.querySelector('.toggle');

var toggle = (function () {
  var isShow =false;
 

  return function () {

    box.style.display = isShow ? 'block' : 'none';
    isShow = !isShow;
  };
})();
  
  toggleBtn.onclick = toggle;

 

ES6 주요 문법

javascript의 표준인 ECMAScript

 

ES6부터 적용된 문법

let , const , 템플릿 리터럴

 

spread / rest 문법

spread 문법 : 배열을 풀어서 인자로 전달 또는 각각의 요소로 넣을때

... :좌항에서 명시적으로 할당되지 않은 나머지 배열 값들을 사용

 

 

배열에서 사용

1. 배열 합치기

2. 배열 복사

객체에서 사용

so의 키가 같을 경우 , 값이 덮어 씌어짐

 

함수에서 파라미터 받아오기 

rest 문법 : 파라미터를 배열의 형태로 받아서 사용

 

Math.max -> 인자들만 전달, 배열은 전달 X

 

구조분해할당

spread문법을 이용하여 값을 해체한후 , 개별 값을 변수에 새로 할당

 

배열

객체

배열

 

객체