(1) Javascript: 기초 문법_230401

Javascript 는 처음인데, 앞으로 배울 Node.js 가 Javascript 기반이라고 하니 천천히 열심히 공부해야 겠다는 생각이 든다. 

 

가장 기본적인 내용은 이전에 공부했던 Python, C++ 와 비슷해서 특별히 주의해야 할 내용이 많지는 않았지만, 몇 가지 Javascript의 특징인 점을 정리해보기로 했다.

 

1. 변수 지정: var, let, const 

 

// var 의 경우 같은 variable name으로 variable reassign이 가능 
var myVar = "Hello World";
var myVar = "Test1";

// let 의 경우 같은 variable name 으로는 안되지만, variable update는 가능 
let myLet = "Hello World";
// let myLet = "Update" 는 불가
myLet = "Test2"

// const의 경우 절대 reassign이 안됨
const myConst = "Hello World";

 

2. Runtime 시 데이터 타입이 설정됨

* Javascript는 코드 작성할 때가 아니라 실행 될 때 터미널에서 데이터 타입이 결정된다. 

 

3. 데이터 형 변화 -> 암시적 형 변환, 명시적 형 변환 

 

// 형 변환
// 형태 -> 바꾼다 
// 명시적 형 변환, 암시적 형 변환

// 1. 암시적 형 변환 되는 케이스 
// 1-1. 문자열
let result1 = 1 + "2";
console.log(result1)
console.log(typeof result1)

let result2 = "1" + true;
console.log(result2);
console.log(typeof result2);

// {}, null, undefined , "1" ==> 문자열로 찍힌다

// 1-2. 숫자 
let result3 = 1 - "2";
let result4 = "2" * "3";
// 더하기 연산자가 아니라 - , * , / 등은 숫자가 우선시 됨 

// 2. 명시적 형 변환 (형 변환 할때는 )
// 2-1. Boolean 
console.log(Boolean(0));
console.log(Boolean(""));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean(NaN));
console.log(Boolean("---------------------"));
console.log(Boolean("false"));
console.log(Boolean({}));

// 2-2. 문자열
let result5 = String(123);
let result6 = String(true);
let result7 = String(false);
let result8 = String(null);
let result9 = String(undefined);

// 2 -3 . Number
let result10 = Number("123");

 

4. 연산자 (특히 삼항 연산자 주의)

 

// 1. 일치 연산자 (===)
// 타입까지 일치해야 True 를 변환하는 연산자

// 2. 불일치 연산자 (!==)
// 타입까지 일치해야 false 반환
console.log(2 !== 2);
console.log("2" !== 2);

// 3. 작다 (<)
// 4. 작거나 같다 (<=)
// 5. 논리곱 연산자
console.log(true && true); //true
console.log(true && false); //false
console.log(false && true); //false
console.log(false && false); //false

// 6. 논리합 연산자
console.log(true || true); 
console.log(true || false);
console.log(false || true);
console.log(false || false);

// 7. 논리 부정 연산자 
console.log(!true); 
let a = true;
console.log(!a);

// 8. 삼항 연산자 (중요!)
// 조건에 따라 값을 선택
let x = 10;
let result = x > 5 ? "크다" : "작다";
// if true, [true], [false]
let y = 20;
let result2 = y < 10 ? "작다" : "크다";

 

삼항 연산자는 꼭 엑셀의 if 문과 비슷하게 생긴 것 같다. If ( 조건, 조건 충족 시 결과, 조건 미 충족 시 결과 ) 이 함수랑 비슷하달까.... 

 

4. Function 을 지정하는 방법 (요즘에는 arrow 로 function 을 쓴다고 한다. 아래 arrow style function 참고) 

 

function add (x, y) {
    let result;

    return result;
}

let add2 = function (x, y) {
    return x + y
}

let functionResult = add(10, 20)

// 좀 더 쉽게 쓰는 방법을 제시한다면... 
// 기본적인 화살표 함수
let arrowFunc01 = (x, y) => {
    return x + y
}

let arrowFunc02 = (x, y) => x + y;

// 샘플
function testFunc(x) {
    return x;
}

let arrowFunc03 = (x) => x;

 

5. 삼항 연산자와 단축키 

 

// 삼항 연산자와 단축평가
// 알고 있으면 상당히 편리한 개발 패턴 이라고 하는데.... 아직 직관적으로 이해는 잘 안 간다
let y; // y 는 undefined 
let z = y || 20; // y 가 undefined 면 20을 해줘. or 
console.log(z);