[JavaScript] 자바 스크립트 기초

 

 

 

 

변수

// 변수
var a = 10;
let b = 20;
const c = 30;
console.log(a, b, c);

 

• 변수 종류에는 var / let / const 가 있다.

 

 

let, var, const

// let 과 var
var a = 10;
if(true){
    var a = 20;
    console.log(a);   // 20
}
console.log(a);       // 20

let b = 10;
if(true){
    let b = 20;
    console.log(b);   // 20
}
console.log(b);       //10

 

•  let
  • 변수 재선언 불가능, 재할당 가능
  • 지역성을 가지기 때문에 변수가 선언된 지역 외에서 수행되는 연산은 실제 변수 값에 영향을 미치지 않는다.
• var
  • 변수 재선언, 재할당 가능
  • 변수가 선언되는 지역에 상관없이 어디서든 불러올 수 있고 그 값에 영향을 미친다.
  • ES6에서 var을 대체할 변수인 let, const 가 나왔다.
• const
  • 변수 재선언, 재할당 불가능
  • 변수를 최초로 선언하고 값을 할당할 때 단 한 번 변수 선언 및 할당 가능

 

 

타입

// 타입
let c = true;
let d = [];
let e = {};
let f = function(){};
let g = undefined;

console.log(typeof(c));   // boolean
console.log(typeof(d));   // object
console.log(typeof(e));   // object
console.log(typeof(f));   // function
console.log(typeof(g));   // undefined
console.log(typeof(3.14)); // number

 

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

console.log(tiger, typeof(tiger));     // tiger{a: 10, ...} object
console.log(tiger.a, typeof(tiger.a)); // number 10

 

 

타입 변경

let a = 10;
console.log(typeof(a));   // number

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

 

 

Date() 함수

// Date() 함수
let n = new Date();
console.log(n.getFullYear(), '년');
// 0월부터 시작
console.log(n.getMonth() + 1, '월');
console.log(n.getDate(), '일');
// 0(일) 1(월) 2(화)
console.log(n.getDay(), '요일');
console.log(n.getHours(), '시');
console.log(n.getMinutes(), '분');
console.log(n.getSeconds(), '초');
console.log(typeof(n));
console.log(typeof(Date));
console.log(typeof n);
console.log(typeof Date);

 

• 실시간 날짜, 시간 정보 가져올 수 있다.

 

 

 

번외) 자바와 동일한 부분

• 산술연산, 비교연산, 논리연산
• 증가연산, 감소연산
• += 복합대입연산
• 제어문, 삼항연산
• true, false

자바와 동일하지 않은 부분

• 승수 구하기

console.log(2 ** 4);
console.log(Math.pow(2, 4));

 

 

 

==   vs   ===

console.log(100 == 100);        // true
console.log(100 == '100');      // true
console.log(100 === '100');     // false

 

• == : 값이 같은지의 여부
• === : 값과 타입 모두 같은지의 여부

 

 

 

if문

let a = 10;
if(a > 3){
    console.log('test');
}
a > 3 && console.log('test');

if(!false){
    console.log('test3');
}
false || console.log('test4');

 

 

 

함수(Function)

// 1. 기본꼴
f1();
function f1(){
    console.log('1');
}
f1();

// 2. 함수 자체를 변수에 담는다
//f2();
let f2 = function(){
    console.log('2');
}
f2();

// 3. 람다식
let f3 = () => {
    console.log('3');
}
f3();

// 4. 즉시 실행 함수(IIFE)
(function(){
    console.log('4')
})();

// 5.
(() => {
    console.log('5')
})();

 

• 자바스크립트는 동기적이다.
• 호이스팅이 된 이후부터 코드가 순서대로 하나씩 실행된다.
• 함수를 선언할 때 변수에 담는 방식으로 선언하면 호이스팅이 불가능하다.
• 함수를 선언할 때 그 자체만 선언하는 기본 방식의 경우 호이스팅이 가능하다.

 

호이스팅이란?

• var, function declaration 들의 선언이 자동적으로 올라가는 것

console.log('1');
setTimeOut(() => console.log('2'), 2000);
console.log('3');

 

 

 

즉시 실행 함수 예제

// 1.
function f4(num){
    console.log(num);
}
f4(100);

// 2.
(function f4(num){
    console.log(num);
})(200);

// 3.
(function(num){
    console.log(num);
    let start = new Date().getTime();
    while(new Date().getTime() < start + num);
})(2000);
console.log('test');

 

 

 

생성자 함수

// 생성자 함수 : 클래스와 동격
function Fff555() {
    this.num1 = 10;
    this.num2 = 20;
    this.m1 = function () {
        console.log(this.num1);
    }
    this.m2 = () => {
        console.log(this.num2);
    }
}

// 객체 생성
let ins = new Fff555();
ins.m1();             // 10
ins.m2();             // 20
new Fff555().m1();    // 10

 

 

 

함수(Function) 예제

function t1() {
    console.log('1');
}

function t2(n, s) {
    console.log(n + s);
}

function t3() {
    console.log('3');
    return 888;
}

function t4(n) {
    console.log('4');
    return n * 2;
}

t1()                // 1
t2(2, 'str')        // 2str
console.log(t3());  // 3 // 888
console.log(t4());  // 4 // NaN

 

 

 

가변 인수 전달

function t5() {
    console.log(typeof (arguments));    // object
    console.log(arguments.length);      // 3
    let sum = 0;
    for (const key of arguments) {
        sum += key;
    }
    console.log(sum);                   // 60
}
t5(10, 20, 30);

 

• argument 객체는 t5 함수의 인수에 접근할 수 있는 지역변수이다.