[2025 1학기 React.js 스터디] 정채은 #1주차

버억버억킹

 

자바 스크립트란? 

 

자바 = 인터프리터 언어

           동적 자료형

           객체 지향

 

 

콘솔과 주석

 콘솔 : 출력값 입력 창

 세미콜론  문장 뒤에 붙이기(여기선 필수는 ㄴㄴ), 문장 나누기 ? 같은거임 문장 끝났다 라는뜻

   장점 : 쉼표 사용해서 한줄로 나타내기 

   주석: Ctrl + /

 

변수와 상수에 데이터 담기

 var -> X

 

 let : 변수 - 변경 O

 const : 변수 - 변경 X

 

상수는 보통 대문자.

주머니를 만드는 코드, 주머니 안을 채우는 코드 따로 만들수 있다 ! 

 

이미 만든 주머니와 같은 이름 주머니 생성 x

식별자 identifier 명명 규칙

• 특수문자 : $ or _
• 숫자 시작 X
• 공백 X
• 예약어 사용 X

자료형

 

boolean : 참/거짓 

typeof : 데이터의 자료형을 반환

! 연산자 : 뒤의 불리언의 반대값 반환 

 

number :  숫자

정수 실수 똑같은 자료형

 

string : 문자열

 

undefined 와 null

undefined : 주머니에 무엇 들엇는지 명시 X 

                   값 지정 X

null : 비어있음 

        ※ null 의 타입 : 'object' (초기 설계부실)

 

연산자 더 알아보기 

 

비교 연산자 

• boolean 반환
• == : 같은 값(자료형 관계 X)  ↔ (반대) != 
• ==== : 값은 값(자료형도 값 같음)
• > , >= , < , <=

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

 ~ ++ vs ++ ~ 

: 둘 모두 값을 증가시킴

-- : 감소

~ ++ : 값 증가 X

++ ~ : 값 증가 O

 

let num2 = 2;
let num3 = 3;

let num4 = num2-- * --num3;

console.log(num2, num3, num4);

1 2 4

 

할당 산술 연산자 

연산자	의미
x += y	x = x+y

 

 

문자열은 += 만 가능 ! 
연산할 때 const NO !!!!!!!!!!!!!

 

boolean 관련 연산자

$$ : AND - 양쪽이 모두 true : true

|| : OR - 한쪽만 true : true

 

삼항 연산자(엄 말장난 가틈)

(조건)  ?(참일 시 값) : (거짓일 시 )

 

그니까눈 조건이 참이면 참일시 값을 출력 !!!!!!!!!!!!!!!!!!!!

 

let num5 = 103247;

console.log(
  'num5는 3의 배수' +
  (num5 % 3 === 0 ? '입니다.' : '가 아닙니다.')
);

num5는 3의 배수가 아닙니다.

 

객체와 배열

다른건 배열 먼저 배우고 객체 배우는데 자바스크립트에서는 배열이 객체의 한 종류

 

객체

 

객체 : 데이터의 묶음 - 키 : 값 의 조합 (둘의 조합 프로퍼티(property)라고 부름!!)

 

값들에 접근하는 방법 (값을 반환하는 코드들)   <<반환 = 바꿀수 있다는 뜻 ! >>

 

1. .(키) → 해당 키의 값이 나옴

2. ['키'] → 해당 키의 값이 나옴

 

프로퍼티 추가

1. .뒤에 new 키 이름 추가, 값 적기

2. ['new 키'] 

기존 프로퍼티 수정하기 

1.  키 ++ or ++키 
2.  ['키'] = '값'

 

const 인데 내용 수정 할 수 있는 이유

해당 상수 그 자체가 아닌, 그 내부 데이터는 변경 가능 (기본적으로는)

 

배열

다수 데이터 저장

• 키가 number 타입인 객체
• 요소들의 자료형 제한 없음
  
  

요소들에 접근하기 

수는 0부터 셈 !!!!!!

 

요소 추가 및 삭제 

push : 요소 추가

popped : 마지막 요소 반환해서 제거

pop : 제거 

 

 

객체와 배열의 중첩 사용

const person2 = {
  name: '김달순',
  age: 23,
  languages: ['Korean', 'English', 'French'],
  education: {
    school: '한국대',
    major: ['컴퓨터공학', '전자공학'],
    graduated: true,
  }
};

console.log(person2);

 

console.log(person2.languages[2]);

3

 

 

switch 문

 

특정 변수/상수의 값 또는 반환값에  따라 작업을 실행할 때

 

스위치문 : 스위치문을 실행했을 때 거기에 맞는 값이 나올 때까지 일단은 쭉 패스해서 지나감 ! 

const firePower = 3;

switch (firePower) {
	case 1:
		console.log('레어');
		break;
	case 2:
		console.log('미디움');
		break;
	case 3:
		console.log('웰던');
		break;
	default:
		console.log('오류');
}

 

웰던

 

default : 위의 case 중 해당 값 없을 때 

 

우하하 ~~~~~