자바스크립트 데이터타입 & 변수 정리

자바스크립트에 대해 공부한 내용을 정리

추후 필요 시 참고 목적으로 작성함

동적 타입(Dynamic Type)

var aa;

undefined

typeof(aa)

"undefined"

aa = "hello"

"hello"

typeof(aa)

"string"

aa = 100

100

typeof(aa)

"number"

aa = null

null

typeof(aa)

"object"

** null과 undefined는 다르다

참조타입 : 객체!

es6 에 클래스 개념이 있는데 정확히는 함수를 클래스처럼 사용한다고 생각하면 쉽다.

js의 객체는 클래스 기반의 객체가 아니다. 

속성: 키와 값의 쌍 하나를 말함

class Person {}

undefined

typeof(Person)

"function"

객체 리터럴 : 표기법, 표현식

var a = {}

var a = {}

undefined

a.name = "홍길동"

"홍길동"

a.age = 20;

20

a

{name: "홍길동", age: 20}

a.test = function () {

    console.log(this.name + "의 이름 : " + this.name);

}

ƒ () {

    console.log(this.name + "의 이름 : " + this.name);

}

a.test()

VM612:2 홍길동의 이름 : 홍길동

undefined

자바스크립트 배열

--> 다른 언어의 컬렉션과 유사

var arr = [1,2,3]

undefined

arr[0]

1

arr[3]

undefined

arr[4] = 100

100

arr.length

5

arr[10] = 7

7

arr.length

11

arr[6]

undefined

arr

(11) [1, 2, 3, empty, 100, empty × 5, 7]0: 11: 22: 34: 10010: 7length: 11__proto__: Array(0)

arr.push("hello")

12

arr

(12) [1, 2, 3, empty, 100, empty × 5, 7, "hello"]0: 11: 22: 34: 10010: 711: "hello"length: 12__proto__: Array(0)

arr.splice(3,2)

(2) [empty, 100]

arr

(10) [1, 2, 3, empty × 5, 7, "hello"]

arr.splice(3,2);

(2) [empty × 2]

arr

(8) [1, 2, 3, empty × 3, 7, "hello"]

arr.splice(2,0,"hi")

[]

arr

(9) [1, 2, "hi", 3, empty × 3, 7, "hello"]

ㅁ var 

실행 컨텍스트 : 스택 구조로 되어 있다

글로벌 객체 개념

alert("hi")

undefined

alert

ƒ alert() { [native code] }

window.alert

ƒ alert() { [native code] }

글로벌 객체 선언

b = "global"

"global"

window.b

"global"

** chrome 개발자 도구 console 에 window 만 쳐보면 엄청나게 많은

전역 객체들을 볼 수 있다. 기본적으로 실행되는 건 실행 컨텍스트 ex) alert가 바로 실행되는 이유이기도 함

** 호이스팅(Hoisting): 변수나 함수를 미리 만들어 두는 작업

아래 소스가 에러 안나고 undefined 가 나옴

console.log(A1);

var A1 = "Hello";

구조: 실행 시 var만 찾아서 변수를 선언만 해둠 (값음 X)

호이스팅 단계에서 var는 undefined 

그래서 콘솔을 찍을 때 var는 선언되어 있는 상태

 

ㅁ 중복된 var 도 에러나지 않음

호이스팅 단계에서 한 번만 만들고 그다음 부터는 skip!

so, 변수명 설정 시 개발자가 주의해야 한다.

산술연산자

암시적 형변환 

ex)

1 + 2

3

"1" + 2

"12"

1 + "2"

"12"

극단적 암시적 형변환

** 문자열로 곱셈을 해도 숫자로 변환해서 계산한다

2 * 3

6

"2" * "3"

6

숫자로 변경하는 함수

parseInt( ), parsefloat( ), Number( )

ex)

parseInt("123abc1")

123 // 숫자로 되어 있는 부분까지만 나온다

Number("123abc")

NaN // Not a Number : 수치 연산 실패!

parseInt("")

NaN

Number("")

0

Java에서 int는 기본형, but 객체가 아님. 객체형태는 Integer

Integer는 wrapper 라고도 함

형변환 관련 예제

** a == NaN은 각각의 객체가 되면서(암시적 형변환) false / 형변환 시점은 비교연산자를 만나면!

so, inNaN( ) 함수를 사용해야 함

var a = parseInt("abc")

undefined

a

NaN

a == NaN

false

typeof(a)

"number"

isNaN(a);

true

비교연산자

"" == 0

true

Number("")

0

예제2) 비교연산자 기준으로 암시적 형변환 일어남

Boolean(false)

false

Boolean("")

false

"" == false

true

** so, === 또는 !== 의 비교연산자 사용함 (데이터 타입을 먼저 비교를 한다)

"==="를 권장한다!! 최대한 잘 사용하도록 하자