ABOUT ME

Today
Yesterday
Total
  • [TIL] 1주차
    이노베이션캠프/Js 문법 종합반 2023. 5. 22. 18:58

    *변수

     

    1. 변수의 주요 개념

    1) 변수 이름 : 지정된 값의 고유 이름

    2) 변수 값 : 변수에 저장된 값

    3) 변수 할당 : 변수에 값을 저장하는 행위

    4) 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위

    5) 변수 참조 : 변수에 할당된 값을 읽어오는 것

     

    2. 변수 선언 3가지 방법

    1) var

    var myVar = "Hello World";

    2) let

    let myVar = "Hello World2";

    3) const

    const myVar = "Hello World3";

     

    * 차이점

    - var 는 똑같은 변수 이름으로 선언 가능

    - const 는 재할당 불가능

    - var보다는 let 사용 => 호이스팅관련문제


    * 데이터 타입

    1. runtime : run 하는 time

    코드를 작성할 때가 아니라, 실제 코드가 실행될 때 데이터 타입이 결정된다

     

    2. 숫자

    1) 정수

    let num1 = 10;
    console.log(typeof num1); //number

    2) 실수(float)

    let num2 = 3.14;
    console.log(typeof num2); //number

    3) 지수형(Exp)

    let num3 = 3.14;
    console.log(typeof num3); //number

    4) NaN

    let num4 = "Hello"/2;
    console.log(typeof num4); //NaN

    숫자가 아님

     

    5) Infinity(무한대)

    let num5 = 1/0;
    console.log(typeof num5); //Infinity

    -Infinity

    let num6 = -1/0;
    console.log(typeof num6); //Infinity

     

    3. 문자열

    1) 모양

    let str = "Hello World";
    console.log(typeof str); // String

    2) 기능

    2-1) 길이 확인

    let str = "Hello";
    console.log(str.length); // 5

    2-2) 문자열 결합하기(concatenation)

    let str1 = "Hello";
    let str2 = "World!";
    let result = str1.concat(str2);
    console.log(result); //Hello World!

    2-3) 문자열 자르기

    let str3 = "Hello World!";
    console.log(str3.substr(0,5)); // Hello
    //substr(from, length) from: 어디서부터 length: 몇개
    
    console.log(str3.slice((0,3))) // Hel
    //slice(start,end) start:시작위치, end:끝나는 위치

    2-4) 문자열 검색

    let str4 = "Hello World!"
    console.log(str4.search("World")); // 7

    2-5) 문자열 대체

    let str5 = "Hello World!"
    let result01 = str5.replace("World", "Javascript");
    console.log(result01); // Hello Javascript!

    2-6) 문자열 분할

    let str6 = "apple, banana, kiwi";
    let result02 = str6.split(",") //자르는 기준을 넣어주기
    console.log(result02) // ['apple', 'banana', 'kiwi']

     

    4. 불리언(Boolean)

    참(true / 1), 거짓(false / 0) 판별

    let bool1 = true;
    let bool2 = false;
    
    console.log(bool1) // true
    console.log(bool2) // false
    console.log(typeof bool1) // boolean

     

    5. undefined

    정의되지 않은 값

    let x;
    console.log(x) // undefined

     

    6. null

    값이 좀재하지 않음을 '명시적'으로 나타내는 방법

    의도적으로 넣은 값

    let y = null;
    console.log(y) // null

     

    7. object(객체) 

    key-calue pair

    let person = {
    	name: "choi",
        age: 20,
        isMarried: true,
       };
       console.log(typeof person); // object

     

    8. array(배열)

    여러 개의 데이터를 순서대로 저장하는 데이터 타입

    let number = [1,2,3,4,5];
    let fruits = ['apple', 'banana', 'orange'];

    각자 인덱스를 가지고 있음(위치에 대한 정보가 있다, 0부터 시작)


    *형변환

    1. 명시적 형 변환

    개발자가 의도적으로 바꾸는 것

    원하는 형을 쓰고 ()안에 원하는 값을 넣으면 됨

    1) Boolean

    Boolean을 써주고 ()안에 원하는 값을 넣으면 됨

    console.log(Boolean(0));
    console.log(Boolean(""));
    console.log(Boolean(null));
    console.log(Boolean(undefined));
    console.log(Boolean(NaN));
    
    //모두 false
    
    console.log(Boolean("false"));
    console.log(Boolean({}));
    
    // 위의 둘은 true "문자열" 안에 값이 있고 {}객체이면 true가 나온다

    2) 문자열

    let result5 = Stirng(123);
    console.log(result5); // 123
    console.log(typeof result5); // string
    
    let result6 = Stirng(true);
    console.log(result6); // true
    console.log(typeof result6); // string
    
    let result7 = Stirng(false);
    console.log(result7); // false
    console.log(typeof result7); // string
    
    let result8 = Stirng(null);
    console.log(result8); // null
    console.log(typeof result8); // string
    
    let result9 = Stirng(undefined);
    console.log(result9); // undefined
    console.log(typeof result9); // string

    3) 숫자

    let result10 = Number("123");
    console.log(result10); // 123
    console.log(typeof result10); // number

     

    2. 암시적 형 변환

    의도하지 않았지만 자동으로 바뀌어짐

     

    1)  "string" + ? = "string"

    let result1 = 1 + "2";
    console.log(result1); // 12
    console.log(typeof result1); // string
    let result2 = "1" + true;
    console.log(result2); // 1true
    console.log(typeof result2); // string

    문자열과 더하면(+) 문자열로 변환됨

     

    2) 숫자( + 제외 -, * , /  )

    let result3 = 1 - "2";
    console.log(result3); // -1
    console.log(typeof result3) // number;
    
    let result4 = "2" * "3";
    console.log(result4); // 6
    console.log(typeof result4); // number

    *연산자

    1. 더하기( + )

    2. 빼기 연산자( - )

    3. 곱하기 연산자( * )

    4. 나누기 연산자( / )

    5. 나머지 연산자( % )

     

    6. 할당연산자(assignment)

    1) 등호연산자(=)

    let x = 10;

    2) 더하기 등호 연산자(+=)

    let x = 10;
    x += 5;
    console.log(x); // 15

    3) 빼기 등호 연산자(-=)

    let x = 10;
    x -= 5;
    console.log(x); // 10

    4) 곱하기 등호 연산자 (*=)

    위와 동일하게 진행됨

     

    5) 나누기 등호 연산자 (/=)

    위와 동일하게 진행됨

     

    7. 비교연산자

    1) 일치 연산자(===) 

    true / false 반환

    타입까지 일치해야 true 반환

    console.log(2 === 2); // true
    console.log("2" === 2); // false

    2) 불일치연산자 (!==)

    console.log(2 === 2); // false
    console.log("2" === 2); // true

    3) 작다 연산자( < ) , 작거나 같다 연산자 (<=)

    4) 크다 연산자 ( > ) , 크거나 같다 연산자 (>=)

    아는 거라 예시 없이 넘어감

     

    8. 논리 연산자

    1) 논리곱 연산자(&&)

    값이 모두 true 여야만 true

     

    2) 논리합 연산자( || )

    값이 하나만 ture 이면 true

     

    3) 논리부정 연산자( ! )

    값을 반대로 바꿈

    console.log(!true); //false
    let a = true;
    console.log(!a); // false

     

    9. 삼항연산자 : 조건에 따라 값을 선택

    let x = 10;
    let result = (x>5) ? "크다" : "작다";
    console.log(result); // 크다

    참이면 앞의 값이 할당, 거짓이면 뒤의 값이 할당


    *함수

    input 과 output 을 가지고 있는 단위

    function () {}

     

    1. 함수 선언문

    function add (매개변수) {
    	// 함수 내부에서 실행할 로직
     }

    input : 매개변수 : 매개체가 되는 변수

    output: return문 뒤에 오는 값: 반환값

    function add(x,y) {
    	return x + y;
      }

     

    2. 함수 표현식

    let add2 = function(x,y) {
    	return x + y;
     }

    3. 함수 호출(=사용)

    함수명() -> add(입력값)

    console.log(add(3, 4)) // 7

     

    4. 스코프

    어디까지 영향을 끼치나

     

    1) 전역변수

    코드 전체에서 쓰이는 변수

    전체영역에 선언

    스코프가 크다

     

    2) 지역변수

    지역 안에서만 쓰이는 변수(괄호 내에서만 쓰이는 )

    스코프가 작다

     

    5. 화살표함수

    ES6부터 등장한 신함수

    const arrowfunc01 = (x,y) => {
    	//함수내용 입력
     }
     
     const arrowfunc02 = (x,y) => //함수내용이 한줄일때는 {} 필요 없음
     
     const arrowfunc01 = x => x += 10 
     // 매개변수도 하나일때는 () 필요 없음

     


    * 조건문

    1. if문

    if(true 또는 false가 나올 수 있는 조건) {
    	//main logic
    }

    2. if-else 문

    if(){
    	// main logicn #1
    } else{
    	// main logic #2
     }

    3. if-else if-else

    if(){
    	// main logicn #1
    } else if{
    	// main logic #2
    }else{
    	// main logic #3
    }

    4. switch

    let fruit = "사과";
    switch(fruit){
    	case "사과":
        	console.log("사과입니다.");
            break;
        case "배":
        	console.log("배입니다.");
            break;
        case "바나나":
        	console.log("바나나입니다.");
            beak;
        default:
        	console.log("아무것도 아닙니다.");
            break;
    }

    break 붙이는 것 유의


     

    * 조건문 중첩

     

    1. 조건문 중첩

    - 조건문을 중첩해서 많이 쓰는 것은 좋지 않음. 하지만 어쩔 수 없을 때가 있으니까..

     

    2. 조건부 실행

    1) && 조건

    let x = 10;
    
    if(x > 0) {
    	console.log("x는 양수입니다.");
    } // x는 양수입니다.
    
    x > 0 && console.log("x는 양수입니다."); //x는 양수입니다.
    
    // 둘 다 같은 코드임

    && 조건때문에 뒤에가 실행된다

     

    2) || 조건

    let y; //y에는 undefined
    let z = y || 20;
    
    console.log(z); // 20

    y의 값이 설정되어 있지않다면(undefined 라면) 기본적으로 20을 셋팅해줘!

     

    3) falsy한 값, truthy한 값

    if 조건 안에 들어갈 값들 중 ture가 될, false가 될 값

     

    falsy 한 값 : 0, "", null, undefined, NaN, false

     


     

    *객체

    key-value pair

    하나의 변수에 여러개의 값을 넣을 수 있음

    문자열, 숫자, 함수 등 값에 제한이 없음

     

    1. 기본적인 객체 생성 방법

    let person = {
    	name : "홍길동",
        age : 30,
        gender: "남자",
    };

    2. 생성자 함수를 이용한 객체 생성 방법

    function Person(name, age, gender) {
    	this.name = name;
        this.age = age;
        this.gender = gender;
    }
    
    let person1 = new Person("홍길동", 30, "남자");
    let person2 = new Person("춘향이", 16, "여자");

    3. 접근하는 방법

    console.log(person.name); // 홍길동 
    // 객체이름.원하는 키

     

    4. 객체 메소드(객체가 가진 여러가지 기능 : Object.~~~)

    1) Object.key : keys를 가져오는 메소드

    let keys = Object.keys(person);
    console.log(keys); // ['name', 'age', 'gender']

    2) Object.values : values를 가지고 오는 메소드

    let values = Object.values(person);
    console.log(values); // ['홍길동', 30, '남자']

    3) Object.entries : key와 value 값을 묶어서 배열로 만든 배열

    let entries = Object.entries(person);
    console.log(entries); // [['name','홍길동'],['age',30],['gender','남자']]

    4) Object.assign : 객체 복사

    let newPerson = {};
    Object.assign(newPerson, person);
    console.log(newPerosn); // {name:'홍길동', age:30, gender:'남자'}
    
    /-* assign(target, source)
    target 어디에? source 뭐를? 복사할래 *-/
    
    //값들을 변경해서 복사하고 싶을 때
    let newPerson2 = {};
    Object.assign(newPerson2, person, {gender:"여자"});
    console.log(newPerosn2); // {name:'홍예린', age:30, gender:'여자'}

    5) 객체 비교

    크기가 상당히 큼! 그래서 메모리에 저장할 때 별도의 공간에 저장

    변수는 객체 별도 공간에 대한 주소를 저장하게 됨

    So, 똑같은 객체를 비교해도 각각 저장된 "주소"는 다르기 때문에 보통 비교하듯이 하면 false 가 나옴!

     

    그럼 어떻게 비교하나?

    객체를 문자열화 시켜서 비교

    let person01 = {
    	name : "홍길동",
        age : 30,
        gender: "남자",
    };
    
    let person02 = {
    	name : "홍길동",
        age : 30,
        gender: "남자",
    };
    
    console.log(person01 === person02) // false
    consoel.log(JSON.stringify(person01) === JSON.stringify(person02)) // true

     

    6) 객체병합

    let person01 = {
    	name : "홍길동",
        age : 30,
    };
    
    let person02 = {
        gender: "남자",
    };
    
    // ... : spread operator 
    // 안에 있는 key-value 를 다 풀어줘! 라는 거임
    
    let perfectMan = {...person1, ...person2};
    //{name: '홍길동', age' 30, gender: '남자'}

    * 배열

    1. 배열 생성

    그냥 나열! 대신 순서가 중요함(0부터 시작)

    let fruits = ["사과", "바나나", "오렌지"];

    2. 배열 크기 지정

    let number = new Array[5]; //길이만 지정해서 새로 생성
    
    console.log(fruits.length); //3
    console.log(number.length); //5

    3. 요소 접근

    console.log(fruits[0]); // 사과 
    console.log(fruits[1]); // 바나나 
    console.log(fruits[2]); // 오렌지

    4. 배열메소드

    1) push

    새로운 요소 넣기

    let fruits = ["사과", "바나나"];
    console.log(fruits); // ['사과', '바나나']
    
    fruits.push("오렌지");
    console.log(fruits); //['사과', '바나나', '오렌지']

    2) pop 

    마지막 요소 삭제 메소드

    let fruits = ["사과", "바나나", "오렌지"];
    console.log(fruits); // ['사과', '바나나', '오렌지']
    
    fruits.pop();
    console.log(fruits); //['사과', '바나나']

    3) shift

    맨 앞의 요소 삭제 메소드

    let fruits = ["사과", "바나나", "오렌지"];
    console.log(fruits); // ['사과', '바나나', '오렌지']
    
    fruits.shift();
    console.log(fruits); //['바나나', '오렌지']

    4) unshift

    맨 앞에 요소 추가(un + shift 니까 ㅎㅎ)

    let fruits = ["사과", "바나나", "오렌지"];
    console.log(fruits); // ['사과', '바나나', '오렌지']
    
    fruits.unshift("배");
    console.log(fruits); //['배', '사과', '바나나', '오렌지']

    5) splice

    위치를 선택해서 삭제 후 새로운 요소 넣기

    let fruits = ["사과", "바나나", "배"];
    
    fruits.splice(1,1,"배");
    console.log(fruits); // ['사과', '배', '키위']
    
    /*- splice(start, delete, string)
    start: 삭제할 부분의 시작 위치, delete : 삭제할 갯수, string: 새롭게 넣을 요소 *-/

    6) splice

    let fruits = ["사과", "바나나", "키위"];
    
    let slicedFruits = fruits.slice(1,2);
    console.log(sliceFruits); // 바나나
    
    // slice(start, end) begin: 시작할 위치, end: 마칠 위치(end 미포함) 까지 복사, 새로운 배열 생성

    7) forEach

    배열의 각 요소 하나하나를 돌아가며 무언가를 수행해주는 메소드

    let number = [1,2,3,4,5];
    
    number.forEach((funtion(item){
    	console.log(item);
    }); //1 2 3 4 5
    // 매개변수 자리에 함수를 넣는 것 : 콜백함수
    //꼭 item 이 아니어도 됨. 원하는 이름 정해서 밑에 사용할 때만 이름 잘 넣기

    8) map

    반드시 return 이 필요

    function을 통해 새로운 배열을 생성해 내기 때문!

    항상 원본 배열의 길이만큼 return이 됨.

    function의 내용이 없을 시 원본배열의 길이만큼 undefined로 채워짐

    let number = [1,2,3,4,5];
    
    let newNumber = number.map(function(item){
    	return item * 2;
    }); 
    
    console.log(newNumber); // [2, 4, 6, 8, 10]

    9) filter

    필터에 맞는 것만 return 해서 새로운 배열을 만들어냄

    let numbers = [1,2,5,4,5];
    
    let filterNumber = numbers.filter(function (item) {
    	return item === 5;
     });
     
     console.log(filterNumber); // [5,5]

    10) find

    let numbers = [1,2,3,4,5]
    
    let result = numbers.find(function(item){
    	return item > 3;
    });
    
    console.log(result); // 4
    // 함수에 해당되는 첫번째 요소만 반환

     

    *새로운 배열이 나오는 것들은 모두 return 이 필요했다는 것!

     


    * for문

    for(초기값; 조건식; 증감식) {
    	//main logic
    }

    1) 배열과 함께

    const arr = [one,two,three,four,five];
    for(let i = 0; i < arr.length; i++) {
    	console.log(i);
        consoele.log(arr[i]);
     }
     /*-
     0
     one
     1
     two
     2
     three
     3
     four
     4
     five
     -*/

    2) for ~ in

    객체의 속성을 출력하는 문법

    let person = {
    	name:"John",
        age: 30,
        gender: "male",
    };
    
    for (let key in person) {
    	console.log(key)
    }
    // name age gender

    *break continue

     

    1. while

    while (조건) {
    	//main logic
    }

    2. do while

    먼저 실행 -> 조건 판별

    do{
    	//main logic
    } while(조건)

    3. break continue : for문과 같이 쓰인다!

    for(let i=0; i<10; i++){
    	if(i === 5){
        break;
        }
        console.log(i);
    }
    // 0 1 2 3 4

    break : 거기서 멈추기

    for(let i=0; i<10; i++){
    	if(i === 5){
        continue;
        }
        console.log(i);
    }
    // 0 1 2 3 4 6 7 8 9

    continue: 그냥 지나가기 (5만 빠짐)

Designed by Tistory.