[2025 1학기 React.js 스터디] 이가인 #1주차

1. 자바스크립트란

2. 변수와 상수 선언

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

4. 객체와 배열

5. if/else 문 

6. switch 문 

 

---

자바스크랩트란 ...

HTML과 CSS는 웹의 구조와 스타일을 담당하지만, 자바스크립트는 웹 페이지에 상호작용을 추가

-> 브라우저에서 실행돼서 사용자 경험을 더욱 풍부하게 만들어 

 

크롬에서 js의 코어 엔진을 브라우저 밖으로 추출해서 node.js를 만듦

** node.js란?

- 서버 측에서 JavaScript를 실행할 수 있도록 해주는 런타임 환경

-->  JavaScript를 웹 브라우저뿐만 아니라 서버에서도 사용할 수 있음

 

머신러닝, 백, 프론트엔드 모두 사용가능 

 

자바스크랩트 특징 

- 인터프리티 언어 (컴파일과정 거치지 않음), 버그 걸러지지않음

- 동적 자료형 -> 자료형, 함수로 바꿀 수 있음

- 객제치향 언어, 근데 다른거랑 다름 

- 일급 객체임!!

- 계속 새로운 버전이 나옴. 최신버전으로 마음껏 실전에 활용할 수 있음 

 

---

- ctrl + l : 콘솔 클리어 

- 브라우저 콘솔이 객체 종류와 내용들이 한꺼번에 나와서 바로 결과 보고 연습하려할 때 편함 

---

변수와 상수 선언

var은 사용하지 않음 

let,const만을 사용

 

- let : 변수 - 넣은 데이터를 바꿀 수 있음

- const : 상수 - 넣은 데이터를 바꿀 수 없음

const A = 1; // 상수는 보통 대문자로 명명
console.log(A);



const B; // 선언만 하는건 안됨!!!!!!!!

 

상수는 선언만 할 수 없음

 

식별자 identifier 명명 규칙

• 영문, 한글 및 유니코드*(대부분의 문자 표현)* 글자, 숫자 사용 가능
• 특수문자는 $ 또는 _
• 숫자로 시작할 수 없음
• 공백*(스페이스)* 사용 불가
• 예약어 사용 불가 

---

기본 자료형들과 연산자

boolean (비교) 

 

typeof 연산자 : 해당 데이터의 자료형을 반환

let bool5 = !true;
let bool6 = !bool5;
let bool7 = !!bool6;

console.log(bool5, bool6, bool7);
// false true true

 

• == : 자료형에 관계없이 같은*(값으로 치환될 수 있는)* 값임
  • 반대 : !=
• === : 자료형도 값도 같음
  • 반대 : !==

const a = 1;
const b = 1;
const c = '1';
const d = 2;

console.log(a == b, a != b);
console.log(a == c, a != c);
console.log(a == d, a != d);
//true false
//true false
//false true

console.log(a === c, a !== c);
//false true

// ⭐️ 문자열의 경우 사전순서상 뒤로 오는 쪽이 더 크다고 인식
console.log(str1 > str2, str1 < str2);
//false true

 

AND & OR

• && : AND - 양쪽이 모두 true 일 때만 true 반환
• || : OR - 한쪽만 true 면 true 반환

let z = 14;
// z = 6;
// z = 25;

console.log(
  (z > 10 && z <= 20) || z % 3 === 0
);
// true

 

number : 숫자

정수/실수, 용량 구분 없음

 

string : 문자열

더하기 연산자 : 이어붙여진 값을 반환

 

undefined 와 null

• undefined : 주머니에 무엇이 들었는지 명시되지 않음
  • 아직 값이 지정되지 않음 / 데이터가 나올 곳이 아닌 자리
  • “여길 왜 열어봐?”
• null : 주머니가 비어 있다고 지정됨
  • ‘비어 있다’는 정보를 적극 제공 (예: 만들어져야 할 정보의 생성이 실패함)
  • “여긴 비어있어.”

x = 1;
console.log(x);

x = null;
console.log(x, typeof x); // ⚠️ null의 타입은 'object'로 반환 - 초기 설계부실 

//1
//null 'object'

 

~ ++ vs ++ ~

• 둘 모두 값을 증가시킴
  • -- : 감소
• ~ ++ : 값을 증가시키지 않은 채 사용
• ++ ~ : 값을 증가시킨 채 사용

let num1 = 1;

console.log(num1++);
console.log(num1);
console.log(++num1);
console.log(num1);
//1
//2
//3
//3

 

 

삼항연산자

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

let num5 = 103247;

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

---

객체와 배열

• 데이터의 묶음 -(키 : 값의 조합)
  • 둘의 조합 프로퍼티 property 라 부름
• 이제껏 배운 자료형*(원시 자료형)*이외의 모든 데이터는 객체

Property 

- person : 객체

- name,age,married : 키

- '김철수', 25, false :  값

const person1 = {
  name: '김철수',
  age: 25,
  married: false
};

 

Array 배열 

• 다수의 데이터를 저장
• 근본적으로 객체

• 키가 number 타입인 객체
• 요소들의 자료형 제한 없음
• length 프로퍼티 : 배열의 요소 개수를 반환

 

const myArray = [true, 3.14, 'Hello', person1];

console.log(myArray, myArray.length);

//요소 접근

console.log(
	myArray[0]
);

 

요소 추가 = push( 추가할내용)

요소 반환하며 제거 = pop ()

const myArray = [true, 3.14, 'Hello', person1];

const popped1 = myArray.pop(); // 마지막 요소를 반환하며 제거

console.log(popped1, myArray);



myArray.pop(); // 그냥 제거만 하는 용도로

console.log(myArray);
//

---

조건문 (if, else문)

if문 

if (true) console.log('사실');
if (false) console.log('거짓');

// 사실



//false는 실행 안됨 false라

( ) 괄호 안에 boolean값이 들어감 , 반환하는 값이 들어갈수도 잇고 ㅇㅇ

 

else는 false일 때 실행됨 

 

 - 중첩해서 사용

 

******* 자바스크립트의 경우 숫자에서 0 == false로 해석됨*************

0이 아닌건 true로 해석됨!!

0이 나올시 -> else에 출력내용을 쳐야함 

const x = 10; // 11, 12로 시도해볼 것

if (x % 4) {
  if (x % 2) {
    console.log('홀수입니다.');
  } else {
    console.log('짝수입니다.');
  }
} else {
  console.log('4의 배수입니다.');
}

// 짝수입니다

 

if ... else if 문

이것도 아니라면 이거

그거 아니라면 이거

그것도 아니라면 이거

그것도 아니라면 이거 

이런neuggimㅇㅇ

 

 

---

switch문 

if문과 다르게 뭔가 더 옵션을 추가해서 반복을 조건문을 실행하고 싶을 때 

( ) 괄호 안에 true false가 아닌 다른 데이터 들어올 수 있음 

case중 어느것에도 속하지 않을 때 default를 씀 

 

break가 없으면 ㄹㅇ break없는 8ton트럭 마냥 밑에잇는것(순서대로)도 계속 실행이 됨 

꼭 break필요!!

 

const firePower = 2;

switch (firePower) {
	case 1:
		console.log('레어');

	case 2:
		console.log('미디움');
		
	case 3:
		console.log('웰던');
		
	default:
		console.log('오류');
}
//미디움
//웰던
//오류

 

const dayOfWeek = '토';

switch (dayOfWeek) {
	case '월':
	case '화':
	case '수':
	case '목':
		console.log('6시 퇴근');
		break;
	case '금':
		console.log('12시 퇴근');
		break;
	case '토':
	case '일':
		console.log('휴무');
		break;
	default:
		console.log('잘못된 요일입니다.');
}
//휴무

 

 

끗