코드메모장

(1) DIV 보이기, 감추기

• 자바스크립트

let temp = document.getElementById("Id")
temp.style.display = "none" // 감추기
temp.style.display = "block" // 보이기

• jquery

<script>
	$("#id").show() //보이기
	$("#id").hide() //감추기
</script>

(1) LocalStorage, SessionStorage 란?

• DOM 저장소 ( 문서 개체 모델 저장소) 라고도하는 웹 저장소는 클라이언트 측 데이터를 저장하기위한 메서드와 프로토콜을 웹 앱에 제공 합니다. 
• 웹 저장소는 쿠키와 유사 하지만 용량이 크게 향상되고 HTTP 요청 헤더에 저장된 정보가없는 영구 데이터 저장소를 지원합니다.
• 웹 저장소는 Local Storage와 Session Storage는로 나누어져 있습니다.
• Local Storage는 세션이 종료되어도 데이터가 사라지지 않고 남아있으며 Session Storage는 세션종료(페이지 종료)시 데이터가 사라집니다.

(2) LocalStorage, SessionStorage 사용법

Local Storage와 Session Storage는 동일한 메소드와 프로퍼티를 제공합니다.

//키-값 쌍을 보관
localStorage.setItem(key, value)
sessionStorage.setItem(key, value)

//키에 해당하는 값 반환
let val = localStorage.getItem(key)
let val = sessionStorage.getItem(key)

//키에 해당하는 값 제거
localStorage.removeItem(key)
sessionStorage.removeItem(key)

//모두 삭제
localStorage.clear()
sessionStorage.clear()

//index에 해당하는 키값 반환
let key = localStorage.key(index)
let key = sessionStorage.key(index)

//저장된 항목의 개수 반환
let size = localStorage.length
let size = sessionStorage.length

참조 - en.wikipedia.org/wiki/Web_storage, ko.javascript.info/localstorage#ref-30

(1) 논리 연산자

• 논리 연산자는 보통 부울 값으로 사용하지만, 그렇지 않을 경우 실제로 명시된 피연자들 중 하나를 반환한다.

//예시
true && false; // false
true && "Hello World"; // Hello World

true || false; // true
"Hello World" || true; //"Hello World"

(2) &&(논리곱, AND) 연산자

•  expr1 && expr2 인 경우 expr1을 true로 변환할 수 있는 경우 expr2을 반환하고, 그렇지 않으면 expr1을 반환합니다.

true && true;     // t && t returns true
true && false;    // t && f returns false
false && true;     // f && t returns false
false && (3 == 4); // f && f returns false
"Cat" && "Dog";    // t && t returns Dog
false && "Cat";    // f && t returns false
"Cat" && false;    // t && f returns false

(3) ||(논리합, OR) 연산자

• expr1 || expr2 인 경우 expr1을 true로 변환할 수 있으면 expr1을 반환하고, 그렇지 않으면 expr2를 반환합니다.

true || true;      // t || t returns true
false || true;     // f || t returns true
true || false;     // t || f returns true
false || (3 == 4); // f || f returns false
"Cat" || "Dog";    // t || t returns Cat
false || "Cat";    // f || t returns Cat
"Cat" || false;    // t || f returns Cat

(4) !(NOT) 연산자

• 단일 피연산자를 true로 변환할 수 있으면 false를 반환합니다. 그렇지 않으면 true를 반환합니다.

!true;  // !t returns false
!false; // !f returns true
!"Cat"; // !t returns false

참조 - developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators#%EB%85%BC%EB%A6%AC_%EC%97%B0%EC%82%B0%EC%9E%90

(1) 블록 레벨 스코프

대부분의 프로그래밍 언어는 블록 레벨 스코프(Block-level scope)를 따르지만 자바스크립트는 함수 레벨 스코프(Function-level scope)를 따른다.

• 함수 레벨 스코프(Function-level scope) - 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.
• 블록 레벨 스코프(Block-level scope) - 모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.

위와 같이 var키워드 특성 상 변수 a는 전역변수로 할당 되며 변수 a의 재정의, 재할당 하는것에 있어 문법적으로 문제가 없는 것을 확인할 수 있다. 이러한 경우 의도하지 않은 변수값의 변경이 일어날 가능성이 크다. 이것을 방지하기 위해 블록 레벨 스코프를 따르는 let키워드를 제공한다.

(2) 변수 중복 선언

var 키워드로는 동일한 이름을 갖는 변수를 중복해서 정의할 수 있다. 하지만 let 키워드는 동일한 이름을 갖는 변수를 중복해서 선언 할 수 없다.

(3) 재할당

const키워드는 let키워드와 비슷하지만 const는 반드시 선언과 동시에 할당이 이루어져야 한다. 또한 이미 할당한 값을 변경할 수 없으며 변경경우 문법적으로 에러가 발생한다.

(4) Const와 객체

const는 재할당이 금지되지만, const타입의 객체인 경우 객체의 프로퍼티는 변경이 가능하다.

참조 - poiemaweb.com/es6-block-scope