JavaScript) 변수와 데이터 타입 / 객체와 배열 정리

1. 변수(Variable) 선언

: JavaScript에서는 변수를 선언할 때 var, let, const를 사용

: 그러나 ES6 이후에는 let과 const를 주로 사용

var number = 1;
var name = "홍길동";
let height = 182.2;
let clear = true;

: JavaScript는 데이터 타입을 명시하지 않고도 변수를 선언할 수 있음

: var를 사용하면 변수 재선언이 가능하지만, ES6에서는 let과 const를 권장

JavaScript) 변수 정리 : var, let, const

---

2. 동적 타입(변수의 유연한 변경)

: JavaScript는 동적 타입 언어이다.

: 즉, 변수에 저장된 데이터 타입을 변경할 수 있다.

var number = 1;
number = "성춘향";  // 숫자 → 문자열로 변경
console.log(number);  // 출력: "성춘향"

: 다른 언어(Java, C 등)에서는 변수의 타입이 고정되지만,

: JavaScript에서는 자유롭게 변경 가능하므로 주의해야 한다.

---

3. 문자열과 숫자의 연산

: JavaScript에서 숫자와 문자열을 더하면 문자열이 된다.

let num = "5" + 3 + 1;
console.log(num);  // "531" (문자열)

num = 3 + 1 + "5";
console.log(num);  // "45" (문자열)

: 문자열이 포함되면 전체가 문자열로 변환

: 연산 순서에 따라 결과가 달라질 수 있으므로 주의

---

4. 배열(Array) 사용

: JavaScript에서 배열은 객체(Object)의 한 종류

let array = new Array(3);
array[0] = "benz";
array[1] = "volvo";
array[2] = "saab";

let numArr = ["benz", "saab", "volvo"];

: 두 방법으로 배열 선언 가능

 

배열을 순회하는 방법:

// for문 사용
for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}

// forEach (콜백 함수)
array.map(function(car) {
    console.log(car);
});

// for...in 문 (인덱스 순회)
for (let i in array) {
    console.log(array[i]);
}

: map()은 콜백 함수를 통해 배열을 순회하는 방식(자주 사용하는 방식)

: for...in 문은 배열의 인덱스(index)를 반환하므로 array[i]로 값에 접근

---

5. 배열과 객체 비교

: 배열(Array)은 값들의 리스트

: 객체(Object)는 key-value(속성: 값) 구조로 데이터를 저장

 

2차원 배열(배열 속 배열):

let numberArr2 = [
    ["AAA", "BBB", "CCC"],
    ["ddd", "vvv", "nnn"]
];
console.log(numberArr2[1][1]);  // "vvv"

: numberArr2[1][1]은 두 번째 배열의 두 번째 값을 의미

 

객체(Object) 생성:

let obj = {
    "name": "김뚝딱",
    "height": 182.3,
    method: function() {
        console.log(`name: ${this.name} height: ${this.height}`);
    }
};
console.log(obj.name);  // "김뚝딱"
console.log(obj.height);  // 182.3
obj.method();  // name: 김뚝딱 height: 182.3

: 객체는 속성(key-value) 형태로 값을 저장

: this 키워드를 사용하여 객체 내부 속성에 접근 가능

---

6. JSON(객체를 데이타로 저장하는 형식)

: XML 대신 JSON(JavaScript Object Notation)이 널리 사용됨

: 간단하게만 설명하고, 다음 글에서 JSON에 대해서 자세하게 다루겠음!

let jsonData = {"name": "benz", "age": 24, "address": "서울시"};

: 배열 형태의 JSON도 가능

let jsonDatas = [
    {"name": "benz", "age": 24, "address": "서울시"},
    {"name": "audi", "age": 26, "address": "부산시"},
    {"name": "bmw", "age": 30, "address": "대전시"}
];

: JSON은 API 데이터 송수신 등에 사용됨

: 객체와 유사하지만, 속성명이 반드시 문자열 형태로 지정되어야 한다.

---

7. 클래스(Class) 사용

: ES6에서는 class 키워드를 사용하여 객체를 생성할 수 있다.

class Human {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    print() {
        console.log("Human print()");
    }
}
let human = new Human("성춘향", 15);
console.log(`이름은 ${human.name}이고 나이는 ${human.age}살 입니다.`);
human.print();

: constructor 메서드는 객체가 생성될 때 자동 실행됨

: this 키워드를 사용하여 객체 내부 속성에 접근 가능

class Human{
    String name;   // 멤버 변수
    int age;
    
    public Human(String name, int age){  // 멤버 메서드
    this.name = name;
    this.age = age;
    }
    public void print(){	
    }
}

: 해당 코드는 자바 코드이다.

: 문법이 거의 유사한 것을 알 수 있다.

---

8. typeof 연산자 (데이터 타입 확인)

: JavaScript에서는 typeof 연산자를 사용하여 데이터 타입을 확인할 수 있다.

document.getElementById("demo").innerHTML = 
    "홍길동: " + typeof "홍길동" + "<br/>" +
    "123: " + typeof 123 + "<br/>" +
    "123.45: " + typeof 123.45 + "<br/>" +
    "true: " + typeof true + "<br/>" +
    "object: " + typeof human + "<br/>" +
    "array: " + typeof [1, 2, 3];

: typeof를 사용하면 데이터 타입을 문자열로 반환

: 배열은 객체(Object)로 인식됨