개발일지 21일차

항해99 본과정 시작 2023. 04 . 03

- 항해99 본과정이 오늘 시작됐다. 한달간의 사전스터디를 끝내고 본과정에 들어왔다. 사전스터디때 학습했었던

자바스크립트의 기초를 복습한다는 느낌으로 강의를 들었다.

자바스크립트의 특징

• 객체단위로 명려어를 수행하는 객체지향 언어이다.
• 런타임시점에 타입이 결정되는 동적타이핑언어이다.(코드가 짜여지고 프로그램이 돌아갈때 타입이 정해짐)
• 함수형 프로그래밍이다
• 비동기처리가 가능하다
• 클라이언트 ,서버에서 둘다 사용이 가능한 언어이다( Node.js )

변수와 상수

변수: 메모리에 지정된 값을 저장하고 필요할때 마다 호출하여 재사용함

- 변수를 선언하는 방법에는 세가지가 있다 var , let , const가 있으나 var는 더 이상사용하지 않는 변수선언식이다

- 변수가 재할당이 필요한 경우에는 let으로 변수를 선언하고 그렇지않은 경우에는 const를 사용하여 변수를 선언한다.

var hi = "안녕"
let hase "하세요"
const hihase = hi + hase

console.log(hihase) // '안녕하세요'

데이터 타입

숫자열

- 자바스크립트는 코드를 작성할 때가 아닌 코드가 실행될때 데이터의 타입이 결정된다

- 자바에서 변수선언식: java : string a Number (변수를 선언할때 데이터의 타입을 결정)

- 자바스크립트 변수선언식 : let a = 10

- typeof함수로 변수가 어떤 데이터 타입을 가지고 있는지 확인 할 수 있다.

- 숫자가 아닌 데이터 타입은 NaN(Not a Number)라는 값을 출력한다.

- 숫자가 무한일때는 infinify라는 값을 출력한다.

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

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

let num3 = 2.5e5
console.log(num3)  //250000
console.log(typeof num3) //number

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

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

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

문자열

let str = "hello world"
console.log(str)  //"hello world"
console.log(typeof str) // string

console.log(str.length) // 12 문자열의 길이를 나타내는 속성 length

let str1 = "hello, "
let str2 = "world "
let result = str1.concat(str2) //문자열과 문자열을 합치는 함수 concat()
console.log(result)

let str3 = "hello world"
console.log(str3.substr(7, 5)) //substr() 문자열을 첫번째 매개변수값 부터 두번째 매개변수의 갯수만큼 출력하는 함수 
console.log(str3.slice(7, 12)) //slice() 문자열을 첫번째 매개변수부터 두번째매개변수까지 잘라서 출력하는 함수

let str4 = "hello world"
console.log(str4.search("world"))

let str5 = "hello world"
let result01 = str5.replace("world", "javascriti") //replace 첫번째 매개변수를 두번째 매개변수로 대체하는 함수 
console.log(result01)


let str6 = "apple , banana, camera" 
let result02 = str6.split(",") //split 문자열을 합쳐주는 메서드
console.log(result02)

 

undefined

- 변수의 값이 할당되지 않았을때 출력됨

let x
console.log(x) //undefined

null

- "값이 없음"을 개발자가 명시적으로 표현한값

let y = null
console.log(y)

 

 

형변환

- 요소의 타입이 변하는 것

명시적 형변환

- 명시적으로 타입을 선언하여 어떤 타입으로 변한지 알 수 있음

console.log(Boolean(0)) //false
console.log(Boolean(""))  //false
console.log(Boolean(null))  //false
console.log(Boolean(undefined))  //false
console.log(Boolean(NaN))  //false
console.log(Boolean("false"))  //false
console.log(Boolean({})) //true

let result5 = String(123)
console.log(typeof result5)
console.log(result5)

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

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

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

let result9 = String(undefined)  //string
console.log(typeof result9)
console.log(result9)


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

암시적 형변환

let result = 1+"2"
console.log(result)
console.log(typeof result)

let result2 = "1" + true   //문자열 + 숫자 = 문자열
console.log(result2)      // 문자열 + boolean = 문자열
console.log(typeof result2)  //문자열 (string)

//객체 ,null , undefined + "1" = 문자열


let result3 = 1 - "2"
console.log(result3)          //문자 - 숫자 = 숫자열
console.log(typeof result3)   

let result4 = "2" * "3"     //문자 * 문자 = 숫자열
console.log(result4)
console.log(typeof result4)

연산자

더하기 연산자 +

console.log(1+1)
console.log(1+"1")

빼기 연산자 -

console.log(1 - "2") // -1
console.log(typeof (1 - "2")) //number
console.log(1 - 2)

곱하기 연산자 *

console.log(2 * 3) //6
console.log("2" * 3) //6 
console.log(typeof ("2" * 3))  //number

나누기 연산자 /

console.log(4 / 2) //  2
console.log("4" / 2) // 2
console.log(typeof ("4" / 2)) //number

나머지 연산자 %

console.log(5 / 2)  //2.5
console.log( 5 % 2) //1

할당 연산자 =

let x = 10;
console.log(x)

더하기 등호 연산자 +=

x += 5 // === x + 5
console.log(x)

빼기 등호 연산자 -=

x -= 5
//x = x - 5
console.log(x)

곱하기 등호연산자 *=

let a = 10
a *= 2
console.log(a)

일치 연산자 ===

// 타입까지 일치해야 true를 반환하는 연산자

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

불일치 연산자 !==

//타입까지 일치해야 false를 반환하는 연산자
//불일치 연산자는 일치 연산자의 반대값이 나온다
//숫자 2가 숫자 2와 다르니? 아니!
console.log(2 !== 2) //false
console.log("2" !== 2) //true
console.log(2 !== "2") //true

console.log( 2 < 3) //true
console.log( 2 <= 2) //true
console.log( 2 <= 3) //true
console.log( 4 <= 3) //true

논리 연산자

- true or false를 판단함

&& and

// 논리곱, and 연산자 : 모두 true 일때 true반환
console.log(true && true)
console.log(true && false) //true
console.log(true && true) //false
console.log(false && true) //false
console.log(false && false) //false

|| or

//논리합, or 연산자 : 두 갑중 하나라도 true 인 경우 true 반환
console.log(true || true) //true
console.log(true || false) //true
console.log(false || true) //true
console.log(false || false) //false

! not

//논리 부정 ! 연산자 : 값을 반대로 바꿈
console.log(!true) //false
let b = true 
console.log(!a) //false

삼항연산자

- true 일때 "크다"  false 일때 "작다"를 출력함

//조건에 따라 값을 선택한다.
let c = 10
let result = (x > 5 ) ? "크다" : "작다"
console.log(result) //크다

타입연산자

//타입연산자
console.log(typeof "5") //string

함수

- 입력과 출력값을 가지고 있는 기능

- 기능의 단위로 묶은다음 재활용가능, 효율적인 코드활용가능

//함수 선언문
function add(a,b) {
    
    return  a + b
}

함수 표현식

let add2 = function( a , b ){
    return a + b
}

전역변수

- 변수 y는 printx() 함수 안에서도 사용가능하고 함수 밖에서도 사용가능한 지역변수이다.

let y = 20
function printx() {
    //x는 지역변수
    let x = 10
    console.log(x)
}

console.log(x)
printx()

지역변수

- 변수 x는 함수안에서만 사용할 수 있는 지역변수이다.

let y = 20
function printx() {
    //x는 지역변수
    let x = 10
    console.log(x)
}

console.log(x)
printx()

화살표 함수

let arrow01 = ( x , y )=>{
    return x + y
}
//한줄로 표현
let arrow02 = (x,y) => x + y;

조건문 if

- 특정한 조건이 true일때 중괄호 안의 값을 실행함

let x = 10

if (x > 0) {
    console.log("x는 양수입니다.")
}

else

- 조건이 true일때 console.log("x는 양수입니다.") 출력

- 조건이 false일때 console.log("x는 음수입니다.") 출력

- else는 조건식이 붙지않고 결과값만 출력한다.

let z = 10

if (z > 0) {
    console.log("x는 양수입니다.")
} else {
    console.log("x는 음수입니다.")
}

else if

- if와 else 사이에 추가적인 조건식을 추가할 수 있다.

if (z < 0) {
    console.log("1")
} else if (z >= 0 && z < 10) {
    console.log("2")
} else {
    console.log("3")
}

조건문 switch

- switch의 변수의 값에 따라 여러개의 경우 중 하나를선택하려 출력함

- break를 넣어줘야 무한루프하지않고 원하는 값을 출력하고 종료됨.

let fruit = "사과"

switch (fruit) {
    case "사과":
        console.log("사과입니다.")
        break;
    case "바나나":
        console.log("바나나입니다.")
        break;
    case "키위":
        console.log("키위입니다.")
        break;
    default:
        console.log("아무것도 아닙니다")
        break;


}

중첩 조건문

- if안에 if를 넣어 특정 조건문 충족하는 식을 만들 수 있다.

- if안에 계속에서 if가 들어가면 가독성이 좋지않아 코드를 해석하거나 재사용하기 힘들 수 있다.

let age = 20
let gender = "여"

if (age >= 18) {
    if (gender === "여") {
        console.log("성인 여")
    } else {
        console.log("성인 남")
    }
} else {
    if (gender === "여성") {
        console.log("미성년 여성입니다")
    } else {
        console.log("미성년 남자")
    }
}

truthy, falsy

- truthy, falsy는 명시적으로 boolean 값을 나타내지는 않지만 암시적으로 데이터의 타입을 나타낸다.

if (0) {
    console.log("hello") //false
}

if ("") {
    console.log("hello") //false
}

if (null) {
    console.log("hello") //false
}

if (undefined) {
    console.log("hello")//false
}

if (NaN) {
    console.log("hello") //false
}

if (false) {
    console.log("hello") //false
}
if (true) {
    console.log("hello") //true
}

객체

- 변수하나에 여러개의 값을 넣을 수 있다.

- key와 value로 이루어져 있다. 

- 모든타입의 데이터를 넣을 수 있다.

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

function Person(name, age, gender) {
    this.name = name
    this.age = age
    this.gender = gender
}


let person1 = Person("홍길동", 30, "남자")
let person2 = Person("춘향이", 20, "여자")

객체 메서드

- 객체를 다룰 수 있는 메서드들이다.

let keys = Object.keys(person)
console.log(keys)

//values
let values = Object.values(person)
console.log(values)

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

//assign (객체복사)
let newPerson = {}
Object.assign(newPerson, person, { gender: "여자" })
console.log(newPerson)

객체 비교

- 객체와 배열은 메모리에 저장할때 별도의 공간에 저장됨

- 객체끼리 비교하기위해 JSON 형태로 파싱하여 비교가능.

let person3 = {
    name: "홍길동",
    age: 30,
    gender: "남자"
}
//person4 별도 공간에 대한 주소
let person4 = {
    name: "홍길동",
    age: 30,
    gender: "남자"
}

console.log(person3 === person4) //false

console.log(JSON.stringify(person3) === JSON.stringify(person4))

객체 병합

let person5 = {

    age: 30,
    gender: "남자"
}

let person6 = {
    name: "홍길동",

}

let objectAdd = { ...person5, ...person6 }
console.log(objectAdd) //{ age: 30, gender: '남자', name: '홍길동' }

배열

- index값을 가진 데이터의 나열을 배열이라고함.

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

//크기지정

let number = new Array(5)

console.log(fruits.length) //3 배열의 요소 갯수를 찾음
console.log(number) //5

//요소접근

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

배열 메서드

- 배열과 관련된 메서드이다. 요소를 배열에 추가하거나 삭제, 원하는 값을 찾아 출력하거나 특정한 값을 곱하여 새로운 배열을 만드는 등 여러방법으로 배열을 다룰 수 있다.

//push 마지막에 요소삽입

fruits.push("오렌지")
console.log(fruits)

//pop 마지막요소 삭제
fruits.pop()
console.log(fruits)

//shift 첫번재요소 삭제
fruits.shift()
console.log(fruits)

//unshift 첫번째에 요소삽입
fruits.unshift("키위")
console.log(fruits)

//splice 첫번째 요소부터 첫번째요소까지 삭제하고 "망고"를 넣음
fruits.splice(1, 1, "망고")
console.log(fruits)

//slice 1에서 2까지
fruits.slice(1, 2)
console.log(fruits)

//forEach map filter find

let numbers = [2, 2, 7, 8, 5]

//매개변수 자리에 함수를 넣는것 : 콜백함수
numbers.forEach(function (item) {
    console.log(item)
})

//map 새로운 배열을 만듬, 원본 배열의 길이만큼 return 됨

let newNumbers = numbers.map(function (i) {
    return i * 2
})

console.log(newNumbers)

//fiter 조건이들어감 조건에 맞는 값으 새로운 배열로 return

let fiternumbers = numbers.filter(function (i) {
    return i === 2
})

console.log(fiternumbers)

//find 가장앞에있는 1개의 갚만 return

let findnumbers = numbers.find(function (i) {
    return i > 2
})
console.log(findnumbers)

반복문 for

- 지정한 값에 도달할때 까지 반복해서 명령어를 실행한다.

- 배열과 for문은 같이 쓰는 경우가 많다.

- 필요한 값: i의 초기값, i가 반복해야 하는 횟수, i의 증감 값

//배열과 for문은 짝꿍이다.
const arr = [1, 2, 3, 4, 5]
for (let i = 0; i < 10; i++) {
    console.log(i)
    console.log(arr[i])
}

for (let i = 0; i <= 10; i++) {
    if (i >= 2) {
        if (i % 2 === 0) {
            console.log(i)
        }
    }

}

//fon in : 객체속성을 출력하는 문법
let person = {
    name: 'John',
    age: 30,
    gender: "male"
}

//fon ( let key in 객체이름){
//     출력할 값
// }


//person['key']
for (let key in person) {
    console.log(key + ":" + person[key]) //name:John age:30 gender:male
}

반복문 while

- for문과 거의 비슷한 형식이다.

- break 정해진 값이 나오면 반복문을 멈춘다.

- continue 만족한 조건이 나오면 다음 반복문으로 넘어감

while (조건) {
    //메인로직
    //증감
}

let i = 3
while (i < 100) {
    if (i % 5 === 0 && i >= 5) {
        console.log(i)
    }
    i++
}

정규과정의 첫번째 날이 끝났다. 온보딩에서 배웠던 내용들이 도움이 잘되었던건지 오늘 들었던 강의는 크게 어렵지 않았다. 같이 공부했던 사람들이 알고리즘을 벌써 부터 준비한다고해서 나도 해야하나 라는 생각이 들었지만 일단은 내 페이스대로 공부하면서 내가 부족하다고 생각되는 부분들은 개인적으로 공부하거나 알고리즘 스터디를 진행하거나 해야겠다.

- 할 일:화요일 과제 해보기