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

오늘부터 스터디 시작~~해보자...

---

자바스크립트의 용도

• html과 css가 웹페이지에 요소들을 가져다 놓고 꾸며준다(마크업 언어)
• 자바스크립트는 프로그래밍언어
• 자바스크립트가 사용자에 반응하고 결과값을 화면에 보여준다

자바스크립트의 특징

• 인터프리터 언어
• 동적 자료형을 갖는다
• 함수형 프로그램에 용이하다.

콘솔

console.log("안녕?")

• 다른 언어에서의 print
• 실제 웹사이트에서는 보이지 않고 개발자 보라고 console창에 출력

주석

console.log("안녕안녕?")
// 여기엔 뭘 써도 오케이~

• 맥 단축키 command + / 하면 주석문 입력이 된다

변수&상수

var

var a = 10;

• 요즘 사용 x
• let과const를 사용

let

let a = "상래";
a = 2;
console.log(a); // 2가 출력,자료형이달라도 ok

let a = 3; // 같은 변수 다시 선언 불가능

• 자바 스크립트에서는 다른 언어랑 다르게 다른 자료형으로 변환이 자유로움
• 브라우저 콘솔에서 따로따로 실행할땐 가능하다고 하네요

const

const a = 22;
const b; // xxxx

• 상수는 한 번 선언하면 변경이 불가능해서 선언할 때 값을 지정해야함

변수 명명 규칙

• 숫자로 시작 x
• 공백 x
• 예약어 x
• 특수문자는 $ or _만 가능

---

자료형

1. 숫자
2. 문자열
3. 참/거짓
4. undefined/null

1. number - 숫자

let num1 = 1; // 정수
let num2 = 1.1; // 실수

console.log(typeof num1); //number 출력
//typeof: 뒤에오는 값의 자료형을 반환

• 정수/실수 구분 x

//다른 언어처럼 사칙연산,나머지 연산 가능
console.log(num1 + num2); 
console.log(num1 - num2);
console.log(num1 * num2);
console.log(num1 / num2);
console.log(num1 % num2);

2. string - 문자열

const str1 = "이상래";
let str2 = "공부중🤯"; // 이모지도 가능

str1 = str1 + "2"; // 상수로 선언 했기 때문에 불가능
** '+'연산자는 문자열을 이어 붙여주는 역할을 함

let str3 = "으"
let str4 = str3 + "으악";
console.log(str4); // 으으악 출력

console.log(typeof str3); // string 출력

3. boolean - 참/거짓

let a = true;
let b = false;

console.log(a,b); // true,false

console.log(typeof a); // boolean 출력

const c = 2 < 3; // true
const d = 3 > 4; // false

식이 true인지 false인지도 변수에 저장해 놓을 수 있다.

let n1 = !true; // false
let n2 = !n1; //true
let n3 = !!n2; //true

!는 반대값을 반환한다.
-몇개까지 가능하냐? 원하는대로 가능 ㅋㅋ

4.undefined/null

let a;
console.log(a,typeof a); // undefined,'undefined'

• underfined: 변수를 선언했으나 아직 값이 정해지지 않았을때

x = 1;
console.log(x);

x = null;
console.log(x,typeof x); // null,'object'

• null: 의도적으로 값이 없음을 명시적으로 설정 할 때
• undefined == null은 true (비교 연산자에서는 같음)
• undefined === null은 false (엄격한 비교 연산자에서는 다름)

let a;  // 값이 할당되지 않은 변수
console.log(a);  // undefined

let b = null;  // 의도적으로 값이 없음
console.log(b);  // null

비교 연산자

-boolean을 반환
-==: 자료형에 관계없이 같은 값
-===: 자료형&값 모두 같음
-!==: 반대

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

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

let a = 1;  
let b = 2;

console.log(a > b, a >= b); // false false

let str = "dl";  
let str2 = "tkdfo";

console.log(str>str2) // 문자열은 사전순으로 뒤에오는게 크다

부수효과 연산자

let num = 1;

console.log(num++); // 1  
console.log(num); // 2

console.log(++num); // 2  
console.log(num); // 3

연산자	의미
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 str = "이";
str += "상래";

consol.log(str); // 문자열은 +=만 가능

AND & OR

• &&: AND 둘다 true여야 true
• ||: OR 둘중 하나만 true여도 true

// 조건) ? (참일 시 값) : (거짓일 시 값)
let bool1 = true;
let result = bool1 ? '참' : '거짓';

객체

• 데이터의 묶음 키 : 값(키-값의 조합: property)

const person = {
    name: '이상래',
    age: 23
  }; 

  console.log(typeof person); // Object
  console.log(person); // {name: '이상래', age: 23}

값에 접근/property 추가

console.log(person.name, // .뒤에 키 
person['name']); // [] 안에 키   '이상래','이상래'

person.bloodtype = 'A';
person['bloodtype'] = 'A';

배열

• 다수의 데이터 저장
• 객체
• 인덱스로 접근 가능
• 자료형 제한 x
• length: 배열의 요소 개수 반환

// 요소 추가&삭제
myArray.push(1); // 추가

myArray.pop() // 마지막 요소 제거 , 변수에 마지막 요소를 넣어놓을수 있음

• 객체와 배열은 중첩 사용이 가능

if문/switch문

if (true) console.log('s');

if (true) {
    console.log('w')
}     else {
    console.log('2');
}

// break가 없으면 다음거 실행
const a = 1;

switch (a) {
    case 1:
        console.log(1);
    case 2:
        console.log(2);
        break;
}       

끝!!!!!!!