Will find a way

목차

1. 쿠키

2. 세션 스토리지

3. 로컬 스토리지

1. 쿠키

- 쿠키는 유효기간이 있으며 서버로 전송되는 작은 텍스트 파일

- 서버로부터 정송된 쿠키는 웹 브라우저에 저장되며, 이후 해당 웹 사이트를 방문할 때마다

  해당 쿠키는 서버로 전송됩니다.

-  쿠키는 일반적으로 사용자 식별, 장바구니, 선호설정, 장바구니 등의 정보를 저장하는데 사용됩니다.

유효기간이 지나면 삭제됩니다.

function createCookie(name, value, time){
  // 썩은 쿠키는 유효하지 않는다.
  // 시간을 넣지 않고 쿠키를 생성하면 세션 쿠키 지속 계속 되는 쿠키
  let date = new Date();
  // ms로 시간을 증가된 값을 만들어서 
  // 1000 = 1초

  // 1일 이후의 시간을 만들면
  // time === 일 단위
  // time === 2면 2임
  date.setTime(date.getTime() + time * 24 * 60 * 60 * 1000); // ms setTime : 수정하겠다.
  document.cookie = name + "=" + value + ";" + "expires=" + date.toUTCString() + ";" + "path=/" 
  //page=/ domain까지 로그인했을
}

console.log(new Date().getTime());

createCookie("devOps2", 86858585, 1);
createCookie("devOps3", 1242143, 1);
console.log(document.cookie);
// [[devOps2,123], [devOps3, 1242143]]

// 문자열을 잘라서 가져오는 함수를 만들자
function getCookie(name){
  let arr = document.cookie.trim().split(";");
  let result = undefined;
  for (let i = 0; i < arr.length; i++){
    arr[i] = arr[i].trim().split("=");
    console.log(arr[i][0]);
    if (arr[i][0].trim() === name){
      result = arr[i][1];
    }
  }
  console.log(arr);
  console.log(result)
  return result;
}
getCookie("devOps3")

2. 세션 스토리지

- 서버에 불필요한 데이터를 저장하지 않습니다.

- 브라우저를 종료할 때까지 인증상태를 유지(탭/윈도우가 닫히면 세션 스토리지는 초기화)

- 쿠키보다 보안이 뛰어납니다.

// 세션에 값을 저장
// setTime
sessionStorage.setItem("토큰", "데이터의 내용");

// 세션의 값을 호출
// 토큰의 키가 있으면 데이터를 호출
sessionStorage.getItem("토큰");

// 모든 세션을 전체 삭제
sessionStorage.clear();

// 세션 하나 제거
sessionStorage.removeItem("토큰");

3. 로컬 스토리지

- 브라우저 창을 닫더라도 데이터가 유지됩니다.

- 서버에 불필요한 데이터를 저장하지 않습니다.

- 자동로그인에 사용됩니다.

// 로컬 스토리지는 큰 데이터를 저장할 때 사용한다.
localStorage.setItem("토큰", "데이터의 내용");

localStorage.getItem("토큰");

localStorage.clear();

localStorage.key(0);

// 객체를 문자열로 변환하면 obeject
// JSON 문자열로 변경

let obj = { name : "자카" };
console.log(String(obj)); // Object Object 출력
// String 생성자 : 전달받은 인자를 문자열로 변환

// 컴퓨터와 컴퓨터는 데이터를 주고받을 때 문자열로 주고 받는다
console.log(JSON.stringify(obj)); // 문자열로 변환
// 데이터를 보낼 준비
obj = JSON.stringify(obj); // 다시 배열로 변환
// 데이터를 전달받은 서버

let arr = [{name : "자카"}, {name : "자카박"}];
localStorage.setItem("todo",JSON.stringify(arr));

let obj2 = localStorage.getItem("todo");
console.log(obj2);
obj2 = JSON.parse(obj2);
console.log(obj2);

DOM (Document Object Model)

브라우저가 웹 문서를 이해할 수 있도록 구성된 것
html 태그를 동적으로 제어한다
브라우저가 html 페이지를 로드하는 과정에서 태그들은 각기 하나의 객체로 만든다.
html 문서의 내용을 노드트리 구조의 객체들로 나타낸다.

요소 선택
자바스크립트에서 DOM 요소를 조작하기 위해서 사용

document ( html 문서의 내용이 들어있다.)

document.getElementById("header")  // header 라는 아이디를 가지고 있는 요소를 찾아서 반환
document.createElement("span");  // span 태그 데이터를 생성 (HTML에는 나오지 않는다.)
!! HTML에 내용을 추가하기위해서 append를 사용한다. !!

header.innerHTML = ""; // 태그 요소 안에 내용을 넣을 수 있다.
header.innerTEXT = ""; // 태그 요소 안에 텍스트 내용을 넣을 수 있다.

DOM 구조를 이용한 게시판 만들기

function createContent(index, title, content){
    let _li = document.createElement("li");
    let _span01 = documnet.createElement("span");
    let _span02 = documnet.createElement("span");
    let _span03 = documnet.createElement("span");
    
    // li span span span --> 생성만 함 (변수로만 가지고 있다.)
    // 필요한건 내용 추가하고 span을 li에 넣어줘야한다.
    
    _span01.innerHTML = index;
    _span02.innerHTML = title;
    _span03.innerHTML = content;
    _li.append(_span01);
    _li.append(_span02);
    _li.append(_span03);
    
    // 배열로 설명
    document.querySelector(".border").append(_li);
}

// 데이터베이스의 내용을 받아서
// DTO (Data transfer Object)
// 데이터를 우리가 사용할 형태로 변경해서 받아온다.

let arr = [{index : 1, title : "제목1", content : "내용"}]

function render(){
    document.querySelector(".border").innerHTML = `
        <li>
          <span>인덱스</span>
          <span>제목</span>
          <span>내용</span>
        </li>
    `;
    for(let i = 0; i < arr.length; i++){
        createContent(arr[i].index, arr[i].title, arr[i].content);
    }
}

function postContent(){
    let _title = title_input.value;
    // 아이디 활용 value input 에 입력한 값
    let _content = content_input.value;
    const content = {
        index : arr.length + 1;
        title : _title,
        content : _content
    }
    arr.push(content); // 배열에 요소 추가 (push)
    render();
}

목차

1. 객체

2. 클래스

 2 - 1 클래스 상속 (extends, super)

1. 객체

객체는 참조형 데이터 타입

하나의 사물을 표현하는 여러 데이터를 다룰 때 사용

데이터 타입

원시형 : string, number, boolean 등

참조형 : object, array, function

// 객체 문법
// 리터럴 문법
const user = {};
console.log(user);

// 생성자 문법
// new 예약어
const user = new Object();
console.log(user);

const computer = {
    name : "gram",
    model : 15,
    color : "white",
    sell : false,
    price : 165000
};

// 객체는 실제 존재하는 개체를 표현할 때 작업
// 객체에는 여러 키와 값이 존재하고 특정값을 호출할 수 있어야한다.

// 객체의 name만 호출 해보기
// 점 표기법
console.log(computer.name) === "gram";

// 괄호 표기법
console.log(computer["name"]) === "gram";

// 점 표기법과 괄호 표기법 차이
// 속성 특수문자 접근, 매개변수를 속성으로 접근할 때
// 괄호 표기법을 사용한다
const content = {
    "content-type" : "text/javascript"
};
content["content-type"];

function objProperty(obj, key){
    console.log(obj["name"]);
}
objProperty(computer, "name");

const student = {
    age : 30,
    phone : "01012345432",
    city : "서울"
};

const student2 = {
    age : 30,
    phone : "01012345432",
    city : "서울",
    say : function(){
        console.log(this) // this는 객체 안에 있다.
    }
};

student2.say();

function createStudent(age, phone, city){
    this.age = age;
    this.phone = phone;
    this.city = city;
}

const student3 = new createStudent(22, "01066661111", "부산");
console.log(student3); // 배열 출력
console.log(student3.age); // 22
console.log(student3.city); // 부산

// new 생성자 문법을 사용하면 윈도우 객체가 아닌 빈객체에 값이 생긴다

2. 클래스

클래스는 객체를 만들기 위해 사용되는 방법중 하나 클래스를 사용하면 코드의 가독성이 좋아지고

상속을 통한 코드의 재사용성이 좋아집니다. (만약 클래스가 없었다면 객체를 하나 생성할 때마다

코드가 길어져서 불편해졌을겁니다.)

class Student {
    // class 생성시 첫문자 대문자
    // 생성자 함수
    // constructor : 최초에 한번 new로 객체를 생성할 때
    constructor(_age, _phone, _city){
        this.age = _age;
        this.phone = _phone;
        this.city - _city;
    }
    // get 호출 조회 할 때 사용할 메서드
    get getAge(){
        return this.age;
    }
    
    // set 수정을 할 때 사용할 메서드
    set setAge(_age){
        this.age = _age
    }
    
    // static 정적 메서드 클래스로 객체를 만들 때 생성되지 않는다.
    // 클래스 안에 있는 자원을 가지고 기능을 작성해야할 경우
    static myfn(age, phone, city){
        let obj = new student(age, phone, city);
        obj.age = this.age;
    }
}

let obj = new Student(20, "01012341234", "서울");
console.log(obj); // 배열 생성

obj.getAge(); // 클래스에 있는 함수 호출시 객체에 담아서 사용한다.

Student.myfn(); // static은 클래스 안에 있는 자원을 가지고 있어서 함수 호출시
                // 클래스 명을 가져온다

부모 클래스 자식 클래스

class Mother {
    constructor(_name, _age){
        this.name = _name;
        this.age = _age;
    }
    getInfo() {
        return `이름 : ${this.name} / 나이 : ${this.age}`;
    }
}

class Child extends Mother {
    // extends 부모클래스에서 자식클래스에게 상속할 때 사용
    constructor(_hp, mp, _atk, _name, _age){
		super(_name, _age); // super 부모 클래스의 생성자 함수를 호출
        this.hp = _hp;
        this.mp = _mp;
        this.atk = _atk;
    }
	getState(){
    	return `hp : ${this.hp} / mp : ${this.mp} / atk : ${this.atk}`;	
    }
    
    setHp(_hp){
    	this.hp = _hp;
    }
    
    static getAtk(n) {
        return n.atk
    }
}

let character1 = new Child(100, 80, 200, "자카", 31);
let character2 = new Child(150, 70, 180, "자카팍", 33);

console.log(character1.getInfo()); // 이름 : 자카 / 나이 : 31
console.log(Child.getAtk(character2)); // 180

자바스크립트를 이용해서 클래스를 이용한 팝업창 만들기

class Popup {
    constructor (_popupWrap){
        this.popupWrap = _popupWrap;
    }
    
    setPopupOpen(){
    	// classList 요소에 가지고 있는 모든 클래스의 리스트
        // contains 클래스를 가지고 있는지 확인 === true false
        if (this.popupWrap.classList.contains(".popup-wrap")){
            // true 클래스를 가지고 있으면 팝업이 켜짐
            this.popupWrap.classList.remove("is-active");
        } else {
            // false 클래스를 추가
            this.popupWrap.classList.add("is-active");
        }
    }
}

let popup = new Popup(document.querySelector(".popup-wrap"));

목차

1. 재귀 함수

2. 스택과 큐

3. 자바스크립트 메모리 

   3 - 1 원시타입

   3 - 2 참조 타입

4. 배열

1. 재귀 함수

재귀함수는 함수의 내용에서 다시 자신을 호출해서 반복 작업을 하는 방식입니다. for 문으로도 반복문을 구현 가능한 로직들은 재귀 함수로 작성이 가능합니다. 재귀 함수를 사용하는 이유는 반복하는 내용의 기능을 여러개로 나누고 직관적으로 관리할 때 사용하는 프로그래밍 패턴 중 하나입니다.

재귀 함수를 작성할 때는 더이상 나눠야 할 필요가 없을 때 종료됩니다.
문제를 나눠서 기능을 작성하는 경우는 이 두가지 패턴을 찾아서 활용해야합니다.

재귀함수로 반복문을 사용한 예

function sum(n, result){
    if (n === 5){
    	console.log(result);
    }
    sum(n + 1, result + n);
}
sum(1, 0);

// 출력값 : 10

재귀함수의 목적

장점으로 반복문을 많이 사용하는 경우보다 코드가 간결하고 직관적이다.

단점으로 스택에 함수 실행이 쌓여서 메모리 공간을 많이 차지하고 속도 성능이 저하된다.

재귀함수를 통한 피보나치 수열

function fibo(n){
    if(n == 1 || n == 2) return;
    return fibo(n - 1) + fibo(n - 2);
}

재귀 함수를 이용한 짝수 더하기

// 재귀함수로 짝수를 더하는 재귀적으로 돌리자
// 더하는 횟수는 인자값으로 전달 받아서
function sum(num, count){
    if(count <= 0) return;
    console.log(num);
    sum(num + 2, count - 1);
}
sum(2, 5);

// 출력 : 2 4 6 8 10

2. 스택과 큐

스택

스택은 LIFO (Last In First Out) 후입선출 방식으로 데이터를 저장하는 자료구조입니다. 이는 마지막으로 삽입된 데이터가 먼저 삭제되는 구조를 의미합니다. 스택은 삽입(push)과 삭제(pop)의 두가지 기본 연산으로 구성되며 삽입은 스택의 가장 위쪽에 데이터를 추가하는 것이고, 삭제는 스택의 가장 위쪽 데이터를 제거하는 것이다. 재귀함수를 호출 할때 사용합니다.

큐

큐는 FIFO (First In First Out) 선입선출 방식으로 데이터를 저장하는 자료구조입니다. 이는 먼저 삽입된 데이터가 먼저 삭제되는 구조를 의미합니다. 큐 역시 스택과 마찬가지로 삽입(enmqueue)과 삭제(dequeue)의 두가지 기본 연산으로 구성됩니다. 큐는 탐색, 작업처리 대기열등에 사용되며, 컴퓨터 시스템의 프로세스 스케줄링에도 활용됩니다. 

3. 자바스크립트 메모리 

자바스크립트의 메모리 영역은 call stack과 heap이라는 영역이 있다.
call stack 메모리에 원시타입이 저장되고 heap 메모리에는 참조 타입이 저장됩니다. 

원시 타입

- string, number, boolean, undefined 등 메모리에 값을 저장하고 변수가 직접 값을 가르키는 것

- 원시타입은 재할당 하게되면 새로운 메모리에 재할당한 값을 저장하고 가르키는 주가 바뀌는 것

let a = 1;
a = 2;

// 이렇게 1과 2는 둘다 값이 존재하면서 새로운 메모리에 값을 재할당하고
// a가 가르키는 주소가 변한 것(이후 1은 사용되지 않으니 제거된다.)

참조 타입

- Array. Object, function 등 외에는 참조타입 입니다. 

- 원시타입과 다르게 참조타입은 변수의 크기가 동적으로 변합니다.

- 동적으로 데이터가 변하기 때문에 참조타입의 데이터는 heap메모리에 저장됩니다. 

- 변수를 호출해 주소의 값을 호출하면 힙 메모리에 주소의 값을 호출하고 힙메모리의 주소에 있는 값을 호출하게 됩니다.

let arr = [];
let arr2 = arr;

// push 메서드는 배열에 값을 뒤로 추가한다.
arr.push(1);
console.log(arr2);

원시타입은 값을 가르키는 주소를 가지고 있다.`

참조타입은 힙 메모리 주소를 가르키는 주소를 가지고 있다.

4. 배열

배열은 참조형 데이터 타입

// 문법
let arr = [];
let arr2 = ["javascript", 2, 3, 4, true];

// 0 인덱스 개념으로

// 배열의 값을 호출할 때
arr[0] === "javascript";

// 자바스크립트의 배열은 데이터의 타입이 동적 타입이다. (어떤 타입이라도 쓸 수 있음)
// length는 배열의 길이를 나타낸다.
// arr.length 배열의 길이를 확인하는 키와 값

// 이중 배열
let b = [[],[],[]];

// 배열의 값을 추가
// 배열의 맨 마지막 데이터 뒤로 값이 추가된다.
arr.push(1);

// 해당 인덱스에 값을 할당하는 경우
arr[0] = 1;
arr[1] = 2;

// 실습 배열을 하나 만들고 반복문을 10번 돌려서 배열에 증가하는 index

// 배열의 메서드
// index : 0, 1, 2, 3, 4, 5
let arr = [1, 2, 3, "javascript", 4, 5];

// indexOf 배열안에 값을 찾고 그 값이 들어있는 index를 반환
// 해당 값이 있는 인덱스를 찾아서 반환

arr.indexOf("javascript");

function indexOf(arr, str){
    // 배열의 길이만큼
    for(let i = 0; i < arr.length; i++){
    	// i가 0일 때는
        if(arr[i] == str)[{
        	return i;
            // 자바스크립트 인덱스가 몇번인지 알려줄 수 있다.
        }
    }
}

// find
// 배열의 값을 처음부터 순서대로 순화하며 true의 값을 찾으면
// 반복을 멈추고 해당 값을 반환
// 함수에서 값을 반환
let result = arr.find(function(i){
    return i === "javascript";
});

function find(arr, fn){
    for(let i = 0; i < arr.length; i++){
    	function(arr[i]){
        	return i === "javascript";
            // 1 false, 2 false, javascript true
        }
    }
    if(fn(arr[i])){
    	return arr[i];
    }
}

// findIndex
// 배열의 값을 처음부터 순서대로 순화하며 true 값을 찾으면
// 반복을 멈추고 해당 인덱스를 반환한다.
let result2 = arr.findIndex(function(i){
    return i === "javascript";
});

// filter
// 검색기능 구현할 때
// 새로운 배열을 만든다.

let arr2 = ['사과', '사과', '포도'];
// 배열을 반환한다.
// true 값을 받아도 배열의 끝까지 순회
// true값이 나온 해당 데이터를 배열의 형태로 만들어서 최종적으로 반환
// ['사과', '사과']
let result3 = arr2.filter(function(i){
    return i[0] === "사";
});
result3 = ['사과', '사과']; // 새로운 힙 메모리에 할당된 값

// map
// 배열의 값을 처음부터 순서대로 순회하면서
// 배열의 끝까지 반복한다. 배열을 반환한다. 반환된 값들을 가지고 배열을 생성.
let result4 = arr2.map(function(i){
    return "javascript";
});

// forEach : 배열의 문자열 변환
let a = [];
arr2.forEach(function(i){
    console.log(i);
    a.push(i);
});

// join : 배열을 만들어서 값을 깊은 복사
arr.join("*"); // 빈문자열이면 구분점에 내용 추가x

// 문자열을 배열로 변경
// split : 매개변수로 전달한 내용이 문자열에서 배열로 나눠질 구분점
 
arr.splice("*")
// "사과*사과*포도" 문자열 -> ["사과", "사과", "포도"] 배열 

// 배열을 깊은 복사 하는 경우
// 스프레드 연산자 용어
const arr = [1,2,3];
const arr2 = [...arr];

배열로 lotto 번호 6개 랜덤으로 뽑기

// 1. 로또는 겹치는 숫자가 나오면 안됨.
// 2. 숫자는 6개를 뽑아야 한다.
// 3. 나온 숫자들을 리스트 형태로 보여줘야함. (배열의 형태로 만들어줘야함)

// 로또 번호들이 들어갈 로또 박스
const lottoNum = [];

// 로또 구슬을 뽑아서 담아놓을 정답 배열
const result = [];

// 추첨 전에 세팅
// 초기화 단계
function lottoInit(){
    for(let i = 1; i <= 45; i++){
    	lottomNum.push(i);
        // lottoNum[i - 1] = i;
    }
    console.log("셋팅 끝남");
}

function play(){
    for(let i = 0; i < 6; i++){
         let randomIndex = parseInt(Math.random() * lottoNum.length);
         
         let number = lottoNum[randomIndex];
         // splice 원본 배열의 값을 제거하는데
         // 첫번째 인자가 시작 인덱스부터
         // 두번째 인자값은 갯수
         
         lottoNum.splice(randomIndex, 1);
         
         result.push(number);
    }
}

// 함수를 한꺼번에 호출하기
function main() {
    lottoInit();
    play();
    console.log("로또의 결과는?", result);
}

main();

목차

1. 함수 선언

2. 매개변수와 인자

3. 함수의 매개변수와 스코프

4. 함수와 return

5. 콜백함수

6. 함수 표현식

    6 - 1 익명 함수

    6 - 2 애로우 함수

    6 - 3 즉시 실행 함수

함수 : 중복 코드를 줄이기 위해서 사용합니다.

1. 함수 선언

function 함수이름 (매개변수){실행코드 내용}
함수 호출
함수 이름();

함수도 하나의 값이다.
함수를 사용하기 전에 반드시 알아두시길 바랍니다.

함수 선언과 호출에 대해서 예시를 들어보겠습니다.

function message(){
    console.log("쥬스가 만들어졌어요.");
}

message();

// 함수이름(); --> 함수이름에 괄호를 넣으면
// 함수를 실행하겠다는 의미다.

출력값

message라는 함수를 선언을 했고 밑에서 함수를 호출했습니다. 함수호출로 안에 있는 console.log를 실행해서

"쥬스가 만들어졌어요" 라는 문구가 출력된 것을 확인할 수 있습니다.

2. 매개변수와 인자

function 함수이름 (매개변수){
         실행코드
     }
     message(인자);

매개변수 : 함수 안에서 선언하는 변수
인자 : 함수 호출시 넣는 값

매개변수와 인자 예시

function message(a){ 
    console.log(a + "쥬스가 만들어졌어요."); 
}
message("사과");

// 출력값 : 사과쥬스가 만들어졌어요.

3. 함수의 매개변수와 스코프

let a = "자카";
function name(){
    console.log(a);
    // 지역 스코프
    function name2(){
    	console.log(a);
    }
    name2();
}
name();

// 출력 : 자카가 두번 출력된다.

위에 코드를 실행하면 a변수가 두번 실행되는 것을 볼 수 있습니다. 이는 변수 a가 name 함수에 없어서 전역에서

a를 찾기 시작해서입니다. 전역변수 a에 "자카"라는 변수가 있어서 name()가 실행되고 name2()가 실행됩니다.

!! 변수 a를 함수name 안에서 찾다가 없으면 전역에서 찾습니다.  !!

변수가 전역에도 함수 안에도 전역에도 없으면 "Reference Error" 를 호출합니다.

4. 함수와 return

1. return은 함수 안에서 사용하는 예약어로 함수의 내부에서 return을 만나게 되면

함수를 종료시킵니다.

function name(){
    console.log("여기는 실행");
    return;
    console.log("여기는 실행X");
}

// 출력 : 여기는 실행 (이후에는 실행하지 않는다.)

2. return은 함수의 값을 반환 해주는 역할을 합니다.

function name(x,y){
  console.log("Hello");
}

console.log(name(1,3));

함수 name을 선언하고 밑에서는 함수의 값을 출력을 console이 있습니다. 결과 값은 위에 있듯이 "undefined"가 나온 것을 확인할 수 있습니다. 왜 이런 결과가 나올까요? 함수호출시 반환된 값이 없기 때문입니다. 만약 인자값을 더하는 값을 호출하려면 어떻게 해야할까요?

function name(x,y){
  console.log("Hello")
  return x+y;
}

console.log(name(1,3));

return 값을 반환해주어야 함수호출시 값이 나오는 것을 확인할 수 있습니다.

4. 콜백 함수

함수도 하나의 값입니다. 그 말은 즉 함수의 매개변수로 함수를 받을 수 있다는 의미입니다.

이것을 '콜백함수'라고 합니다. 

function message(fn1, fn2){
    fn1(); // 매개변수로 함수 호출
    fn2();
}

function name(){
    console.log("나는 함수1이야.");
}

function name2(){
    console.log("나는 함수2야.");
}

message(name, name2);

//출력 : 나는 함수1이야. 나는 함수2야.

간단한 콜백함수를 작성해 보았습니다. 위에 코드는 함수 name와 name2를 매개변수로 받은 함수입니다.

function callBack(fn1){
 console.log(fn1(1,3));
}
function plus(a,b){
  return a+b;
}

callBack(plus);

위는 콜백 함수를 사용, 두 수를 매개변수로 받아서 더하기를 하는 함수를 만들어 보았습니다. 

6. 함수 표현식

6 - 1 익명함수

const myName = function(){
    console.log("Jaka_Park");
}

myName(); // 출력 : Jaka_Park

일반함수와 다르게 함수의 이름이 존재하지 않습니다.

익명함수는 재사용하지 않는, 한번만 사용할 함수를 위한 개념입니다.

리터럴 방식으로 변수에 담아서 표현합니다. 

( *리터럴(literal) 방식 : 일반적으로 변수에 데이터를 넣을 때 사용하는 방식 )

6 - 2 화살표 함수 (Arrow 함수)

const sum = (a, b) => {return a+b;}
sum();

함수 표현식을 조금 더 간결하고 좋은 방법으로 문법을 작성할 수 있습니다.

ES6에서 추가된 문법이고 '화살표 함수 (Arrow 함수)'라고 합니다.

this를 이해하고 쓰면 좋은 함수이며, this 바인딩을 하지 않기 위해 사용합니다.

(위 부분은 제가 충분히 배운 후에 내용을 추가 수정 하겠습니다.)

6 - 3 즉시 실행함수

(function (b){
    let a = 1;
}(1));

let a = 1;

즉시 실행함수는 한 번의 실행만 필요로 하는 초기화 코드 부분에 많이 사용됩니다.

그 이유는 변수를 전역으로 선언하는 것을 피하기 위해서 입니다. 전역에 변수를 추가하지 않아도 되기 때문에 코드 충돌없이 구현할 수 있습니다.

반복문 : 실행코드를 반복하는 문법

for문

for문 문법
for(선언식; 조건문; 연산식){
     반복될 코드 내용
}

// 0 ~ 20 까지 숫자를 출력하는 반복문
for(let i = 0; i <= 20; i++){
	console.log(i);
}

// 0 ~ 20 까지 짝수만 출력하는 반복문
for(let i = 0; i <= 20; i+=2){
	console.log(i);
}

// 0 ~ 20 까지 홀수만 출력하는 반복문
for(let i = 1; i <= 20; i+=2){
	console.log(i);
}

for 문 읽는 순서

선언식 -> 조건문 확인 -> 스코프 코드 실행 -> (연산식 -> 조건문 -> 스코프 코드 실행) -> (연산식 -> 조건문 -> 스코프 코드 실행)

for 문을 이용한 구구단

let answer = 1;
for(let i = 2; i < 10; i++){
    for(let j = 1; j < 10; j++){
    	answer = i * j;
        console.log(i,"x",j,"=",answer);
    }
}

for문 안에 for 문을 사용할 수 있다.

// continue
for(let i = 0; i < 10; i++){
    if ((i >= 3) < (i < 5))
    continue;
    console.log(i);
}

// 출력값: 0 1 2 5 6 7 8 9

continue 문은 밑의 내용을 실행하지 않고 위에 다시 연산식과 조건문으로 가서 실행을 합니다.

위에 코드를 실행하면 if 문 안에 i가 3 이상 5보다 작을 때  continue를 만나서 3,4 는 생략하고 값을 출력합니다.

while 문

while( 조건 ){실행코드}

조건문 -> 코드 실행 -> 조건문 -> 코드실행 (반복횟수가 무한)

break 으로 종료시시킵니다.

while 문 안에는 변수선언을 하지 않습니다. (while 문 안에 변수 선언을 하면 계속 초기화 됩니다.)

let a = 0;

while(a < 10){
    console.log(a);
    a++;
}

// 출력값 : 0 1 2 3 4 5 6 7 8 9

while문으로 업다운 게임 만들기

// 업다운 숫자 맞추기 게임

// 1. 플레이어가 있고, 컴퓨터가 있다
// 2. 플레이어는 선택을 할 수 있고, 컴퓨터는 랜덤값
// 3. 플레이어가 선택할 수 있는 제어문
// 4. 게임의 종료 시점을 정한다.

let playerSelect;

// 게임 시작하자마자 랜덤값을 뽑아놓고 시작.
// Math.random(); 랜덤값을 뽑을 때
// parseInt : 정수로 변환
let comSelect = parseInt(Math.random() * 99);

let count = 0; // 우리가 게임을 시도한 횟수

let max = 99; // 플레이어가 선택할 수 있는 최대 숫자 범위
let min = 0; // 플레이어가 선택할 수 있는 최소 숫자 범위

let text = ""; // 컴퓨터가 안내할 문구

// prompt 입력값은 문자열 --> parseInt 데이터 타입을 숫자로 변환

let gameCount = parseInt(prompt("게임의 판수를 정하세요"));

while((playerSelect !== comSelect) && (count < gameCount)){
    // 정답의 내용 text와 입력의 설명 문구를 같이 작성
    // `${}` : 탬플릿 리터럴
    // 문자열과 변수를 같이 사용하는 경우
    // ${} 작성하면 괄호안에 자바스크립트를 입력하겠다
    
    playerSelect = parseInt(prompt(`${text} 숫자를 입력하세요: 최소 ${min} | ${max} | 남은 횟수 : ${max} | 남은 횟수 : ${gameCount - count}`));
    
    // 문자열을 입력하게 되면
    // NaN : 숫자가 아님을 나타냄 / isNaN(값) : 숫자가 아닌지 숫자인지 확인해주는 함수
    
    if(isNaN(playerSelect)){
    	text = "숫자를 입력하세요";
        continue;
    }
    
    // 최소와 최대 범위의 값을 입력했는지
    if((min >= playerSelect) || (max <= playerSelect)){
        text = "입력 값을 최소 최대에 맞게 작성하세요";
        continue;
    }
    // 게임판수 증가
    count++;
    
    // 게임의 로직 시작
    if(playerSelect > comSelect){
    	max = playerSelect;
        text = "다운";
    } else if(playerSelect < comSelect){
        min = playerSelect;
        text = "업";
    } else {
        alert(`${count}번 시도해서 정답 맞췄어`);
        break;
    }
    
    if(count >= gameCount){
        alert(`게임 오버 ${comSelect}`);
        break;
    }
}

목차

1. 스코프 (전역변수 / 지역변수)

2. 조건문

    2-1 if (if / else if / else)

   2-2 switch

1. 자바스크립트 스코프

전역 변수 : 전역에 선언한 변수

지역 변수 : 해당 영역에서 선언하고 사용 될 변수

// 전역변수 지역변수 예시

let input1 = 1; // 전역변수 : 전역(모든 영역) 어디서든 접근이 가능한 변수

{	
    // 지역 변수 : 지역에서 선언한 변수
    // 블록 스코프 안에서 선언한 변수는 블록 스코프 안에만 있다가
    // 동작이 끝나면 해제된다.
    let input1 = 0; // 이러한 경우에는 지역변수로 전역변수 재선언이 아니다.
    let input2 = 1;
}

console.log(input3); // 이러한 경우에 스코프가 달라서 reference error를 띄운다.

2. 조건문

조건이 충족되면 기능을 실행하는 문법입니다.

2-1 if문  (if / else if / else)

if문 문법 ()
if (조건문){실행코드} 
else if (조건문){실행코드}
else {실행코드} 

 if문은 처음은 if 시작합니다. else if는 if 조건문 뒤에 뒤에 쓰이며 다른 조건을 제한할 때 사용합니다.

else는 나머지 조건으로 따로 조건문 없이 실행코드만 작성합니다. 밑에서 예시 코드를 보겠습니다.

let score = 73;

if ((score >= 90) && (score <= 100)) {
   // score가 90이상 100이하 일때
  alert("A 학점");
} else if ((score >= 80) && (score <= 90)) {
   // score가 80이상 90이하 일때
   alert("B 학점");
} else if ((score >= 70) && (score <= 80)) {
   // score가 80이상 90이하 일때
   alert("C 학점");
} else {
   // 그 외에 나머지 점수
  alert("D 학점");
}

alert() : 브라우저의 알림창

score 변수가 73점이고 73은 70 이상 80 이하의 숫자로 C학점이 출력이 되는 것을 알 수 있습니다. 

조건이 한 가지인 경우 if 문 단독으로 사용할 수 있으며
조건이 두 가지인 경우엔 if와 else로도 사용할 수 있다.

2-2 switch 문

switch문 문법
switch (값){
    case [값에 따른 조건]:
    case [값에 따른 조건]:
    case [값에 따른 조건]:
    default: // 충족하는 조건이 없을 때 실행
    break; 코드 중단
}

!!주의!! 
break 문은 코드를 중단하는 명령어로 case마다 걸어주는 것을 권장합니다.
case가 5개가 있다고 가정해봅시다. 만약 break 문을 걸지않고 4번째부터 break문을 하면
case1 ~ 3 번째까지 코드가 실행되는 것을 볼 수 가 있습니다. 그렇게 되면 원하는 1개의 값을
도출 할 수 없으니 주의하셔야 합니다.

let score = "B";
switch (score){
case "A":
  console.log("1등입니다 축하합니다.");
  break;

case "B":
  console.log("2등입니다 축하합니다.");
  break;

case "C":
  console.log("3등입니다 축하합니다.");
  break;

case "D":
  console.log("4등입니다 축하합니다.");
  break;

default:
  console.log("A~D 까지 입력해주세요");
  break;
}

switch 문은 지정한 값과 case의 값이 같을 때 기능을 수행하고 break가 있으면 해당하는 case에서 멈춥니다.

위에 있는 코드를 보면 score가 B이고 case가 B인 곳에서 코드를 실행하며 2등이 출력되는 것을 볼 수 있습니다.

목차

1. 비교 연산자

2. 부정 연산자

3. boolean 연산자

4. 논리 연산자

1. 비교 연산자

값을 비교하여 true / false (boolean 타입으로 변환한다)

== : 값이 같은지 확인 
!= : 값이 다른지 확인 (값만 비교한다)

=== : 값과 데이터 타입까지 같은지 확인
!== : 값과 데이터 타입까지 둘다 다른지 확인

2. 부정 연산자 

boolean 값 앞에 "!"를 사용하며 !true (=false), !false (=true) 로 반환한다.

3. boolean 연산

console.log(1 == true); // true

console.log(0 == false); // false

4. 논리 연산자

|| (OR) : 둘중에 하나라도 true면  true
true || true : true
true || false : true
false || true : true
false || false : false

&& (AND) : 둘다 true 여야 true 를 반환
true && true : true
true && false : false
false && true : false
false && false : false

목차 

1. 자료형의 종류

2. 연산자 

3. 변수 이름 표기법

1. 자료형의 종류

숫자열 / 문자열

let num = 9; // 숫자열  

let string = "안녕하세요"; // 문자열 

console.log 출력창

잠깐 console.log()에 대해서 알아보겠습니다.

console.log() 는 콘솔창에 기록하라는 명령어입니다.

(숫자열과 문자열의 색이 다른 것을 확인할 수 있다.)

bool 자료형 : 참(true)과 거짓(false)를 담는 값이다.

let bool1 = true;

let bool2 = false;

null : 개발자가 빈값을 명시해주는 것 (개발자의 의도 O)

let temp = null;

undefined : 빈값. 개발자가 예측하지 못한 값 (개발자의 의도 X)

let temp2 = undefined;

2. 연산자

산술 연산자

consolel.log(1 + 1);  // 더하기 연산

consolel.log(1 - 1);  // 빼기 연산자  

consolel.log(2 * 3);  // 곱하기 연산자   

consolel.log(4 / 1);  //  나누기 연산자 

consolel.log(4 % 3);  // 나머지 연산자 

출력창

여기서 의문이 하나 생길수 있습니다. 문자열과 숫자열을 연산하면 어떻게 되는지 확인해봅시다.
console.log(10 + "5")
console.log(10 * "5");
console.log("qwer" - 1);

문자열(숫자)과 숫자열을 더하면 문자열을 반환하고

숫자일 경우는 더하기 연산을 제외한 모든 연산자는 숫자열로 반환합니다.

문자열(문자) 더하기 연산을 제외한 다른 연산자들은 숫자가 아니므로 NaN을 반환합니다.

(NaN ( Not a Number ) 숫자가 아님을 의미)

단항 연산자  (n++)

let num = 0;

num++; //  1을 증가한다.
console.log(num);

num++;  
console.log(num); 

num++;
console.log(num);

let num2 = 1;
num2++ > num2+=1 로 쓸수 있다.
num2 += 1 :  num2 + 1 의 값을 num 에 다시 할당한다는 의미
만약  5씩 증가하면 반대로 num+= 5 로 쓸 수 있다.
num2 -= 5 : num2 - 5 의 값을 num 에 다시 할당한다는 의미  
num2 *= 5 :  num2 * 5 의 값을 num 에 다시 할당한다는 의미
num2 /= 5 : num2 / 5 의 값을 num 에 다시 할당한다는 의미

3. 변수 이름 표기법

1. let myName; //  카멜표기법 

2. let MyName; // 파스칼 표기법

3. let my_name; // 스네이크 표기

목차

1. 자바스크립트

2. 자바스크립트 언어의 특징

  2 - 1 컴파일 언어

  2 - 2 인터프리터 언어

3. 자바스크립트 변수

1. 자바스크립트

- 페이지에서 동적인 기능을 요소에게 스크립트 작성

- 넷스케이프에서 만들었고 HTML 문서를 동적으로 보여주기 위해서

- 모카였다가 라이브스크립트였다가 마지막으로 자바스크립트

- ES5, ES6

2. 자바스크립트 언어의 특징

2 - 1 컴파일 언어 : 프로그램 코드를 컴파일해서 컴퓨터가 알아들을 수 있는

기계어로 번역해준다. 실행파일을 만들어서 실행을 시켜준다.

2 - 2 인터프리터 언어 : 프로그램 코드를 한줄씩 읽으면서 번역을 한다.

3. 자바스크립터의 변수

- 컴퓨터의 힙 메모리에 저장된다.

- 컴퓨터의 스택 메모리는 실행할 내용을 여기에 담을 것.

var, let, const : 예약어

var, let - 할당과 재선언의 차이

const - 상수값 (변하지 않는 값)

재선언과 재할당의 차이

var

var myName; // 변수를 선언한다.

myName = "Jaka"; // 변수에 값을 할당하겠다.

var myName =  "Jaka2"; // 이렇게 재선언이 가능하다. (예약어를 또 사용해서 변수를 선언)

let

let myName2; // 이라는 예약어로 변수를 선언

myName2 = "Jaka3"; // 재할당은 가능

let myName2; // 재선언은 불가능하다

const

상수(변하지 않는 값)를 다룰 때 사용하는 예약어

재할당과 재선언이 불가능하다