[2024-2 웹기초 스터디] 김민재 #3주차

Part 1.

---

변수와 상수

• js는 변수를 선언할 때 앞에 let을 붙인다
• 또한 =를 통해 대입 가능

let hi = 'hi'
hi = 'bye'
console.log(hi)

• const를 사용해 상수 선언, 나중에 값을 변경 불가

const hello = "안녕하세요"

• var라는 변수는 중복을 허용하기 때문에 쓰면 안됨

원시 데이터 타입

• 원시 데이터: 객체가 아니면서 메서드도 가지지 않는 데이터
  • string, number, bigint, boolean, undefined, null, (symbol)

//string
const nam = "kk"
console.log(typeof nam)

//number
const number = 123;
console.log(typeof number)

//bigint
const num = 123n;
console.log(typeof num)

//boolean
const isTrue = true;
console.log(typeof isTrue)

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

//null
null은 값이 없을 때

• 백틱
  • 파이썬 포맷 함수 같은 사용

const age = 20
const job = "개발자"
const msg = `저는 ${job}이고, ${age}살 입니다`
console.log(msg)

참조 데이터 타입

• 참조 데이터: 객체타입이며, 변수의 크기가 동적으로 변한다
• 배열: 데이터들의 집합

const arr = [1, 2, 3];
console.log(arr[1])

• 객체: 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입, key / value pair 구조
  • 대괄호 표기법
    • 객체의 이름뒤에 대괄호를 붙이고 키 값을 문자열로 지정
    • obj[’name’]
  • 점 표기법
    • 객체의 이름뒤에 .을 붙이고 접근하려는 키 값을 적음
    • obj.name
• 객체: { hi: 'hi' } const obj = { name: 'mj', job: '무직' } console.log(obj)
• 배열과 객체의 중첩

const arr = [1, 2, 3, [4, 5]];
console.log(arr)

const arr1 = [1, 2, 3, { name: 'mj' }];
console.log(arr1)

const obj = {
    arr: [1, 2, 3],
    something: {
        name: "mj"
    },
};

연산자

• 산술 연산자

// +, -, *, /, %, **
console.log(10 % 5)
console.log(2 ** 3)

• 증감 연산자

// ++, --
let number = 10
number++
console.log(number)

• 비교 연산자

// >,<,==,>=, !===
// a == b (추상 비교)
// a === b (엄격 비교)
const a = 10;
const b = 20;
console.log(a === b)

• 논리 연산자

// and, or, not
const a = 2 < 3;
const b = 30 > 50;

console.log(a && b)
console.log(a || b)
console.log(!a)

• 삼항 연산자

// 조검 ? 참일 때 실행될 부분 : 거짓일 때 실행될 부분
console.log(2 < 3? "참" : "거짓")

• 널리쉬 연산자

// 널리쉬 연산자: 여러 개의 피연산자 중 값이 확정되어 있는 변수를 찾음
const a = undefined;
const b = null;
const c = 'mj';

console.log(a ?? b ?? c)

• 비트 연산자
• 대입 연산자
• 전개 구문

// 반복이 가능한 어떤 객체에 적용할 수 있는 문법의 한 종류
// 쫙 펼쳐서 전개
const numbers = [1, 2, 3];
console.log(...numbers)

const numbers2 = [4, 5, 6];
const newNumbers = [...numbers, ...numbers2]
console.log(newNumbers)

Part 2.

---

조건문 (if)

• If
• else
• elif

const a = 10;
const b = 20;
const c = 20;

if (a > b){
    console.log('a가 더 작음');
} else if(b === c){
    console.log("b랑 c가 같다");
} else {
    console.log('거짓');
}

조건문 (switch)

• switch: 값에 따라 실행

const number = 10;

switch (number) {
    case 1:
        console.log(number);
        break;
    case 12:
        console.log(number);
        break;
    default:
        console.log("아무것도 해당안됨")
}

반복문 (for)

for (let j=0; j<5; j++){
    if (j === 2){
        continue
    }
    if (j === 4){
        break
    }
    console.log(j)
}

반복문 (while)

• for of: 배열같은 곳에서 하나씩 빼낼 때

const arr = [1, 2, 3]
for (const i of arr){
    console.log(i)
}

• while

let i = 0;

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

let j = 0;

do{
    console.log(j++)
} while (j<10)

Part 3.

---

함수

function bok(main){
    console.log(`${main} 볶음밥`)
}

bok("새우")
bok("제육")

• 인자와 매개변수
  • 인자: 함수의 입력 값(Argument)
  • 매개변수: 함수의 입력 변수(Parameter)
• 나머지 매개변수

function print(a,b, ...rest){
    console.log(a)
    console.log(b)
    console.log(rest)
}

print(10, 20 , 30, 40, 50, 60)

• retrun

function sum(a,b ){
    return a + b
}

console.log(sum(10, 1))

함수의 표현식과 화살표 함수

• 함수의 표현식

function sum(a,b ){
    console.log(a + b)
}
const sum1 = function(a,b ){
    console.log(a + b)
}

• 화살표 함수

const sum = (a, b) => {
    console.log(a + b);
}

sum(10,20)