[2024 JS 심화 백엔드 스터디] 김규현 #1주차 "JS"

1. 자바스크립트란?

 
- 기능이 제한된 '마크업 언어'인 html과 css와 달리 반응하고 결과를 산출되도록하는 '프로그래밍 언어'임
- 초기에는 브라우저만 읽고 실행할 수 있었지만 엔진의 추출이후 활용영역이 확장됨
- 컴파일 과정을 거치지 않는 인터프리터언어임
- 개발과정이 빠르고 유연하지만 버그가 덜 걸러지고 실헹이 조금 느림
 
 

2. 콘솔과 주석

 
- 콘솔

console.log('출력할 값'); //괄호 안에 출력한 값을 입력
console.log(1, 2, 3); // 쉼표로 구분하여 다수의 데이터 출력 가능
console.log(this); // 다양한 데이터 출력 가능
console.log(console); // 복잡한 데이터를 편리하게 펼쳐서 볼 수 있도록 해줌

 
 - 타 언어의 print와 같은 역할
 
 

- 주석

//로 표현하여 우측에 있는 내용 무시

/*
여러 줄의 주석을
작성하는 방법입니다.
*/

 
- 컴퓨터가 무시하는 언어로 코드를 읽는 사람을 위한 메시지를 담음
 
 

3. 변수와 상수에 데이터 담기

 

- 변수 

let a = 5; // a라는 주머니에 5라는 데이터를 담기
a = "안녕하세요" // 데이터의 종류 자료형에 있어 민감하지 않음
let b // 선언만 할 수 있음

 
- let을 사용하며 특정 주머니를 생성함
- 넣은 데이터를 바꿀 수 있음
 
 

- 상수

const A = 4; // 상수는 보통 대문자로 명명

 
- const를 사용하여 특정 주머니를 생성함
- 넣은 데이터를 바꿀 수 없음
- 선언만 할 수 없음
 
 

4. 기본 자료형들과 연산자

 

- boolean : 참/거짓 여부

let bool1 = true; //참
let bool2 = false; // 거짓

 
 
- typeof 연산자 : 해당 데이터의 자료형을 반환
- ! 연산자 : 뒤에 오는 불리언의 반대 값을 변환
 
 

- number : 숫자

let num1 = 10; // 정수
let num2 = 3.14; // 실수 
// 정수/실수간 구분없음
// 사칙연산
console.log(1 + 2); // 덧셈
console.log(3 - num1); // 뺄셈
console.log(num1 * num2); // 곱하기
console.log(num1 / num2); // 나눗셈

 
 

- string : 문자열

// 작은따옴표 또는 큰따옴표로 둘러쌈
const str1 = 'Hello';
const str2 = "월드 🌐"; // 비 알파벳 문자 및 이모지 등 표현 가능

 
 

5. 연산자 더 알아보기

 

- 비교연산자

==	자료형에 관계없이 같은(값으로 치환될 수 있는) 값임
!=	==의 반대
===	자료형도 같고 같은 값임
!==	===의 반대
>	오른쪽보다 크다
>=	오른쪽보다 크거나 같다
<	오른쪽보다 작다
<=	오른쪽보다 작거나 같다

- boolean을 변환
 
 

-부수효과를 일으키는 연산자
 

- ~++ : 값을 증가시키지 않은 채 이용
- ++~ : 값을 증가시킨채 이용 

let num3 = 4;
let num4 = 8;
let num5 = num3++ * ++num4;
// num5 = 4(num3)x9(num4+1)
console.log(num3, num4, num5); // 5, 9, 36

 
 

- 할당 상술 연산자

연산자	의미
x += y	x = x + y
x -= y	x = x - y
x *= y	x = x * y
x /= y	x = x / y
x %= y	x = x % y
x **= y	x = x ** y

 

- 삼항 연산자
 

- 조건에 대하여 ?(참일떄의 값) :(거짓일떄의 값)

let num6 = 10234;

console.log('곰돌이는 ' + (num6 % 3 === 0 ? '귀엽다.' : '못생겼다')); 
// 곰돌이는 못생겼다 
// ㅠㅠ

 

 

6. 객체와 배열

 

- 객체 : (키 : 값)의 조합 
 

- 이 둘의 조합을 프로퍼티라고 부름

// 예시
const person1 = {
    name : '김규현',
    age : 21,
    married : false
};

 
 
- 값들에 접근하는 방법

console.log(
	person1.name, // . 뒤에 키 이름으로 접근 가능
	person1['name'] // [] 안에 키 이름을 문자열로 ''이 필요
);

 
 
- 프로퍼티추가 및 수정

person1.job = 'student'; // job : student로 추가됨
person1['bloodtype'] = 'AB'; // bloodtype : AB로 추가됨
person1.age++; // age에 해당하는 21이 21+1로 22됨

 
- 해당 상수가 아닌 그 내부 데이터이므로 const임에도 추가및 변경 가능
 

- 배열 : 키 없이 데이터만 저장

const hello = [false, 4.45, 'hi', person1]; // person1처럼 객체도 들어갈 수 있음

 
- 프로그래밍에서 숫자는 0부터 세기 때문에 요소에 접근할때 [0]부터 시작함
- push를 하여 요소를 추가하거나 pop을 이용하여 제거 혹은 반환후 제거가능함
- 객체와 배열의 중첩사용도 가능함
 

7. if / else 구문

- if 문 예시

if (true) console.log('사실'); // true 라면 사실을 출력하고
if (false) console.log('거짓'); // false 라면 거짓을 출력하라

 
 
- 여러줄 코드

let open = true; // open 에다가 true라는 값을 넣음
// 여러줄 코드
if (open) {
  console.log('안녕하세요.');
  console.log('자리로 안내하겠습니다.');
}

 
- if를 여러번 사용해서 나타내도 되지만 else를 사용하여 나타낼 수도 있음
 
 

8. switch문

- switch문
 

- 특정 변수/상수의 값 또는 반환값에 실행할 때 이용

const dog = 1;

switch (dog) {
    case 1 :
        console.log('말티즈');
        break; // break 가 없다면 dog = 1일떄 나머지 값도 모두 출력됨
    case 2 :
        console.log('푸들');
        break;
    case 3 :
        console.log('진돗개');
        break;
    default : 
      console.log('오류') 

}