개발일지
개발일지 21일차
index.ys
2023. 4. 3. 22:26
항해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) //undefinednull
- "값이 없음"을 개발자가 명시적으로 표현한값
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") //trueconsole.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++
}정규과정의 첫번째 날이 끝났다. 온보딩에서 배웠던 내용들이 도움이 잘되었던건지 오늘 들었던 강의는 크게 어렵지 않았다. 같이 공부했던 사람들이 알고리즘을 벌써 부터 준비한다고해서 나도 해야하나 라는 생각이 들었지만 일단은 내 페이스대로 공부하면서 내가 부족하다고 생각되는 부분들은 개인적으로 공부하거나 알고리즘 스터디를 진행하거나 해야겠다.
- 할 일:화요일 과제 해보기