Javascript 기본 - 1

- 변수와 상수

 

- 변수 : var, let

- 상수 : const

 

	var	let	const
변수명 중복 여부
(재선언 여부)	가능 O	불가 X	불가 X
데이터 수정 여부
(재할당 여부)	가능 O	가능 O	불가 X

 

- ex)

let name
name = "정혜원"
name
// 결과 정혜원

//let 변수 재할당
name= "홍길동"
name
// 결과 홍길동

const myMoney = 0
//const 재할당
myMoney = 100
// 에러남 TypeError

---

- 배열

// 빈 배열
const blanksArr = []                     // 아무것도 안담는 것도 가능

// 숫자들로 이루어진 배열
const numbers = [2, 10, 7, 3.3]       // 숫자 담기

// 문자들로 이루어진 배열
const classmates = ["코드", "캠프"]     // 문자 담기

 

- 배열 특징

1. index : 배열에 있는 각 데이터의 위치

2. length : 배열의 길이 

 

- 배열의 메서드와 속성 (1)

// 배열 만들기
const blanks = []                            // 비어있는 배열
const numbers = [2, 10, 7, 3.3]              // 숫자들로 이루어진 배열
const classmates = ["철수", "영희", "훈이"]     // 문자들로 이루어진 배열

// 배열의 길이 구하기 _ length
classmates.length          // 3

// 배열의 값 꺼내기
classmates[0]              // "철수"
classmates[1]              // "영희"

// 배열의 맨 뒤에 추가하기 _ push
classmates.push("민지")     // ["철수", "영희", "훈이", "민지"]

// 배열의 맨 마지막 삭제하기 _ pop
classmates.pop()          // ["철수", "영희", "훈이"]

// 배열의 요소 정렬하기, 거꾸로 뒤집기 _ sort
classmates.sort()               // ["영희", "철수", "훈이"]

// 배열이 가지고있는 데이터 확인하기 _ includes
classmates.includes("철수")     // true
classmates.includes("영구")     // false

 

- 배열의 메서드와 속성 (2)

const classmates1 = ["철수", "영희", "훈이"]
const classmates2 = ["민지", "민수"]

// 배열 2개 연결하기 _ concat
classmates1.concat(classmates2**)     // ["철수", "영희", "훈이", "민지", "민수"]

// 배열을 문자로 만들기 _ join
classmates.join(', ')     // 철수, 영희, 훈이
classmates.join("와 ")    // 철수와 영희와 훈이

// 배열 분리하기 _ splice
const classmates = ["철수", "영희", "훈이"]
classmates.splice(0, 1)     // ["철수"]

// 배열에서 원하는 요소만 뽑아내기 _ filter
classmates.filter((data) => (data === "영희"))     // ["영희"]
classmates.filter((data) => (data !== "영희"))     // ["철수", "훈이"]

// 배열에서 모든 요소 변경하기 _ map
classmates.map((data) => (data + "어린이"))         // ["철수어린이", "영희어린이", "훈이어린이"]

---

- 문자열

- 문자열도 배열과 같이 메서드를 이용할 수 있고, index를 이용해 요소를 가지고 올 수 있다.

 

- 문자열의 메서드와 속성

// 문자열(배열)
const classmates1 = "철수"
classmates1[0]     // "철"
classmates1[1]     // "수"

// 문자열 쪼개기
const classmates2 = "철수&영희"
classmates2.split("&")     // ["철수", "영희"]

// 문자열 양쪽 공백 제거하기
const classmates3 = " 철수 & Milk "
classmates3.trim()     // "철수 & Milk"

// 문자열 대소문자 변환하기
classmates3.toUpperCase()     // "철수 & MILK"
classmates3.toLowerCase()     // "철수 & milk"

// 문자열에 빈칸 채우기
const chulsooNumber = "1234"
chulsooNumber.padStart(10, "0")     // "0000001234"
chulsooNumber.padEnd(10, "0")       // "1234000000"

---

- 객체

- 객체는 다양한 데이터를 하나의 그룹으로 묶는 것이다.

- 다양한 데이터를 하나로 묶기 위해서, 각각의 데이터를 키와 값으로 연결한다.

 

- 객체의 특징

// 객체 선언하기
const classmate = {
	name: "철수",
	age: 8,
  school: "꽃샘초등학교"
}

// 객체의 값 꺼내기
classmate.name        // 철수
classmate['name']     // 철수

// 객체의 키&값 삭제하기
delete classmate.name
classmate = {
	age:8,
	school: "꽃샘초등학교"
}

 

- 객체와 배열 함께쓰기

// 객체들을 배열에 담아서 선언하기
const classmates = [
    {
        name: "철수",  // 1번째 객체
        age: 8,
        school: "다람쥐초등학교"
    },
    {
        name: "영희",  // 2번째 객체
        age: 8,
        school: "다람쥐초등학교"
    },
    {
        name: "훈이",  // 3번째 객체
        age: 7,
        school: "토끼초등학교"
    }
]

// 위 객체들을 깔끔하게 한줄로 적기
const classmates = [
    { name: "철수", age: 8, school: "다람쥐초등학교" },
    { name: "영희", age: 8, school: "다람쥐초등학교" },
    { name: "훈이", age: 7, school: "토끼초등학교" }
]

// 배열안의 객체에서 뽑아내기
classmates[0].name     // 철수
classmates[0].age      // 8
classmates[0].school   // 다람쥐초등학교

// 배열 안의 객체에서 원하는 객체(8살 이상)만 뽑아내기
classmates.filter((data) => (data.age >= 8))

    // classmates = [
    //    { name: "철수", age: 8, school: "다람쥐초등학교" },
    //    { name: "영희", age: 8, school: "다람쥐초등학교" },
    // ]

---

- 데이터 타입

 

- 데이터 타입 종류

1. 문자열

2. 숫자

3. 불린

4. undefined

5. null

 

- 데이터 타입 확인 

typeof "name"   // "string"을 반환합니다.
typeof "nubmer" // "number"을 반환합니다.
typeof "fool"   // "boolean"을 반환합니다.

 

- 데이터 타입 변경

Number("35") // 문자  35 를 숫자   35  로 변경합니다.
String(24)   // 숫자  24 를 문자  "24" 로 변경합니다.
String(true) // 불린 true를 문자 "true"로 변경합니다.

---

- 연산자

1. 산술 연산자 : +, -, *, /, %

2. 비교 연산자 : 좌우의 두 값을 비교해야 할 때 사용한다. Boolean을 반환한다.

 2.1 ===, !==, <=, >=, >, <

3. 논리연산자

 3.1 &&, ||, !

---

- 조건문

- if문은 특정 조건이 참일때 명령문을 실행하며, 거짓일경우에는 else문을 실행하게 된다.

if( 조건1 ) {
    // 조건1이 참이면 실행
} else if( 조건2 ) {
    // 조건1은 거짓, 조건2는 참이면 실행
} else {
    // 모두 거짓이면 실행
}

---

- 반복문

- 반복문은 반복적인 작업을 해야 할 때 사용하는 문법이다. 가장 일반적인 반복문에는 for문이 있다.

for( 초기식 ; 조건식 ; 증감식 ){
    // 반복해서 실행할 코드
}

---

- 수학객체

- 최댓값, 최솟값

// 최대값, 최소값
Math.max(4, 29, 1, 12)     // 29
Math.min(4, 29, 1, 12)     // 1

 

- 반올림, 올림, 버림

Math.round(2.712)          // 3
Math.ceil(4.1)             // 5
Math.floor(12.8)           // 12

 

- 랜덤

Math.random()              // 0.822...(0 ~ 1 까지의 임의의 수)

 

- 루트

Math.sqrt(2)               // 1.414...