BlockChain

1. 스코프

2.  Scope Chain

1. 스코프

자바스크립트에서 스코프는 '범위'라는 뜻을 가지고 있다. 스코프란 변수에 접근할 수 있는 범위라고 할 수 있다. 스코프에는 2가지 타입이 있다. 전역 스코프와 지역 스코프이다. 

전역 스코프는 전역에 선언되어 있어 어느 곳에서든지 해당 변수에 접근할 수 있다는 의미이고, 지역 스코프는 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에서 접근할 수 없다는 의미이다. 자바스크립트는 함수를 선언할 때마다 새로운 스코프를 생성하게 된다. 그렇기 때문에 함수에서 선언한 스코프는 함수 내부에서만 사용할 수 있는 이것을 함수 스코프라고 한다. 함수스코프는 지역스코프의 예시라고 볼 수 있다.

var a = 1; // 전역 스코프
function print() { // 지역(함수) 스코프
 var a = 111;
 console.log(a);
}
print();
console.log(a);

위 코드를 통해 지역스코프, 함수스코프, 전역 스코프를 알아 보도록 하자.

위와 같은 코드를 실행했을 때 어떤식으로 콘솔이 작용할까?  print() 함수 가 있고, console.log(a)를 실행하게 된다. 두 가지가 실행되었을 때는 print() 함수 내에 console.log(a)에서 지역변수인 a = 111을 출력하기 때문에 111이 출력되고, 이후 console.log(a)가 실행될 땐 전역변수 a = 1 이 들어가 1이 출력되게 된다. 고로 111 엔터 1 이 출력되는 것을 알 수 있다. 이때 우리는 지역스코프(함수 스코프)는 자신이 만들어둔 함수나 { }  블록스코프 내에서 작동하는 것을 알 수 있고, 블록스코프를 나오면 블록스코프 내에서 동작했던 지역변수 a 가 사라지고 블록 외부에 전역변수 a 가 동작하는 것을 알 수 있다. 

var a = 1; // 전역 스코프
function print() { // 함수 스코프
 console.log(a);
}
print(); // 1

다음 위와 같은 코드가 동작한다면, console 에는 무엇이 찍힐까 ?  이때 print()을 동작시킨다면,  print() 함수 내에 console.log(a)는 지역 내에 a 변수가 없기 때문에 전역변수 1을 출력하게 된다. 이는 Scope Chain 에서 일어나는 현상이다. 스코프 체인이란 가장 가까운 스코프가 묶여 있지 않다면 가장 가까운 변수 객체의 스코프 순으로 접근한다. 

2.  Scope Chain

스코프 체인은 일종의 리스트로 전역 객체와 중첩된 함수의  스코프의 레퍼런스를 차례로 저장하고, 스코프가 어떻게 연결되어 있는지 보여주는 것이다.  

>> 스코프 체인은 콜스택에 올라간 실행된 콘텍스트 내에서 있는 데이터 들에 대한 접근을 의미한다. 그러므로 실행된 함수 내에서만 지역스코프로 사용될 수 있고, 반면, 전역 스코프의 경우 상위 함수나 객체들이 데이터로 가지고 있다면 Scope Chain를 이용하여 사용할 수 있다. 

아래에 그림을 보면 왼쪽은 call stack, 오른쪽은 메모리힙이다. 이때 빨간색으로 칠해진 부분은 브라우저가 스크립트를 처음 실행 했을 때 모든 것을 포함하는 전역콘텍스트가 콜스택에 생긴다. 이후 함수를 호출하면서 그 위에 검은색 함수 콘텍스트(실행 콘텍스트) 들이 쌓이게 되는데 이때 콜스택 내에서 함수가 저장된 위치(주소값)를 따라 힙에 접근하고, 함수가 동작하면서 함수 내부의 데이터들이 호이스팅 된다. 또한 함수 내에서는 함수 스코프(지역스코프)를 이용하여 내부 변수들과 함수들에 접근 가능하다. 이때 만약 내부에 접근할 변수가 없다면 Scope Chain 이 자동으로 상위 함수콘텍스트들을 찾아 데이터를 접근하게 된다. 이것이 Scope Chain이다.

var a = 1; // 전역 스코프
function print() { // 함수 스코프
 console.log(a);
}
print(); // 1

결국 function print() 내에서 a 에 대한 값이 없기 때문에 상위 데이터인 전역 데이터를 Scope chain을 통해 가져오게 된다. 실제로 print() 함수를 실행하면 1이라는 데이터를 가져오게 된다.

etc) 함수 스코프 도움되는 사이트

https://ljtaek2.tistory.com/140

html과의 차이 : <script> </script> 안에 작성함
document.write('ex') : ex라고 화면에 출력함
* html과의 차이점
    1. html은 단순히 표시된 것만 출력함(정적표현) ex) 1+1 -> 1+1로 출력
    2. javascript는 입력된 것을 연산해서 출력(동적표현) ex) 1+1 -> 2로 출력
<input type="button" value="hi"> : hi라고 적힌 button을 생성
(input 안에) onclick="alert('hi)" : 버튼 클릭 시 hi가 적힌 경고창을 발생시켜줌
//onclick : 마우스가 해당버튼을 클릭했을 때 이벤트를 발생시킴(뒤에 자바스크립트 함수만 올 수 있음), alert : 경고창을 발생시켜줌
(input 안에) onchange="alert('changed') : 해당 창 안에 변화 발생 시 'changed'라고 적힌 경고창을 발생시켜줌
(input 안에) onkeydown="alert('keydown') : 키보드에서 문자가 입력되면 'keydown'이라고 적힌 경고창을 발생시켜줌(키 인식 이벤트)
* 데이터 타입
    1. number : 숫자데이터, 산술연산 가능
    2. string : 문자열, ''나 ""로 사용, 함수 : .length - 문자열 길이, .toUpperCase() - 문자열 대문자화, .indexOf() - 문자열에서 해당 문자 찾음
    3. 변수 : 바뀔 수 있는 어떤 값 ex) var x = 1; //var 태그는 변수를 정의할 때 사용
    4. 배열 : 같은 타입(구조)의 자료형들로 이루어진 집합 ex) var coworkers = ["park", "kim"];
//배열함수 push(끝에항목추가), pop(끝항목제거), shift(처음항목제거), unshift(앞에항목추가), indexOf(인덱스검색), splice(위치항목제거), slice(복사), length(길이) 등
* 연산
    - 비교연산자(boolean) : ===, <, >
* 반복문
    - 일반 프로그래밍 언어의 반복문과 유사
* 함수
    - 동일한 기능을 여러번 쓰기 편하게 해줌
    - 매개변수 : 함수에 이용할 변수
    - 리턴 : 함수가 결과값을 반환함
    ex) function sum_Red(left, right) { document.write('<div style = "color:red"> + (left+right)+'</div><br>'); }
var el = document.querySelector(".myclass") : 문서에서 myclass라는 클래스를 사용하는 첫 번째 요소를 반환함
.style : style 속성을 포함한 css 선언을 담은 객체를 반환
.backgroundColor="red" : 배경색을 red로 지정
조건문 : 일반적인 언어의 조건문과 유사 //if(조건){코드}else{코드}
* 원하는 버튼의 value 값 가져오기(id이용)
var value = document.getElementById(id).value;
* 버튼 클릭 시 이벤트 넣기 : 한 버튼을 클릭하면 상태를 받아 변화시킴
ex) <input id="day_status" type="button" name="status" value="change night" onclick="
    if(document.querySelector('#day_status').value === 'change night'){
        document.querySelector('body').style.backgroundColor = 'black';
        document.querySelector('body').style.color = 'white';
        document.querySelector('#day_status').value = 'change day';
    } else {
        document.querySelector('body').style.backgroundColor = 'white';
        document.querySelector('body').style.color = 'black';
        document.querySelector('#day_status').value = 'change night';
    }">
리팩토링 : 코드에 중복을 제거하고 가독성을 높이는 것
this : this 키워드 태그로 묶여진 코드 안에 있는걸 가리키는 키워드
객체 : 여러 속성을 하나의 변수에 저장할 수 있는 데이터 타입
* 객체 특징 (참조 : https://velog.io/@surim014)
    1. 객체는 변수이다. 그러나 객체에는 많은 값이 포함될 수 있다.
    2.(자바스크립트 변수처럼 단일 값을 포함 할 수 있다.)
    3. 객체는 중괄호 표기를 이용하여 만들 수 있다.
    4. 객체는 각각의 key/value에 대한 정보를 나열할 수 있다.
    5. Key는 문자열 또는 기호여야 한다.
    6. Value는 모든 유형이 될 수 있다.
    7. 객체는 한 쌍의 key/value 뒤에 쉼표를 이용하여 그 뒤에 오는 key/value와 구분해주어야 한다.
    8. 객체에서 명명된 값을 Properties라고 한다.
    9. 변수는 예약어의 이름을 가질 수 없지만 객체는 어떠한 이름이어도 상관없다.
    10. 객체 변수를 복사하면 참조가 복사되고 객체가 복제되지 않는다.
객체에 변수 담기 : ex) var coworkers = { "programmer":"daniel", "designer":"kim" };
객체 변수에 접근 : ex) coworkers.programmer; or coworkers["programmer"]; == "daniel"
객체 추가하기 : ex) coworkers.bookkeeper = "david"; or coworkers["bookkeeper"] = "david";
객체 불러오기(반복문) : ex) for(var key in coworkers) { coworkers[key] }
객체에 함수 담기 : ex) coworkers.함수이름 = function() { for(var key in this) { this[key] } //coworkers.함수이름()으로 실행
color 를 지정하는 js 파일을 따로 만들고 <script src="파일이름.js"></script> 형식으로 불러와 쓸 수 있음
라이브러리 : 자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드들
JQuery : 엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는 자바스크립트 라이브러리
구글의 자바스크립트 라이브러리 사용
head 태그 안에 추가-> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
* 사용
    1. $('a') : 모든 a태그를 선택
    2. .css(propertyName, value) : .css로 선택한 요소의 css 속성값을 가져오거나 속성을 추가함

예제용 페이지 : https://naughty-bardeen-303e92.netlify.app/

깃허브 주소 : https://github.com/tkdans7589/web-programming-study

참고한 사이트 : https://kimsfamily.kr/