[JavaScript] 기초 정리

개요

다른 언어를 사용해본적이 있기 때문에 개념보다는 JavaScript에서는 어떻게 적용되는지 정리하겠다.

 

1. 변수 (Variables)

JavaScript에서 변수를 선언하는 방법은 var, let, const 이렇게 세 가지가 있다.

 

var

-> 선언된 변수가 함수 내부에서만 유효하고, 함수 밖에서는 접근할 수 있다. (= 함수 스코프)

-> 같은 변수명을 다시 선언할 수 있다.

-> 값을 변경할 수 있다.

 

function example() {
    var x = 10;
    if (true) {
        var x = 20; //같은 변수명으로 다시 선언 가능
        console.log(x); // 20
    }
    console.log(x); // 20
}

example();

 

-> 하지만 위의 코드에서 보듯이 문제가 발생할 수 있는데,
->     처음  x 변수에 값이 할당되고, if 문 안에 블록에서 재할당이 이루어지는데 블록({})을 무시하고 함수 스코프를 따르기 때문에 의도치 않게 값이 20으로 변경되었다.

-> 이러한 문제들 때문에 ES6 이후에는 잘 사용하지 않는다고 한다.

 

let

-> 선언된 변수가 블록({}) 내에서만 유효하다. (= 블록 스코프)

-> 같은 변수명을 다시 선언할 수 없다.

-> 값 변경 가능

 

function example() {
    let y = 10;
    if (true) {
        let y = 20; // 새로운 변수로 취급됨 (재선언이 아니라 블록 내에서 별도의 변수)
        console.log(y); // 20
    }
    console.log(y); // 10 (블록 `y`와 다른 변수)
}

example();

 

-> 저 함수 스코프 'y' 와 if문 안에 블록 스코프 'y'는 서로 다른 변수이다.

 

const

-> 선언된 변수가 블록({}) 내에서만 유효하다. (= 블록 스코프)

-> 같은 변수명을 다시 선언할 수 없다.

-> 선언 후 값을 변경할 수 없다.

const z = 30;
z = 40; // TypeError: Assignment to constant variable

 

const obj = { name: "Ho" };
obj.name = "Taek"; // 가능
console.log(obj.name); // Taek

const arr = [1, 2, 3];
arr.push(4); // 가능
console.log(arr); // [1, 2, 3, 4]

 

-> 단, 객체나 배열의 속성 값에 대한 변경은 가능하다.

 

2. 자료형

2-1. 원시 타입 (Primitive Type)

-> 메모리에 값 자체를 저장하고, Stack 영역에 보관된다.

자료형	설명
Number	숫자 (정수, 실수)
String	문자열
Boolean	논리값(true, false)

 

2-2. 참조 타입 (Reference Type)

자료형	설명
Object	키-값 쌍으로 구성된 데이터 구조
Array	여러 개의 값을 순서대로 저장하는 집합
Function	함수
Date	날짜 및 시간
RegExp	정규 표현식

 

-> 메모리 Heap 영역에 저장되고, 변수는 그 참조(주소)를 Stack에 저장한다.

 

2-3. 특수 타입

자료형	설명
null	값이 없음
undefined	변수가 선언됐지만 값이 할당되지 않음
NaN	숫자가 아닌데 숫자처럼 처리될 때

 

3. 배열 (Array)

 

JavaScript의 배열은 내가 기존에 알고 있던 Java와는 다른 느낌이라 새롭게 느껴졌다.

 

일단 배열은 여러 개의 값을 하나의 변수에 저장할 수 있는 자료구로, 배열은 동적이고 다양한 타입의 데이터를 함께 저장할 수 있다.

 

3-1. 배열의 선언

대괄호( [ ] )

let arr1 = [1,2,3,4,5] // 숫자로만
let arr2 = ["A","B","C"] // 문자열
let arr3 = [1, true, "A"] // 여러 타입

 

new Array()

let arr1 = new Array(10); // 길이가 10인 빈 배열
let arr2 = new Array(1, 2, 3); // => [1,2,3]

 

3-2. 특징

1) 배열 = 객체(Object) 타입

console.log(typeof [1, 2, 3]); // "object"

 

-> 배열 요소는 인덱스를 키로 가지는 속성 처럼 저장된다. ( = 객체와 같이)

 

2) 동적 크기고정

let arr = [1, 2, 3];
arr.push(4); // 요소 추가 가능
console.log(arr); // [1, 2, 3, 4]

 

-> 배열의 크기가 동적으로 변경되고, 길이를 미리 지정하지 않아도 된다.

 

3) 여러 타입 저장 가능

 

4) 배열 인덱스는 0부터 시작

let num = [1, 2, 3];
console.log(num[0]); // 1
console.log(num[1]); // 2
console.log(num[2]); // 3

 

3-3. 배열 메서드

추가, 삭제

메서드	설명	예제
push()	배열 끝에 요소 추가	arr.push(3);
pop()	배열 끝 요소 제거	arr.pop();
unshift()	배열 앞에 요소 추가	arr.unshift(0);
shift()	배열 앞 요소 제거	arr.shift();

 

let arr = [1, 2, 3];

arr.push(4); // [1, 2, 3, 4]
arr.pop(); // [1, 2, 3]
arr.unshift(0); // [0, 1, 2, 3]
arr.shift(); // [1, 2, 3]

 

조회

메서드	설명	예제
indexOf(value)	값의 첫 번째 인덱스 반환 (-1)	arr.indexOf(2);
includes(value)	해당 값이 존재하는지 여부	arr.includes(3);

let numbers = [10, 20, 30, 40];

console.log(numbers.indexOf(20)); // 1
console.log(numbers.includes(50)); // false

 

순회

: forEach(value, index)

arr.forEach((value, index) => {
    console.log(`index: ${index}, value: ${value}`);
});

 

: map() -> 새로운 배열 반환

let doubled = arr.map(num => num * 2);
console.log(doubled); // [20, 40, 60]

 

: filter -> 조건 만족 요소 선택

let filtered = arr.filter(num => num > 15);
console.log(filtered); // [20, 30]

 

4. 조건문

조건문은 if, else if, else, switch 문을 사용해 작성할 수 있다.

if-else

let age = 18;
if (age >= 18) {
    console.log("성인입니다.");
} else {
    console.log("미성년자입니다.");
}

 

switch

let fruit = "apple";
switch (fruit) {
    case "apple":
        console.log("사과입니다.");
        break;
    case "banana":
        console.log("바나나입니다.");
        break;
    default:
        console.log("알 수 없는 과일입니다.");
}

 

 

반복문의 경우는 Java와 똑같이 사용하기 때문에 따로 정리는 안해도 되겠다.