본문 바로가기

JavaScript

JavaScript의 기본적인 이용법_수업 정리

1. JavaScript(이후부터는 JS로 쓰겠음)에서 콘솔창에 출력하는 명령어는 다음과 같다.

console.log('Tiger')

 

2. JS 는 Java와 달리 ;을 붙이지 않아도 되며, 변수는 var, let, const 등으로 선언하면 컴파일러가 알아서 타입을 지정해준다.

console.log(typeof (a)) //number
let b = '호랑이'
console.log(typeof (b)) //string
let c = true
console.log(typeof (c)) //boolean
let d = []
console.log(typeof (d)) //object (배열처럼 쓰는 문법이나, 하나의 객체임)
let e = {}
console.log(typeof (e)) //object (객체, 중요!!)
let f = function () { }
console.log(typeof (f)) //function
let g = undefined
console.log(typeof (g)) //undefined(담을 수 없는 형태의 데이터, 결과값 수정 필요)

 

3. 객체는 다음과 같이 만든다.

let obj = {
    a: 10,
    b: 'tiger',
    c: true,
    d: [],
    e: {},
    f: function () { },
    g: undefined
}

 

4. 서버와 클라이언트 간 데이터를 송/수신시 주로 쓰는 형식인 json 데이터 형식은 다음과 같이 객체 속의 객체로 쓰는 경우가 많다.

let a = {
    b: {
        c: {
            d: 10
        }
    }
}
console.log(a.b.c.d) //10

 

5. JS는 동적 타입 변경을 지원한다 즉, 변수값를 재선언하면 곧바로 타입이 바뀐다. 하지만 타입을 두 번 정의하면 컴파일 에러가 난다.

let a = 10
console.log(typeof (a))
a = '호랑이'
console.log(typeof (a)) //바로바로 타입이 바뀜 - 동적 타입 변경
let a = 20
// console.log(a) //타입이 두 번 정의도면 Type Error

 

6. if문 등 조건문, 반복문 등에서 var는 변수를 재선언하면 해당 변수의 값이 변경되는데 반해, let는 재선언 후 if문을 빠져나오면 원래의 값으로 되돌아간다.

var a = 10
if (true) {
    var a = 20
    console.log(a)//20
}
console.log(a)//20
console.log('=========================')

let b = 10
if (true) {
    //if문 안에서만 사용되도록 let 사용됨
    let b = 20
    console.log(b)//20
}
console.log(b)//10

 

7. 문자열 연결 시에는 +=을 쓸 수도 있다.

let s = '호랑이'
console.log(s) //호랑이
s += ' 코끼리'
console.log(s) //호랑이코끼리

 

8. 이중 for문의 단순한 형태는 다음과 같다.

let str = ''
for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 4; j++) {
        str += '* '
    }
    str += '\n'
}
console.log(str)

/* 출력은 다음과 같음
* * * *
* * * *
* * * *
*/

 

9. 숫자 연산과 문자열을 연결하는 예시. '1000원' 같이 문자열과 숫자가 같이 있을 때엔, parseInt 함수를 통해 숫자만 골라 숫자로 변환할 수 있다.

let a = 10
let b = '20'
console.log(a + 10)
console.log(b + 10)
let c = String(a) // 숫자를 문자열로 변환해줌
console.log('c Type: ' + typeof (c)) //c Type: string
let d = Number(b)
console.log('d Type: ' + typeof (d)) //d Type: number

let e = +'30'
console.log('e Type: ' + typeof (e)) //e Type: number

let f = '1234'
let g = +f //문자열을 숫자로 변환시켜줌
console.log('g Type: ' + typeof (g)) //g Type: number

let n1 = '1000원'
let n2 = '2000원'
//숫자 변환시켜주는 방법 두 가지(문자가 있으면 변환이 안 됨, 일반적 방식은 이것 사용)
console.log(Number(n1) + 10) //NaN 
// 조금 더 확장적인 방식(숫자만 알아서 찾아 변환해줌)
console.log(parseInt(n2) + 10) //2020원

10. 거듭제곱은 일반적으로 Math.pow를 쓰지만, js에서는 **을 통해 간편하게 쓰는 방법이 있다.

// 일반적인 거듭제곱 용법
console.log(Math.pow(2, 3)) //2의 3제곱 = 8

console.log(2 ** 3) //2의 3제곱 = 8
console.log(2 ** 3 ** 2) //2의 3제곱의 제곱 = 2의 9제곱 = 512
console.log((2 ** 3) ** 2)//2의 3제곱 결과의 제곱 = 8의 제곱 = 64

11. 시스템 시간을 표시하는 방식은 다음과 같다.

let n = new Date()
console.log(n.getFullYear() + '년 ' + (n.getMonth() + 1) + '월 ' + n.getDay() + '일 ')
console.log(n.getHours() + '시 ' + n.getMinutes() + '분 ' + n.getSeconds() + '초')

12. 1초에 for문이 몇 회나 돌아가는지 콘솔창에 출력해, 다른 컴퓨터에 비해 숫자가 현저히 떨어지면 시스템 저하를 의심해볼 수 있다.

let start = new Date().getTime()
console.log(start)
for (var i = 0; new Date() < start + 1000; i++) {
}
console.log(i) 

13. ==은 값이 같은지 확인한다. ===은 타입이 같은지 확인한다. 즉, 같은 123이어도 각각 숫자와 문자열이면, 아래와 같이 false가 출력된다.

let a = 123
let b = '123'
console.log(a == b) //true, 타입이 어떻든 값이 같은지 물어보는 것
console.log(a === b) //false, 타입이 같은지 확인하는 것