[JavaScript] 한 페이지에 싹 정리

난 자바스크립트가 좋더라..

기본

콘솔창 출력

console.log("Hello");    // 주석처리는 슬래쉬로 함  
console.log(12);         // 출력할때 'console.log()'사용함!!!  

여기서 별개로 console.log의 경우 콘촐창에 출력하는 건데,
문서등에 직접 입력을 할 때는
document.write 를 사용한다.

document.write("Hello");   // Hello  
document.write(12);        // 12

변수 : 값에 붙이는 이름표

// let 변수명 = 값
let espressoPrice = 3000;     // 변수 선언은 'let 변수' 이런시스템!!  
let lattePrice = 4300;
// const 상수명 = 값
const PI = 3.14;

함수 : 특정 코드를 모아 이름을 붙인 것임

• 파라미터 : 함수에 넘겨주는 값
• return문 : 함수의 반환값, 함수 종료시킴

  // 함수 정의
  function welcome(name){
    console.log('안녕하세요' + name + '님아!');
  }
  // 함수 호출
  welcome('근대요'); // 출력값 : 안녕하세요 근대요 님아!
  

자료형(Data Type)

숫자형

• 정수(Integer) : -1, -2, 0, 1, 2 - 소수(Floating Point) : 3.14, -7.3, 2.0
• 숫자형 연상

연산 종류	예제
덧셈	7 + 4
뺄셈	7 - 4
곱셈	7 * 4
나눗셈	7 / 4
몫	7 // 4
나머지	7 % 4
거듭제곱	7 ** 4

• 연산의 우선 순위 : 기본적인 사칙 연산 규칙을 따름

문자형(String)

• 기본 형태 “피카츄” ‘피카츄’ “Hi "I’m Pikachu"” <– 문자열 알에 따옴표 포함하고 싶을 때

• 문자열 연결 ‘피카츄’ + ‘돈까스’ –> ‘피카츄돈까스’

  let count = 2;
  let text = '초코 우유' + count '잔';  // 출력값 : '초코 우유 2잔'
  

• 템플릿 문자열

  let count = 3;
  let text = '초코 우유 ${count} 잔' ; // 출력값 : '초코 우유 3잔'
  

  난 이 방법이 더 편함..

불린형(Boolean)

• true, false

• 논리 연산자

A && B (A,B 둘 다 true여야 true)
A || B (A,B 둘 중에 하나만 true 여도 true)
!A (반대의 불린값)

• 비교 연산자 <,>,<=,>=,===,!==

형 변환

• 숫자형

  Number('10') + Number('5')            // --> 15  
  Number('abc')                         // --> NaN  
  

• 문자열

  String(10) + String(5)                // --> '105'  
  

• 불린형

  Boolean(123)                          // --> true  
  Boolean(-123)                         // --> true  
  Boolean(0), Boolean(''), Boolean(NaN) // --> false
  

• typeof 연산자

  let name = '꼬부기';
  console.log(typeof name);  // 출력값 : string
  

• null과 undefined
  • null : 의도적으로 값이 없다는 표현할 때 사용하는 값
  • undefined : 값이 없다는 것을 확인하는 값

    let count;
    console.log(count);  // undefined 출력
    count = 7;
    console.log(count);  // 7 출력
    count = null;        // 의도적으로 값을 없애기
    console.log(count);  // null 출력
    

제어문

if 조건문

• 조건 부분이 true이면 동작 부분 실행 if(조건 부분){ 동작

//예시
let temperature = 17;
if(temperature >= 30){
    console.log('덥노');
} else if(temperature <= 0){
    console.log('춥노');
} else {
    console.log('날씨 쥑이네');
}

switch문

• 비교할 값이 해당하는 조건의 동작 부분을 실행

  let grade = 'B';
  switch (비교할 값){                       // switch (비교할 값){  
    case 'A':                            //     case 조건값1:  
        console.log('참 잘했어요');       //     break;  
        break;
    case 'B':
        console.log('잘 했어요');
        break;
    default:
        console.log('못했어요');
        break;
  }
  

for 반복문

• 조건 부분이 true인 경우 동작 부분을 반복해서 실행

  for(let i = 0; i < 10 ; i++){       // for(초기화부분; 조건부분; 추가동작부분;){  
    console.log(i);                 //      동작부분  
  }                                   // 출력값 : 0~9까지 출력
  

while 반복문

• 조건 부분이 true인 경우 동작 부분을 반복해서 실행

  let i = 10;
  while(i>0){             //  while(조건부분)
    console.log(i);     //        동작부분  
    i--;
  }                       // 출력값 : 10~1까지 출력하는데 i가 1씩 줌
  

break 와 continue

• break: 반복문 종료

  let i = 23;
  while (i <= 100){
    if(i % 7 === 0){
        break;           // i가 7의 배수이면 반복문 종료  
    }
    i++;                 // i를 1씩 증가 시킴  
    console.log(i);      // 10~1까지 출력  
    i--;                 // i를 1씩 감소  
  }
  

• continue: 다음 조건 부분으로 넘어감

  for (i=0;i<20;i++){
    if(i%2==0){
        continue;       // i가 2의 배수이면 다음 조건 부분으로 넘김  
    }
    console.log(i);     // 1,3,5,..19까지 출력  
  }
  

객체와 배열

객체

• 값이름(key)과 값(value) 한 쌍의 형태

  {
    키_1 : 값_1,
    키_2 : 값_2,
    키_3 : 값_3,
  }
  let game = {name: '포켓몬 피카츄',releaseDate: 2025};     // 변수에 객체 저장함
  game['name']                                            // 키를 통해 값 받아옴 --> '포켓몬'
  game.releaseDate                                        // 키를 통해 값 받음   --> 2025
  game['nintendo'] = true                                 // 새로운 쌍 추가함    --> {name: '포켓몬',releaseDate: 2025, nintendo: true}
  game.price = 64800;                                     // 새로운 쌍 추가      --> {name: '포켓몬',releaseDate: 2025, nintendo: true, price:64800}
  delete game.releaseDate;                                // 쌍 삭제하기
  console.log('xbox' in game);                            // 키가 존재 하는지 확인 --> 없으니 false
  

for..in 반복문

• 객체의 모든 키에 대해 for 반복문 실행

  let game = { name: '디지몬',releaseDate: 2025,xbox : true};
  for (let key in game){
    console.log(key);          // name, releaseDate, xbox 출력
    console.log(game[key]);    // '디지몬', 2025, true 출력
  }
  

배열

let Digimon = ['아구몬', '파피몬', '파닥몬', '가트몬'];        // 변수에 배열 저장함
//     인덱스      0        1        2        3
Digimon[1]                                                 // 인덱스를 통해 요소 받아옴 '파피몬'
Digimon.length                                             // 요소 갯수 길이 '4'
Digimon.splice(1,2,'데빌몬');                               // splice로 삽입과 동시에 삭제함
// 1번 인덱스에 '데빌몬' 추가, 기존에 있던 요소는 2개 ('파피몬','파닥몬') 삭제
//  ['아구몬','데빌몬','가트몬']
Digimon.shift();                                           // 첫 요소 삭제함
//  ['데빌몬','가트몬']
Digimon.pop();                                             // 마지막 요소 삭제
//  ['데빌몬']
Digimon.unshift('엔젤몬');                                  // 첫 요소 추가함
//  ['엔젤몬','데빌몬']
Digimon.push('세라피몬');                                   // 마지막 요소 추가하는것
//  ['엔젤몬','데빌몬','세라피몬']

for..of 반복문

• length 를 활용한 for 반복문

  let number = ['1','2','3','4'];
  for(let i=0; i<number.length; i++){
    console.log(number[i]);          // '1','2','3','4' 출력함
  }
  

• for..of를 활용한 for 반복문

  let number = ['1','2','3','4'];
  for(let numbers of number){
    console.log(numbers);            // '1','2','3','4' 출력
  }  
  

문자열 활용

문자열 활용

let text = '확인용 단어용';
// 요소 탐색
text.indexOf('용')        // 2 --> 앞에서 부터 제일 처음 등장하는 위치
text.lastIndexOf('용')    // 7 --> 앞에서 부터 제일 마지막에 등장하는 위치
text.[2]                 // 용
text.charAt(2)           // 인덱스2 에해당하는 문자 반환 '용'
text.length              // 문자열 길이 '7'

내장 객체

날짜 객체 Date

• 객체 만들기

  let date = new Date('2025-01-01T19:11:16');  
  let date = new Date(2025,0,1,19,11,16);           // month는 0부터 시작!
  

• getTime() : 1960년 1월 1일 00:00:00 UTP부터 몇 밀리초 지났는지

  date.getTime()                     // 1735726276000
  date.getFullYear()                 // 2017
  date.getMonth()                    // 0 --> month는 0부터 시작함!!
  date.getDate()                     // 1
  date.getDay()                      // 3 --> 0은 일료일, 1은 월요일임!! ok?
  date.getHours()                    // 19
  date.getMinutes()                  // 11
  date.getSeconds()                  // 16
  date.getMilliseconds()             // 0
  

• 수학 객체 Math

  Math.abs(-10)          // 10 --> 절대값
  Math.abd(10)           // 10 --> 절대값
  Math.max(2,-1,4,5,0)   // 5  --> 최대값
  Math.min(2,-1,4,5,0)   // -1 --> 최소값
  Math.pow(2,3)          // 거듭제곱 2**3 과 동일
  Math.sqrt(49)          // 7  --> 제곱근
  Math.round(2.4)        // 2  --> 반올림
  Math.round(2.5)        // 3  --> 반올림
  Math.floor(2.4)        // 2  --> 소수점 버림
  Math.floor(2.5)        // 2  --> 버림
  Math.ceil(2.4)         // 3  --> 반올림
  

  후…

화살표 함수, 함수 표현식

• 일반 함수와 화살표 함수 문법 비교 ```javascript // 일반적인 함수 선언 function add(a, b){ return a + b; }

// 을 함수 표현식으로 해석 const add = function(a, b){ return a + b; };

// 을 화살표 함수로 const add = (a, b) => a + b;

*화살표 함수는 this가 상위 스코프에 고정되는 특징!!*  
**코드가 간단하고 짧을땐 좋지만, 그 외는 다 단점**
  
 
### 구조 분해 할당과 스프레드 연산자  
- **객체 및 배열 구조 분해 예**
```javascript
// 객체 구조 분해
const testUser = { id: 'user1', name: '홍길동', role: 'admin'};
const {id, name, role} = testUser;
console.log(name); // 홍길동

// 배열 구조 분해
const test Results = [92,85,78];
const [high, medium, low] = testResults;
console.log(high); // 92

// 중첩 구조 분해
const response = {
  data: { user: { id: 1, profile: { firstName: '길동' }}}
};
const {data: {user: {profile: {firstName }}}} = reponse;
console.log(fristName); // 길동

• 스프레드 연산자 ```javascript // 배열 복사 및 병합 const baseConfig = [‘chrome’,’firefox’]; const fullConfig = […baseConfig, ‘safari’,’edge’];

// 객체 복사 및 병합 const defaultUser = { role: ‘user’, active: true}; const admin - {…defaultUser, role: ‘admin’,permissions: [‘all’]};

// 함수 호출 시 사용 const numbers = [1,5,3,9]; const max = Math.max(…numbers); // 9 ``` … 점 세개 중요!