5/22 TIL

이승준·2023년 5월 22일

JavaScript Sparta VSC git udemy

5/22 메모

전 팀원분께 좋은 정보를 얻었다..

깃허브 레포지토리 연동 연습
PUSH / PULL
BRANCH
https://teamsparta.notion.site/1e13acaf1bff4a158238965c31a5d85f
프로그래머스
https://school.programmers.co.kr/learn/challenges?order=acceptance_desc&levels=0

http://www.kmooc.kr/invitation-banner-udemy 유데미 6개월 무료
- https://www.udemy.com/course/how_to_start_git_and_github/
  Udemy Github 강의
- https://www.udemy.com/course/the-web-developer-bootcamp-2021-korea/
  Udemy node.js 강의

5/22 기록

javascript 문법종합반 1주차

// 변수를 선언할 수 있는 3가지 방법 : var, let, const
// 1.var
// 똑같은 변수명으로 할당 가능하다. 가장 최근에 할당한 것을 출력
// 재할당 가능
var myVar = "hello world";
var myVar = "test1";
console.log(myVar);

// 2. let
// 재할당 가능
let myLet = "hello world2";
console.log(myLet);

// 3.const
const myConst = "hello world3";
console.log(myConst);

// 데이터타입
// 터미널에서 실행될 때 데이터타입이 결정된다


// 1. 숫자
// 1-1 정수

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

// 1-2 실수(float)

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

// 1-3 지수(exp)

let num3 = 2.5e5; // 2.5 * 10^5
console.log(num3)
console.log(typeof num3)

// 1-4
// NaN = Not a number
let num4 = "hello"/ 2;
console.log(num4);

// 1-5 Infinity

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

// 1-5 Infinity

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

// 2. 문자 : string
// ' ' =  " "
let str = "hello world";
// console.log(str);
// console.log(typeof str);

// 2-1 문자열 길이 확인하기
//console.log(str.length)

// 2-2 문자열 결합하기
let str1 = "hello";
let str2 = " world";
let result = str1.concat(str2);
console.log(result);

// 2-3 문자열 자르기
let str3 = "hello, world";
console.log(str3.substr(7, 5));
console.log(str3.slice(7, 9));

// 2-4 문자열 검색
let str4 = "hello, world";
console.log(str4.search(","));

// 2-5 문자열 대체
let str5 = "hello, world";
let result01 = str5.replace("world", "JavaScript");
console.log(result01);

// 2-6 문자열 분할
let str6 = "apple, banana, kiwi";
let result02 = str6.split(",");
console.log(result02);

// Boolean
// true(참) false(거짓)
let bool1 = true;
let bool2 = false;

console.log(bool1);
console.log(typeof bool1);

console.log(bool2);
console.log(typeof bool2);

// null 과 undefine은 다르다 null은 명시적으로 지정한 것

// object(객체) : key = value pair
let person = {
    name: 'choi',
    age: 21,
    isMarried: false
};

// array(배열) : 여러 개의 데이터를 순서대로 저장하는 데이터 타입
let number = [1, 2, 3, 4, 5]; //각각의 인덱스를 가지고 있다
let fruits = ['apple', 'banana', 'orange'];

// 형 변환
// 명시적 형 변환, 암시적 형 변환

// 1. 암시적
// 1-1 문자열
let result = 1+'2';
console.log(result);
console.log(typeof result);// result = 12, string

let result2 = "1" + true
console.log(result2);
console.log(typeof result2);// result = 1true, string

// 1-2 숫자
let result3 = 1 - '2';
console.log(result3)
console.log(typeof result3)// result = -1, number

let result4 = '3' * '2';
console.log(result4)
console.log(typeof result4)// result = 6, number
// + 이외에 연산자들은 문자열이어도 숫자취급

// 2. 명시적 형 변환
// 2-1 boolean
console.log(Boolean(0));
console.log(Boolean(''));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean(NaN));
console.log("--------------------");
console.log(Boolean(false));
console.log(Boolean('false'));// 문자열이기에 true
console.log(Boolean({}));// 객체는 그냥 true

// 2-2 문자열
let result5 = String(123);
console.log(result5);
console.log(typeof result5)

let result6 = String(true);
console.log(result6);
console.log(typeof result6)

let result7 = String(false);
console.log(result7);
console.log(typeof result7)

let result8 = String(null);
console.log(result8);
console.log(typeof result8)

let result9 = String(undefined);
console.log(result9);
console.log(typeof result9) //모두 문자열로 바뀜

// 2-3 number
let result10 = Number('123');
console.log(result10);
console.log(typeof result10)

// 1. 산술연산자(+, -, *, /, %)

// 형 변환 시 + 빼고는 number

// 1-1 덧셈 연산자
// 1-2 뺄셈 연산자
// 1-3 곱셈 연산자
// 1-4 나누기 연산자
// 1-5 나머지 연산자

// 2. 할당 연산자(assignment)
// 2-1 등호 연산자(=)
let x = 10;

// 2-2 더하기 등호 연산자(+=)
x += 8;

// 2-3 빼기 등호 연산자(-=)
x -= 9;

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

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


// // 3. 비교 연산자(--> true 또는 false를 변환하는 연산자)
// // 3-1 일치 연산자(===)
// // 타입까지 일치해야 함
console.log(2 === 2); // t
console.log('2' === 2); // f

// // 3-2 불일치 연산자(!==)
// // 타입까지 일치해야 함
console.log(2 !== 2); //f
console.log('2' !== 2); //t

// 4. 비교연산자
// 4-1 작다(<) 작거나같다(<=)
// 4-2 크다(>) 크거나같다(>=)

// 5. 논리 연산자
// 5-1 논리곱 (AND)
console.log(true && true); //t
console.log(true && false); //f
console.log(false && true); //f 
console.log(false && false); //f

// // 5-2 논리합 (OR)
console.log(true || true); //t
console.log(true || false); //t
console.log(false || true); //t 
console.log(false || false); //f

// // 5-3 논리부정 !
console.log('---------');
console.log(!true);
let a = true;
console.log(!a);

// 6. 삼항연산자
let y = 10;
let result = x > 20 ? '성인입니다':'청소년입니다';

console.log(result)

// 7. 타입연산자 (typeof)

// 함수 = function(기능)
// input, output 존재

// function add (매개변수){
//     // 실행할 로직
// }

// 1. 함수 선언문
function add(x, y) {
    return x + y;
}

// 2. 함수 표현식
let add2 = function (x, y) {
    return x + y;
}

// 3. 함수 사용
let functionresult = add(2,3);
console.log(functionresult);

// 스코프, 전역변수, 지역변수, 화살표함수
let x = 30; // 전역변수

function exam(x,y){
    let z = 20;
    return z; // 지역변수
}

console.log(x);

// 1. 화살표 함수
// ES6 신 문법
// 기존 함수를 정의하던 방법보다 편하다

// 1-1 기본적인 화살표 함수
let arrowFunc = (x, y) => {
    return x + y;
}

// 1-2 한줄로 (중괄호 안이 한 줄일 때만 리턴 생략가능)
let arrowFunc2 = (x, y) => x + y;


function testFunc(x) {
    return x;
}

// 화살표 함수로
let arrowFunc3 = x => x;

// 조건문(if, else if, else, switch)

// // 1. if문
// // 1-1
// if (조건) {
//     //true일 경우 main logic이 실행
// }

// // 1-2
let y = "hello world!";

if (y.length >= 5) {
    console.log(y.length)
}

// 2. if ~ else 문

if (x > 0) {
    //main logic #1
}
else {
    //main logic #2
}
let x = -4;

// 2-1 if ~ else if ~ else 문
if (x > 0) {
    console.log("1");
}
else if (x > -5) {
    console.log("2");
}
else {
    console.log("3");
}

// 3. switch
// 변수의 값에 따라 여러 개의 case 중 하나를 ㅓㅅㄴ택
// default
let fruits = '사과';

switch (fruits) {
    case "사과":
        console.log("사과입니다")
        break;
    case "키위":
        console.log("키위입니다")
        break;
    case "바나나":
        console.log("바나나입니다")
        break;
    default:
        console.log("잘 모르겠습니다")
        break;
}

// 조건문의 중첩
let age = 20;
let gender = "여성";

if (age >= 20) {
    if (gender === "여성")
        console.log("성인 여성입니다")
    else
        console.log("성인 남성입니다")
}
else
    console.log("성인이 아닙니다")

// 조건부 실행
let x = 10;

// and 조건 &&
x > 0 && console.log("x는 양수입니다")

// or조건 (||)
// 삼항 연산자와 단축평가
let y;
let z = y || 20; // y or 20이 할당 y가 미지정이니 20출력
console.log(z);

// falsy한 값, truthy한 값

if (""){
    //falsy한 값입니다
}

// 객체

// 1. 객체 생성 방법
// 1-1 기본
let person = {
    name: "이승준",
    age: 27,
    gender: "M",
    hobby: ['헬스', '당구', '서핑', '여행', '요리']
}

// 1-2 생성자 함수를 이용한 객체 생성 방법
// 나중에 다시
function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}

let person1 = new Person("서지희", 26, "F");
let person2 = new Person("원욱재", 26, "M");

// 2. 접근하는 방법
console.log(person.hobby[1])
console.log("1", person1)
console.log("2", person2)

// 3. 객체 메소드(객체가 가진 여러가지 기능 : Object.~~)
// 3-1 Object.key() : key를 가져오는 메소드
let keys = Object.keys(person)
console.log("keys ==> ", keys)

// 3-2 Object.values() : values를 가져오는 메소드
let values = Object.values(person)
console.log("values ==> ", values)

// 3-3 entries
// key와 value를 묶어서 배열로 만든 배열 (2차원)
let entries = Object.entries(person)
console.log(entries)

// 3-4 assign
// 객체 복사
let newperson = {};
Object.assign(newperson, person, { name: '이창범' });
console.log('new person ==> ', newperson);

// 객체비교
let person3 = {
    name: "이승준",
    age: 27,
    gender: "M",
}
let person4 = {
    name: "이승준",
    age: 27,
    gender: "M",
}

let str1 = 'aaa';
let str2 = 'aaa';

console.log("answer ==> ", person3 === person4);//F
console.log("answer ==> ", str1 === str2);//T
// 객체는 크기가 커서 주소값을 가지고 있다 주소 값은 달라서 F
// 문자열은 작아서 직접 값을 가지고 있기 때문에 T

console.log(JSON.stringify(person3) === JSON.stringify(person4))
// 객체를 문자열화 시켰기 때문에 이건 T


// 3-6 객체 병합
let person3 = {
    name: "이승준",
    age: 27,
}
let person4 = {
    gender: "M",
}
// ...=> 중괄호 풀어줘
let perfect = {...person3, ...person4};
console.log(perfect)

// 배열

// 1. 생성
// 1-1 기본 생성
let fruits = ['사과', '바나나', '키위'];

// 1-2 크기 지정
let number = new Array(5);

console.log(fruits.length)

// 2. 요소 접근
console.log(fruits[1]);

// 3. 배열 메소드
// 3-1 push
let fruits = ['사과', '바나나', '키위'];
console.log('1==> ',fruits);

fruits.push('수박');
console.log('2==> ',fruits);

// 3-2 pop 맨 뒤에 요소 삭제
let fruits = ['사과', '바나나', '키위'];
console.log('1==> ',fruits);
fruits.pop();

// 3-3 shift 맨 앞에 요소 삭제
let fruits = ['사과', '바나나', '키위'];
fruits.shift();

// 3-4 unshift 맨 앞에 요소 추가
let fruits = ['사과', '바나나', '키위'];
fruits.unshift('포도');

// 3-5 splice (시작요소,삭제할개수, '추가할 요소')
let fruits = ['사과', '바나나', '키위'];
fruits.splice(2,1,'포도','당근');
console.log(fruits)

// 3-6 slice (시작요소, 마지막요소(포함x)) 를 새로운 배열로 반환
let fruits = ['사과', '바나나', '키위', '당근', '포도'];
let newfruits = fruits.slice(2,4);
console.log(fruits.slice(2,4));
console.log(newfruits);



// 배열(2)
// 4. forEach, map, filter, find
let numbers = [11, 32, 23, 54, 665];

// 4-1 forEach 배열매개변수 자리에 함수를 넣는 것 : 콜백 함수
numbers.forEach(function (item) {
    console.log("item입니다 => ", item);
});

// 4-2 map 기존 배열을 가공해서 새로운 배열 생성 배열의 길이만큼 리턴 반환
let newnumbers = numbers.map(function (item) {
    return item * 2;
});
console.log(newnumbers);

// 4-3 filter 

let filternumbers = numbers.filter(function (item) {
    return item >= 200;
});

console.log(filternumbers);

// 4-4 find

let result = numbers.find(function (item) {
    return item >= 10;
});

console.log(result);

// for, while => ~동안 : 반복문

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

const arr = [3, 25, 32, 4, 15]

for (let i = 0; i < arr.length; i++) {
    console.log(i,"번째")
    console.log(arr[i])
}


// ex: 0부터 10까지의 수 중에서 2의 배수만 출력

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

// for ~ in문
// 객체의 속성을 출력하는 문법
let person = {
    name: "john",
    age: 30,
    gender: 'M'
}

for (let key in person) {
    console.log(key + ": " + person[key]);
}

// while
let i = 0;

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

// 3~100 사이 숫자중 5의 배수만 출력
let i = 3;

while (i < 251) {
    if (i % 5 === 0) {
        console.log(i)
    }
    i += 1;
}


// do ~ while 문
let i = 0
do {
    console.log(i)
    i++;
} while (i < 10)

5/22 일기

java script 시작
기본적인 건 java와 비슷한 듯
udemy 무료 강의가 생겨서 부족한 부분 강의 들으려고..
위 코드는 기록용

이승준

이전 포스트

5/21 WIL

다음 포스트

5/22 TIL

5/22 메모

5/22 기록

5/22 일기

5/21 WIL

5/23 TIL

0개의 댓글