Homile

Local Storage란?

• 브라우저 내 데이터를 가지고 있는 저장소
• sessionStorage와 같지만 sessionStorage는 브라우저를 닫을 경우 데이터가 삭제된다.
• Local Storage는 브라우저를 새로고침, 닫기를 실행해도 데이터가 보존된다.
• 하지만, 시크릿 모드를 사용하여 Local Storage에 담긴 데이터는 시크릿 모드로 열린 브라우저를 닫으면 데이터가 삭제된다.

Local Storage 사용법

• 로컬 스토리지 내 데이터 저장
  • 객체 형태로 저장 된다.

//                     key     value
localStorage.setItem('minwoo', 'cho');

• 로컬 스토리지 내용 가져오기

const name = localStorage.getItem('minwoo');

• 로컬 스토리지 내용 삭제

localStorage.removeItem('minwoo');

• 로컬 스토리지 초기화

localStorage.clear();

값이 많을 경우

• 값이 많을 경우 value에 문자열로 할당된다.
• 이러한 경우를 방지하기 위해 JSON.stringify, JSON.parse를 사용한다.
• JSON.stringify를 사용하여 원하는 형태로 값을 할당
• JSON.parse를 사용하여 원래의 형태로 값을 받아옴.

const name = ['kim', 'lee', 'cho'];
localStorage.setItem('name', name);

const str = localStorage.getItem('name')
console.log(str);    // 'kim,lee,cho' 값이 문자열로 리턴


/*=================================================*/
localStorage.setItem('name', JSON.stringify(name));
const str2 = localStorage.getItem('name');
console.log(JSON.parse(str2));    // ['kim', 'lee', 'cho'] 배열 리턴

Local Storage 내용 보기(크롬기준)

1. F12를 눌러 개발자도구를 연다.

2. 개발자 도구 내 Apllication 탭에 들어간다.

3. 사이드 탭에 Storage -> Local Storage를 확인한다.

참고자료

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

클로저란?

• 외부 함수의 변수에 접근 할 수 있는 내부 함수
• JavaScript MDN: 클로저는 함수와 함수가 선언된 어휘적 환경의 조합, 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다
• 어휘적 환경의 조합이라는 것이 낯설게 느껴진다. 하지만, 앞서 작성한 스코프에 대해서 이해를 하고 온다면 유효범위가 지역범위라는 것을 알 수 있다.

외부함수, 내부함수(클로저)

• 외부 함수 안에 있는 함수가 내부함수이며, 클로저라고 불린다.
• 외부함수는 내부함수의 변수를 사용하지 못한다.
• 내부함수는 외부함수의 변수를 사용할 수 있다.
• 내부함수는 여러개를 작성할 수 있다.

function init() {
      let name = "minwoo";     // name은 init에 의해 생성된 지역 변수이다.
      function displayName() {    // displayName() 은 내부 함수이며, 클로저다.
        console.log(name);     // 부모 함수에서 선언된 변수를 사용한다.
      }
      displayName();
    }

init();

참고자료

• MDN

스코프(Scope)

변수의 접근할 수 있는 '유효범위'를 나타낸다.

스코프의 접근 범위

• 전역 스코프(Global Scope): 가장 바깥의 범위
  • 전역 스코프에서 선언한 변수는 지역 스코프에서 사용이 가능하다.
• 지역 스코프(Local Scope): 전역 스코프가 아닌 나머지 범위
  • 지역 스코프에서 선언한 변수는 전역 스코프에서 사용이 불가능하다.

let hi = 'hello'; // 전역 스코프

function talkMessage(){ // 지역 스코프
  let message = 'JavaScript';
  return hi + ' ' + message;
}

console.log(talkMessage());		// 'hello JavaScript'
console.log(hi);			// 'hello'
console.log(message);			// 'Uncaught ReferenceError: message is not defined'

지역 스코프에 변수는 전역 스코프의 변수보다 더 높은 우선순위를 가지게 된다.

• 전역 스코프에 let name = 'cho'이고, 지역 스코프에 let name = 'kim'일 때, 지역 스코프에서 name을 return 하면 name이 출력된다.
• 전역 스코프에만 변수가 선언될 경우 지역 스코프에서 전역 변수를 사용한다.

// 전역 변수와 지역 변수의 이름이 같을 경우
let name = 'cho';

function nameChange(){
    let name = 'kim';
    return name;
}

console.log(nameChange());		// 'kim'
console.log(name);		// 'cho'


// 전역 변수만 선언된 경우
let name = 'cho';

function nameChange(){
    name = 'kim';
    return name;
}

console.log(nameChange());		// 'kim'
console.log(name);		// 'kim'

객체(Object)

원시 타입을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이며, JavaScript의 객체는 key와 value로 구성된 property들의 집합이다.

객체의 구조

• key와 value가 존재
• key: 빈 문자열을 포함하는 모든 문자열
• value: 모든 데이터 값

let obj = {};
  // 'key'     'value'
obj['name'] = 'cho';
console.log(obj);		// {name: 'cho'}

객체 생성

• {} 객체 리터럴 방식으로 생성할 수 있다.
• new Object 함수로 생성할 수 있다.

// 객체 리터럴 방식
let obj1 = {};

// Object 생성자 함수
let obj2 = new Object();

객체 key, value 할당

• 객체 생성과 동시에 key와 value가 할당이 가능하다.
• key값을 사용하여 값을 재할당 할 수 있다.

// 선언과 동시에 할당
let obj = {
   name: 'cho',
   age: 20
};

// 객체 key 생성 및 value 할당
obj['year'] = 2022;		// {name: 'cho', age: 20, year: 2022}

// 값 재할당
obj['year'] = 2021;		// {name: 'cho', age: 20, year: 2021}

객체 key, value 출력

• 객체[key]: key값은 항상 문자열로 작성해야 한다.
• 객체.key: 객체의 key를 사용하여 출력한다.
• 변수 사용: 변수에 해당 객체의 속성을 문자열로 할당시켜 객체[key] 방식으로 출력한다.

let obj = {
   name: 'cho',
   age: 20
};

// []안에 문자열로 출력
obj['name'];		// 'cho'

// 객체.객체속성으로 출력
obj.name;		// 'cho'

// 변수를 이용한 출력
let str = 'name';
obj[str];		// 'cho'

참고자료

https://poiemaweb.com/js-object

배열(Array)

순서가 있는 값을 저장할 때 사용하는 자료구조이며 배열을 사용하는 자료구조의 대표적인 예로 스택, 큐, 덱이 있다.

배열의 구조

• 요소가 들어있는 방의 번호를 인덱스라고 하며, 정수형만 입력이 가능하고 0부터 시작한다.
• 배열에 값을 삽입하는 js 메서드는 push(), unshift()가 있으며, 삭제하는 메서드는 pop(), shift()가 있다. 
  자세한 내용은 자료구조 스택에서 다룬다.

배열생성 및 출력

• []을 사용하여 빈 배열을 생성할 수 있다.
• new Array()를 사용하여 빈배열을 생성할 수 있다.
• [](배열리터럴)을 사용하여 '배열[인덱스]'형식으로 요소를 출력 할 수 있다.

let num = [32, 43, 54];
let name = new Array('cho', 'kim', 'park');

console.log(num);		// [32, 43, 54]
console.log(name);		// ['cho', 'kim', 'park']

// num의 1번째 인덱스의 요소 출력
console.log(num[1]);	// 43

// name의 0번째 인덱스의 요소 출력
console.log(name[0]);	// 'cho'

// name의 마지막번째 인덱스 요소 출력
console.log(name[name.length-1]);	// 'park'

배열의 요소 재할당

let num = [32, 43, 54];

console.log(num);		// [32, 43, 54]

num[2] = 79;			// 54에서 79로 요소를 재할당
console.log(num);		// [32, 43, 79]

2차원 배열

let num = [[32, 43], [54, 65], [24, 89]];

console.log(num[1]);		// [54, 65]
console.log(num[1][0]); 	// 54

📌 반복문: 같거나 비슷한 코드를 여러번 실행해야 하는 경우에 사용한다.

📌 반복문의 종류

• for
• for...in
• for...of
• while
• do ...while

📌 for

• 어떠한 조건이 거짓이 될 때까지 반복한다.
• 주로 특정 조건이 주어져 있을 경우에 많이 사용합니다.
• for (초기문; 조건문; 증감문)
  문장
• ex) 초기문 i = 1, 조건문 i <= 4, 증감문 i++
  시작은 1부터 시작하며 조건문 i가 4와 같거나 작을 때 반복문이 수행되며 1번 반복할 때마다 i가 1씩 증가한다.
  반복되는 문장 = i의 현재 값을 출력한다.

for (let i = 1; i <= 4; i++){
	console.log(i);
}

/*
output1: 1
output2: 2
output3: 3
output4: 4
*/

📌 for...in

• 객체의 열거 속성을 통해 지정된 변수를 반복합니다.
• for(let i in 변수)
  문장
• ex) name의 길이 = 6이므로 열거 속성을 이용해 6번 반복한다.

let name = 'homile';

for (let i in name){
	console.log(i);
}

/*
output1: 0
output1: 1
...
output6: 5
*/

📌 for...of

• for...in은 속성의 이름을 통해 반복하지만 for...of는 속성의 값을 통해 반복합니다.
• for(let i of 변수)
  문장
• ex) name의 길이 = 6 이므로 속성의 값을 6번 반복하여 출력한다.

let name = 'homile';

for (let i of name){
	console.log(i);
}

/*
output1: h
output1: o
...
output6: e
*/

📌 while

• 어떠한 조건이 참일 때 계속해서 반복합니다.
• 계속 반복하여 주어진 조건을 찾을 때 사용합니다.
• 주의할 점은 어떠한 조건이 계속 참일 경우 무한히 반복되므로 작성에 주의해야 합니다.

let a = 0;
let b = 0;

while (a < 3){
	a++;
    b += a;
    console.log(b);
}

/*
output1: 1	// a = 1 < 3
output2: 3	// a = 2 < 3
output3: 6	// a = 3 < 3 → while문 종료
*/

📌 do...while

• 문장이 한번 실행되고 조건이 거짓이 될 때까지 반복합니다.
• do
      문장
  while(조건문)
• do {} 안에있는 문장이 최소 1번 실행되고 while조건이 참이라면 반복적으로 실행됩니다.

let i = 0;

do{
    i++;
    console.log(i);	
}while (i < 3);

/*
output1: 1
output2: 2
output3: 3
*/

📌 break

• break문을 만나면 가장 가까운 반복문, switch문을 종료하고 다음 명령을 실행합니다.
• ex) for문은 0부터 5이하까지 반복하는데 조건문으로 i가 2일 때, break문을 만나서 for문이 종료됩니다.

for (let i = 0; i < 5; i++){
	if (i === 2){
    	break;
    }
    console.log(i);
}

/*
output1: 0
output2: 1
*/

📌 continue

• 현재 실행중인 반복을 종료하고 다음 반복 명령을 실행합니다.
• ex) for문은 0부터 5이하까지 반복하는데 조건문으로 i가 2일 때, continue문을 만나서 반복이 종료되어서 2를 제외한 값이 출력됩니다. 이때, 반복문이 종료되는 것이 아닌 현재 진행중인 반복이 종료된다는 것을 주의하셔야 합니다.

for (let i = 0; i < 5; i++){
	if (i === 2){
    	continue;
    }
    console.log(i);
}

/*
output1: 0
output2: 1
output3: 3
output4: 4
*/

📝 참고자료

JavaScript MDN 루프와 반복