[새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 2주차 (1): Javascript

Javascript

 

1. Javascript 참조 방식

💫내장 방식: 위치 어디든 사용이 가능하다.

<script>
	alert("헤드 그런데 js 파일 링크 위");
</script>

 

💫링크 방식

<script src="./index.js"></script>

 

2. 데이터 종류

💫String 문자열

let myName = "sample"
let email = 'sample@g.com'
console.log(myName)
console.log(email)

// 문자와 변수를 동시에 써보기
console.log('내 이름은', myName)
// let bbbb = '내 이름은', myName
let aaaa = '내 이름은' + myName+'이고, 이메일은'+email+'입니다.'
let bbbb = `내 이름은 ${myName}이고, 이메일은 ${email}입니다.`
console.log(aaaa)
console.log(bbbb)

 

💫Number 숫자

let number=123
let opacity=0.7
console.log(number)
console.log(opacity)
 
console.log(number+opacity)
console.log(number-opacity)
 
console.log("apple"-3) //NaN(Not a Number)

 

💫Boolean 참, 거짓 데이터

let checked = true
let isShow = false
 
console.log(checked)
console.log(isShow)

 

💫Undefined 미할당 데이터

let undef;
let obj={
    abc: 123
}
console.log(undef)
console.log(obj.abc);
console.log(obj.efg); // undefined

 

💫Null 빈 데이터: 어떤 값이 "의도적"으로 비어 있음을 의미할 때 사용

let empty = null;
console.log(empty)

 

💫Array 배열

let fruits =["orange", "durian", "banana", "mango"]
let fruits2 =new Array("orange", "durian", "banana", "mango")
 
console.log(fruits [3])
console.log(fruits2 [1])
 
// 여러 데이터 타입을 하나의 배열에 넣을 수 있음
let data = [1, true, null, "string", 100]
console.log(data[0], data[4])
 
// 2차원 배열
let korean=[["가", "갸", "거", "겨"],
            ["나", "냐", "너", "녀"],
            ["다", "댜", "더", "뎌"]]
console.log(korean [2] [0])

// 아래 배열에서 아이스크림 출력하기
const letters = [
    ["사", "스", "자", "크"],
    ["진", "안", "리", "이"],
    ["가", "수", "림", "나"],
    ["아", "으", "차", "운"],
];
 
console.log(letters [3] [0], letters [1] [3], letters [0] [1], letters [0] [3], letters [2] [2])
 
// 8 출력
const nums = [
    [
        [1, 2, 3],
        [4, 5, 6],
    ],
    [
        [7, 8, 9],
        [10, 11, 12],
    ],
];
 
console.log(nums [1] [0] [1])

 

💫Object 키:값 의 한 쌍으로 이루어져 있음

let cat = {
    name: '나비',
    age: 1,
    gender: 'F', 
    isCute: true
}
 
// 접근방법1 - period 접근법
console.log(cat.name)
console.log(cat.isCute)
cat.like = ['tuna', 'rat']
 
// 접근방법2 - 대괄호 접근법
console.log(cat ['name'])
cat["parent"]="초롱이"
 
console.log(cat)

 

👻자료형 확인 typeof👻

: 해당 자료형이 어떤 것인지 알려준다!

let und;
console.log(typeof "문자")
console.log(typeof 100)
console.log(typeof true)
console.log(typeof {}) // object
console.log(typeof [true]) // object
console.log(typeof null) // object
console.log(typeof und) // object
console.log(typeof NaN) // object
console.log(typeof function(){}) // function    

 

📒typeof 실습📒

// "number" isn't "string" data type.
// typeof 를 array나 null에 사용하면, "object" 결과를 얻을 수 있습니다.
console.log(`"${typeof 123}" isn't "${typeof ""}" data type.`)
console.log(typeof 123+ ' isn\'t' + typeof "" +" data type." )
console.log('typeof 를 array나 null에 사용하면, "'+typeof null+ '"결과를 얻을 수 있습니다.')

 

3. 형 변환

💫명시적 형 변환

• 자동 형 변환에 의지하지 않고 개발자가 직접 형 변환을 시키는 것

💫문자 데이터로 변환➡️ String(); 

let str1=true
let str2=123
let str3=null
console.log(String(str1))
console.log(String(str2))
console.log(String(str3))
console.log(typeof str1.toString())

 

💫숫자 데이터로 변환➡️ Number();

let n1 = true
let n1_1 = false
let n2 = "123"
let n3 = "123.5"
console.log(Number(n1)) // true -> 1
console.log(Number(n1_1)) // false -> 0
console.log(Number(n2))
console.log(Number(n3))
console.log(parseInt(n2)) 
console.log(parseInt(n3))
console.log(parseInt(3.14)) // parseInt: 정수로 바꿔줌 (소수점 절삭)

 

4. 변수: 데이터를 저장하고 사용하는 데이터의 이름

💫var: 재할당, 재선언 모두 가능 ➡️ var 대신 let 사용을 권장!

💫let: 재사용, 재할당 가능. 재선언 불가!

💫const: 재할당 불가 (등호를 이용해 값 변경이 불가)

 

5. 기본 연산자

💫% 나머지 연산자 

• 홀수: num%2==1
• 짝수: num%2==0

💫** 거듭제곱

💫연산자 줄여쓰기

• num = num + 5 ➡️ num += 5
• num = num * 5 ➡️ num *= 5

💫증가, 감소 연산자

• num++;
• num--;

6. 비교 연산자

💫일치 연산자: 변수의 값 뿐만 아니라 자료형 까지 비교한다

구문	의미
A == B	A와 B의 값 비교
A === B	A와 B의 값과 data type 비교
A != B	A와 B의 값 비교
A !== B	A와 B의 값과 data type 비교

 

7. 논리 연산자

💫|| OR : 여러개 중 하나라도 true면 결과값이 true이다.

💫&& AND: 여러개 중 하나라도 false면 결과값이 false이다.

💫! NOT

 

8. 함수 Function

/**
 * 함수
 *  - 특정 작업을 수행하기 위해 설계된 코드 집합
 *  - 함수의 선언 구조
 *  - 키워드: function()
 *  - 함수의 이름: camelCase로 함수의 이름 작성 (recommeded)
 *  - (매개변수): 함수 내부에서 사용할 변수 (매번 달라지는 변수)
 *  - {스코프}: 함수의 내부 코드
 * 함수 선언문, 함수 표현식
 *  - 함수 표현식: 변수에 함수를 저장
 *  - 함수 선언문: 명시적 함수 선언
 *   */

💫함수 선언문: 어디서든 호출 가능

👻호이스팅(hoisting): 선언 순서 상관 없이 변수와 함수가 끌어올리진 모양👻

💫함수 표현식: 코드에 도달하면 생성

💫화살표 함수 (arrow function)

 

💫매개변수가 있는 함수 만들기

// 매개변수가 있는 함수 만들기
// 1. 매개변수 1개, 함수 선언문
function sayHello1(text){
    return text
}
console.log(sayHello1("안녕!"))
 
// 2. 매개변수 2개, 함수 선언문
 
function sayHello2(text, name){
    return `${text}! ${name}`
}
console.log(sayHello2("안녕", "sampleName"))
 
// 3. 매개변수 2개, 함수 표현식
// 내부 스코프 console.log 작성
const sayHello3=function(text, name){
    console.log(`${text}! ${name}`)
}
sayHello3("안녕", "sampleName")
 
// 4. 매개변수 2개, 화살표 함수
const sayHello4= (text,name) =>{
    return `${text}, ${name}`
}
const sayHelloValue=sayHello4("안녕","sampleName")
console.log(sayHelloValue)

 

🥲백틱 ``이 익숙하지 않아 실습때 좀 헤맸다... 백틱 안에 값을 넣으면 더 편하다!

 

9. 조건문

💫if문: 조건식이 참일 때 실행할 문장 

• 결과 값이 true, false로 나오도록 조건식을 작성해야 한다.

if(5>3){
    console.log('조건이 참 입니다.')
}

// if else 문
 
let userInput= Number(prompt('점수를 입력해주세요.'));
let userInput = 100
if(userInput >= 90 && userInput <= 100){
    console.log('A입니다.')
} else if(userInput>=80){
    console.log('B입니다.')
} else if(userInput>=70){
    console.log('C입니다.')
} else{
    console.log('F입니다')
}
 

💫조건문 중첩

let userId= 'user01'
let userPw= '1234qwer'
 
function loginUser(){
    let promptId=prompt('아이디를 입력 해 주세요.')
    let promptPw=prompt('비밀번호를 입력 해 주세요.')
    if(userId === promptId){
        if (userPw === promptPw){
            console.log('로그인 성공')
            alert("안녕하세요 "+userId+"님")
        } else{
            alert("비밀번호가 틀렸습니다.")
        }
    } else if(promptId===''){
        alert('아이디를 입력하지 않았습니다.')
    } else{
        alert('아이디가 틀렸습니다.')
    }
}

 

💫switch

// let a = Number(prompt('숫자를 입력 해 주세요.'))
let a=5
// switch의 괄호에는 조건이 아닌 값이 들어감
switch(a){
    // case에는 값에 대한 경우가 들어감
    case 3:
        console.log('a가 3입니다.')
        break;
    case 4:
        console.log('a가 4입니다.')
        break;
    case 5:
        console.log('a가 5입니다.')
        break;
    default:
        console.log('a가 어떤 숫자인지 알 수 없습니다.')
}

 

💫삼항연산자

let num = 5
if(num%2===1){
    console.log('홀수')
}else{
    console.log('짝수')
}
 
// 조건? 참일때 : 거짓일 때
num%2===1?console.log('홀수'):console.log('짝수')

 

📒실습

console.log('---실습---')
let now = new Date().getHours();
now<=12?console.log('오전'):console.log('오후')
// console.log(now)
 
console.log('---실습---')
let theNum = Number(prompt('숫자를 입력 해 주세요.'))
if(theNum<=10000){
for(let i=1; i<=10000; i++){
    if(i%13===0&&i%2===1){
        console.log(i)
    }
}
}
 
console.log('---실습---')
let thesum=0;
for(let i=0; i<=100; i++){
    if(i%5===0||i%2===0){
        thesum=thesum+i
    }
}
console.log(thesum)
 

10. 반복문

• 특정 코드를 반복하고 싶을 때 사용

💫for문

for(변수 선언과 초기화;조건식(어디까지 감소, 증가할건지);증감){
    반복 실행 코드

}

증감식: i++, i=i+1, i+=1

// 1 ~ 5까지 출력하는 방법!
for(let i = 1; i<=5; i++){
    console.log(i)
}
 
for(let i = 1; i < 6; i++){
    console.log(i)
}
 
for(let i = 0; i < 5; i++){
    console.log(i+1)
}
 
// 5 ~ 1 출력
for(let i = 5; i > 0; i--){
    console.log(i)
}
 
let fruits = ['apple', 'banana', 'orange', 'mango']
console.log(fruits.length)
// fruits 전체 요소 for문을 이용해서 출력
for(let i = 0;i < fruits.length;i++){
    console.log(fruits[i])// 0,1,2,3
}

📒실습

// 1 ~ n까지 더하기
let n =11
let sum=0;
// 반복문을 사용해서 덧셈 만들기
/* 
3
sum = 0
sum = sum + 1 > 1
sum = sum + 2 > 3
sum = sum + 3 > 6
*/
for(let i = 1; i <= n; i++){
    sum = sum + i
}
console.log(sum)
 
let arr = [99,98,85,77,100,50]
// 배열 내부의 합 구하기
 
let sum2=0
for(let i = 0;i<arr.length ; i++){
    sum2+=arr[i]
}
 
console.log(sum2)
 
// 1이상 20이하의 수 중에서
// 짝수만 더한 값 출력하기
let sum3 = 0
for(let i = 1;i<=20;i++){
    if(i%2===0){
        sum3+=i
    }
}
 
console.log(sum3)
 
let sum4 = 0
for(let i=0; i<=20;i=i+2){
    sum4+=i
}
console.log(sum4)
 
let sum5=0
// 홀수의 합 구하기
for(let i=0; i<10;i++){
    // if(i%2===1) sum5+=i
    if(i%2===0) continue // 다음반복으로 넘어가도록
    sum5 = sum5 + i
}
console.log(sum5) // 0~10 까지의 홀수 합, 25

let sum55=0;
// 홀수의 합 구하기
for(let i=0; i<10; i++){
    // if(i%2==1) {sum5+=i}
    if(i%2===0) continue; // i가 짝수라면 다음 반복으로 넘어가도록
    sum55=sum55+i
}
console.log(sum55)

 

🔢구구단 실습

for(let i =0;i<5;i++){
    console.log('-----')
    console.log(i)
    for(let j=0; j<5;j++){
        console.log('j:',j)
    }
}
 
for(let i=2;i<10;i++){
    console.log(i+'단')
    for(let j=1;j<10;j++){
        console.log(i,'X', j,'=',i*j)
    }
}

 

💫while문

• for문과 다르게 값을 제어하는 구문이 기본적을 포함이 되어 있지 않아 무한 루프 가능.

// while문을 이용해서 10부터 1까지 홀수만 출력
let n3=10
while(n3>=1){
    if(n3%2===1)
        console.log(n3)
    n3--
}

 

그래도 옛날에 해봤다고 어렴풋이 기억이 났다😂 (교수님 죄송해요) for문은 이후 실습에서도 많이 쓰이니 잘 익혀둬야겠다. 백틱의 중요성도 다시 짚고 간다.👍🏻