함수 활용

함수의 인자와 매개변수

변수의 참조 영역

자바스크립트의 함수, 변수는 정의되어 있는 영역 안에서만 존재함
return을 이용하면 함수 내부의 데이터를 밖으로 건네줄 수 있음

const variablesArea = function(){
	let confined = "I'm trapped"
}
console.log(confined)

// 실행오류
// 함수 안에서 선언된 변수 confined는 함수 외부에서 참조될 수 없음 

매개변수

함수는 외부의 데이터를 받아와서 로직을 수행하는 것도 가능함
함수를 정의할 때 내부에서 사용할 변수를 선언할 수 있음

const paramFunc = function(param1, param2){
	console.log(param1 + param2)
}

// parma1, param2 : 함수에서 사용되는 매개변수

전달인자

함수를 매개변수와 함께 정의했다면 함수를 호출하는 과정에서 전달인자를 건네줄 수 있음
전달인자를 담아주는 순서에 따라 매개변수에 담길 값이 정해짐

const paramFunc = function(param1, param2){
	console.log(param1 + param2)
}

paramFunc(1,2)

✅ 전달인자 & 매개변수를 통해 여러 개의 데이터에 만들어준 로직을 똑같이 적용할 수 있음 -> 재사용성이 높아짐

---

브라우저의 Web Storage

• 웹 브라우저는 Web Storage 라는 저장소를 제공
  • sessionStorage
  • localStorage
• 어떤 로직에 활용되는 데이터를 유지해야 할 때, 저장소에 저장할 수 있음
• local 환경에 데이터를 저장함
• 데이터가 key - value 형태로 저장되며 모두 문자열 형태로 변환됨

sessionStorage

데이터를 세션 단위로 저장
세션 : 사용자가 페이지에 접속하는 순간부터 접속이 끊어지는 순간까지를 의미

해당 페이지와 접속이 끊어지거나, 브라우저가 종료되면 데이터를 영구히 삭제
-> 휘발성 메모리

• key-value 형태로 저장
• 로컬 환경에 데이터 저장
• 문자열 형태로 데이터 저장
• 세션 단위로 데이터 저장
• 브라우저, 탭을 종료하면 영구 삭제

localStorage

데이터를 도메인 단위로 저장
도메인이 같다면 path가 다르더라도 서로 데이터를 공유

http://localhost:5500/user/login
http://localhost:5500/post
-> localhost라는 공통된 도메인, 서로 다른 path(/user/login, /post)

브라우저, PC를 종료하더라도 데이터가 남아있음 -> 비휘발성 메모리
직접 데이터를 삭제할 때까지 존재함

페이지를 재방문했을 때도 남아있어야 하는 사용자 개별 설정 등의 데이터를 저장

• key-value 형태로 저장
• 로컬 환경에 데이터 저장
• 문자열 형태로 데이터 저장
• 도메인 단위로 데이터 저장
• 브라우저, PC를 종료해도 존재

---

local storage 접근방법

localStorage.setItem( )

소괄호 안에 key 값과 value 값을 넣어서 데이터를 저장

localStorage.setItem("data-key", "data-value")

// 소괄호 안에 저장할 데이터를 담아줌
// key-value 형태로 저장됨

localStorage.getItem()

localStorage에 저장된 데이터를 key값으로 꺼내올 수 있음

localStorage.getItem("data-key")

// 소괄호 안에 저장한 데이터의 key값을 담아서 호출