Homile

Local Storage란? 브라우저 내 데이터를 가지고 있는 저장소 sessionStorage와 같지만 sessionStorage는 브라우저를 닫을 경우 데이터가 삭제된다. Local Storage는 브라우저를 새로고침, 닫기를 실행해도 데이터가 보존된다. 하지만, 시크릿 모드를 사용하여 Local Storage에 담긴 데이터는 시크릿 모드로 열린 브라우저를 닫으면 데이터가 삭제된다. Local Storage 사용법 로컬 스토리지 내 데이터 저장 객체 형태로 저장 된다. // key value localStorage.setItem('minwoo', 'cho'); 로컬 스토리지 내용 가져오기 const name = localStorage.getItem('minwoo'); 로컬 스토리지 내용 삭제 loca..

클로저란? 외부 함수의 변수에 접근 할 수 있는 내부 함수 JavaScript MDN: 클로저는 함수와 함수가 선언된 어휘적 환경의 조합, 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다 어휘적 환경의 조합이라는 것이 낯설게 느껴진다. 하지만, 앞서 작성한 스코프에 대해서 이해를 하고 온다면 유효범위가 지역범위라는 것을 알 수 있다. 외부함수, 내부함수(클로저) 외부 함수 안에 있는 함수가 내부함수이며, 클로저라고 불린다. 외부함수는 내부함수의 변수를 사용하지 못한다. 내부함수는 외부함수의 변수를 사용할 수 있다. 내부함수는 여러개를 작성할 수 있다. function init() { let name = "minwoo"; // nam..

스코프(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.lo..

객체(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 할당 객체..

배열(Array) 순서가 있는 값을 저장할 때 사용하는 자료구조이며 배열을 사용하는 자료구조의 대표적인 예로 스택, 큐, 덱이 있다. 배열의 구조 요소가 들어있는 방의 번호를 인덱스라고 하며, 정수형만 입력이 가능하고 0부터 시작한다. 배열에 값을 삽입하는 js 메서드는 push(), unshift()가 있으며, 삭제하는 메서드는 pop(), shift()가 있다. 자세한 내용은 자료구조 스택에서 다룬다. 인덱스(Index) 0 1 2 3 요소(element) 'banana' 'apple' 'peach' 'pineapple' 배열생성 및 출력 []을 사용하여 빈 배열을 생성할 수 있다. new Array()를 사용하여 빈배열을 생성할 수 있다. [](배열리터럴)을 사용하여 '배열[인덱스]'형식으로 요소를..

📌 반복문: 같거나 비슷한 코드를 여러번 실행해야 하는 경우에 사용한다. 📌 반복문의 종류 for for...in for...of while do ...while 📌 for 어떠한 조건이 거짓이 될 때까지 반복한다. 주로 특정 조건이 주어져 있을 경우에 많이 사용합니다. for (초기문; 조건문; 증감문) 문장 ex) 초기문 i = 1, 조건문 i

📌 문자열: ''(따옴표)로 감싸진 데이터 값 let name = "cho"; console.log(name); // output: 'cho' 📌 문자열 내 특수문자 사용법 일반적으로 특수문자를 사용하듯이 하면 JS내에서는 작성되지 않는 경우가 있습니다. 위와 같은 경우 JS내에서 특수문자를 사용할 수 있는 기호들이 많이 존재하는데 그 중 자주 사용하는 문자를 작성해 보겠습니다. 특수문자 설명 \n 개행 \t 수평 탭 \b 백 스페이스 \\ \ 기호 \' '(작은 따옴표) \" "(큰 따옴표) 📌 문자열과 함께 사용하는 메서드 문자열에서 자주 사용하는 메서드들이지만 배열과 함께 사용하는 경우도 다수 존재합니다. concat(data1, data2, ...) 주로 배열을 이어 붙일때 많이 사용하지만 문자열..

📌 조건문: 참과 거짓을 판별하는 말그대로 '조건'을 구분할 수 있다. if ~else, if ~else if와 같이 단일 조건문으로 사용할 수 있으며 중복으로 조건을 처리할수도 있다. 논리 연산자(&&(and), ||(OR)) 연산자를 사용하여 조건문안에 조건식을 세워 줄 수 있다. 📌 if: if 문의 조건이 참일 때 명령문이 실행되고 거짓일 때 명령문이 실행되도록 한다. let a = 10; let b = 5; if (a > b){ // 조건이 참일 때 실행 console.log(`a가 b보다 큽니다.`); }else{ // 조건이 거짓일 때 실행 console.log(`b가 a보다 큽니다.`); } 📌 if ...else if: 조건문을 연속으로 지정할 때 사용한다. let a = 10; let ..

📌 함수(Function) 하나의 작은 기능을 하는 것. 함수에 값을 '전달'하면 함수에서 값이 반환된다. 속성과 메서드를 모두 가질 수 있으면 '일급 객체'라고 한다. 📌 함수 정의하기 함수 선언식 function name (param){ return param; } 함수 표현식 // 일반적인 함수 표현식 const name = function(param) { return param } // 함수 표현식 + 함수 선언식 const name = function names(param) { return param } 화살표 함수 const name = (param) => { return param; } 📌 함수 호출하기 함수명(인자(agrument)); // 함수 표현식으로 선언 const name = fu..

📌 변수란? - 데이터를 편하게 다루기 위한 데이터의 이름 📌 변수의 선언(declaration) 및 할당(assignment) 선언: let name; 할당: name = "ho"; let age = 12; 선언이 미리 되어있다면 변수명에 바로 할당 할 수 있다. 선언과 할당을 동시에 할 수 있다. 변수를 선언 하는 문법 (var, let, const) var: 변수를 선언하는데 가장 오래된 문법 (현재는 let을 많이 사용한다.) 선언한 변수를 전역적으로 사용이 가능하며 두번 선언할 수 있다. let: var문법의 상위문법이다. 범위는 블록으로 이루어져 있어 범위를 벗어나면 호출할 수 없다. let을 사용하여 같은 블록 내에서 2번 선언 할 수 없다. let a = 1; if (true){ let b..