[JavaScript] JavaScript 기초다지기

[해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다.
따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.]

이번 시간에는 JavaScript 기초를 배우면서 실습을 했던 코드들을 다시 적으면서 복습을 해보도록 하겠다.

 

1. console.log()

주로 JavaScript문을 작성하고 Console로 결과를 확인하고 싶을 때 사용한다.

 

console.log('Hello Wolrd!'); //디버깅창에서 확인할 때 사용.
console.log('호랑이', 100); //값을 연결할 땐 +로 이용하지 말고, ','를 이용하여사용.

 

웹사이트에서 확인하고자 할 땐 alert()를 사용하여 확인하자.

2. 자료형 Type

JavaScript는 Java와 다르게 정수형, 문자형, Boolean형 등 Type이 따로 없고 var로 통일하여 사용한다.

하지만, ES6로 업데이트하면서 let과 const Type이 추가돼서 var은 주로 사용하지 않고 let을 사용한다.

const는 값을 상 수화시킨다. Java로 예를 들자면 final을 시켜버리는 것이다.

 

var a = 10; //자동으로 숫자타입으로 변환된다. (이제 자주 사용되지 않는다.)
let b = 20; //최근에는 var를 사용하지 않고 let을 사용한다.
const c = 30; //값을 갱신시킬 수 없도록 설정하는 변수. 상수화시킴.

console.log(a, b, c);

3. 자료형 Type을 확인하는 typeof()

모든 자료 Type을 var이나 let으로 통일하여 사용하지만, 숫자나 문자, 객체 등 변수에 넣으면, 변수는 알아서 그에 맞게 타입이 변한다. 이 변수의 타입을 확인할 때 쓰는 함수가 typeof이다.

 

var a = 10;
console.log(a);
console.log(typeof(a)); //현재 가지고있는 Type을 Return 시켜준다.

 

또한, JavaScript에선 이전에 선언한 변수를 새로 다시 선언할 수 있다. 해당 변수에 다른 Type의 값을 넣으면 기존 변수의 Type은 사라지고 새로운 Type으로 변경된다. 

 

var a = '호랑이';
console.log(a);
console.log(typeof(a));

 

주의! var Type은 변수를 재 선언해서 사용할 수 있지만, let이나 const Type은 변수를 재 선언해서 사용할 수 없다!
사용하면 에러가 뜰 것이니 참조하기 바란다.

4. JavaScript에서 사용되는 Type

JavaScript는 크게 두 가지 타입으로 구분한다. 첫 번째로 기본 타입이 되는 원시 타입(Primitive Data Type) 두 번째로 참조 타입(Reference Data Type)이다.

 

-원시 타입(Primitive Data Type)

• 숫자형 - Number
• 불린형 - Boolean
• 문자형 - String
• 심볼형 - Symbol (ES6에서 새로 추가된 Type!)
• Null - null
• 미지정 - Undefined

-참조 타입(Reference Data Type)

• 객체 - Object

원시 타입은 값이 변수에 할당될 때 메모리 상에 고정된 크기로 저장된다. 참조 타입은 값의 메모리 주소를 참조한다.

 

console.log(typeof(10)); //Number
console.log(typeof('a')); //String
console.log(typeof(true)); //Boolean

var a;
console.log(typeof(a)); //Undefined

let b = new Date(); //Date 객체를 b에 대입
console.log(b); //현재 시간 출력
console.log(typeof(b)); //Object

let c = []; //Array문법
console.log(typeof(c)); //Object

let d = {}; //(중요) 함수, 객체 만들 때(Object)
console.log(typeof(d)); //Object

5. 객체 생성

JavaScript에서 객체는 데이터들의 사전이라 생각하면 된다. Python으로 치자면 Dictionary정도로 생각하면 된다. 그런데 들어갈 수 있는 값은 모든 Type이 다 들어간다. Object, Function 등 다 들어간다.

객체 내에서 값을 삽입할 땐 '='이 아니라 ':'를 사용하므로 헷갈리지 말자.

 

let apple = {
    a : 10,
    b : '호랑이',
    c : true,
    //객체 안에 객체를 생성 가능.
    d : {
        e : 20,
    } ,
    //객체 안에 함수가 생성 가능.
    f : function(){
        console.log(30);
        
    },
};

console.log(apple.a);
console.log(apple.b);
console.log(apple.c);
console.log(apple.d.e);
apple.f();

 

독특한 점을 보면 apple 객체 내부에 f 함수 다음 ', '를 찍어줬다. 뒤에 값도 없는데 굳이 찍어 준 이유는 개발자들끼리 암묵적인 Rule이라 한다.

6. 문자를 숫자로 변형하는 방법

방법은 여러 가지 있겠지만 여기선 2가지 방법을 실습하였다. Number()를 사용하는 것과 parseInt()를 사용하는 방법이다. 문자를 숫자로 변환해서 활용하는 곳이 많이 때문에 잘 숙지해두도록 하자.

 

let a = 10;
console.log(a + 10); //20 출력
console.log(typeof a); //Number

let b = String(a); //문자로 변환 시킨다.
console.log(a + b); //1010출력
console.log(typeof b); //String

let c = Number(b); //문자를 숫자로 변환 시킨다.
console.log(c); //10 출력
console.log(typeof c); //Number

let d = parseInt(b); //문자를 숫자로 변환 하는 방법 2
console.log(d); //10 출력
console.log(typeof d); //Number

7. 객체값을 호출하는 방법

객체를 호출하는 방법은 2가지가 있다. 하나는 '객체명. 키값'이 있으며, 두 번째로'객체명[키값]' 형태로 사용된다. Key값은 String Type으로 사용된다.

 

let obj = {
    a : 10,
    b : '호랑이',
    c : true,
};

//객체를 호출하는 방법 2가지
console.log(obj.a);
console.log(obj['b']);

 

또 반복문을 이용해서 쉽게 부를 수 있다. 사용되는 반복문 형태는 다음과 같다.

 

for(키 값을 대입받을 변수 in 객체)

 

이런 형태로 사용하면 객체 내에 존재하는 키 값을 좌측의 변수에 넣어주어 호출하는 방식 2번째를 이용하여 쉽게 호출할 수 있다.

 

for (let item in obj){
    console.log(item); //Key가 출력된다.
    console.log(obj[item]); //값이 호출된다.
};

8. 배열을 사용하는 방법

배열 생성은 다음과 같다.

 

let ar = [10, 20, 30, '호랑이', {}];

 

여기서 독특한 점이 보일 것이다. 동일한 Type만 들어가는 것이 아닌 지금은 Number, String, Object형으로 들어갔다. JavaScript의 배열은 이렇게 다른 Type의 데이터까지 같이 저장할 수 있다.

 

배열의 원소를 가져오는 방법1 - for(;;) 문 이용하기

배열을 호출하는 방법은 다른 언어와 동일하게 반복문을 이용해서 호출할 수 있다. 또한 배열의 Index는 String Type으로 되어있다. 출력하면 순서대로 0, 1, 2, 3, 4가 될 것이다.

 

for (let i = 0; i < ar.length; i++){
    console.log(ar[i]);    
}

 

배열의 원소를 가져오는 방법2 - for(in) 문 이용하기

객체를 호출하는 방법과 동일하게 for( in )문을 사용할 수 있다.

 

for (let item in ar){
    console.log(ar[item]);
}

 

배열의 원소를 가져오는 방법3 - foreach문 이용하기

JavaScript에서 foreEach문은 다음과 같은 형태로 쓴다.

 

Array변수명.forEach(function(value, key){ ... })

 

그러나 Lambda 방식을 선호하기 때문에 기본 foreEach문을 호출하면 다음과 같은 형태로 되어있다.

 

Array변수명.forEach((value, key) => { ... })

 

Lambda는 최근들어 프로그래밍 언어에 모두 쓰이고 있다. 따라서 잘 숙지해두어야 한다.

 

ar.forEach((v, k) => {
    console.log(v, k);
});

9. 삼항연산자 이용하기

Java와 동일하게 JavaScript에서 삼항 연산자를 사용할 수 있다. 다음과 같이 한 줄로 처리되는 if ~ else 문이 있으면 5줄이나 차지하기 때문에 코드라인이 불필요하게 늘어나게 된다.

 

if (3 > 2){
    console.log('호랑이')
}else {
    console.log('사자');
}

 

삼항 연산자를 이용하면 이것을 한 줄로 표시할 수 있게 된다.

 

console.log((3 > 2) ? '호랑이' : '사자');