210105 개발일지(29일차) - Javascript 입문 강의 정리

사이드 프로젝트를 진행하는 데 있어, 자바스크립트를 너무 몰라서 기초강의인 프로그래머스에 있는 js 무료강의를 정리했다.
생각보다 별 내용이 없어서.. 금방 들었고.. 긴 포스팅이 됐지만 건질 수 있는게 많을 지 모르겠다.

Developer Console

이는 각 브라우저마다 있는데, 크롬에서는 우측 상단에 더보기 버튼을 클릭하여 열 수 있다.
(맥 기준 단축키는 opt+cmd+i 이다.)

여기서 여러 메뉴들이 있지만, 처음에는 console창에서 주로 확인하거나 입력하는 데 쓰일 예정이다.

변수

변수 선언은 파이썬과 달리 var, let, const 등의 함수로 변수를 선언할 수 있다.
es6이후 var을 let과 const를 나누었으니, 알고 있자.

var의 단점은 아래와 같다.

    var name = 'bathingape'
    console.log(name) // bathingape

    var name = 'javascript'
    console.log(name) // javascript

동일 변수를 중복해서 선언했으나 문제없이 출력된다.
이런 점이 싫었나보다; 그래서 let을 활용하는데 아래와 같이 차이가 난다.

let name = 'bathingape'
    console.log(name) // bathingape

let name = 'javascript'
    console.log(name) 
    // Uncaught SyntaxError: Identifier 'name' has already been declared

let을 사용하면 기존의 변수에 다른 값을 선언하면 에러가 난다.

const는 한 번 지정한 변수에 다른 값을 입력하는 것이 불가능하다.

자료형(Type)

기본 자료형으로는 number, string, boolean, undefined, 등이 있다.

let a=100, b=3.14;
let c="안녕하세요", d="a";
let e=true, f=false;

console.log(a,typeof(a));
console.log(b,typeof(b));
console.log(c,typeof(c));
console.log(d,typeof(d));
console.log(e,typeof(e));

위와 같이 js를 작성하면, 아래와 같은 값을 얻을 수 있다.

number

javascript에서는 정수와 실수를 따로 구분하지 않고, number라는 자료형으로 통합한다.
64비트를 활용해 숫자를 표기해서, -(2^63)부터 2^63까지 표기가 가능하고 그를 벗어나는 범위도 표현은 가능하나 오차(?)가 생긴다고 한다. (공부하다 보면.. 알게되지 않을까?)

string을 number로 바꾸기

일단 prompt로 입력을 받으면, 파이썬과 비슷하게 string 자료형으로 값을 받게 된다. 이를 숫자로 바꾸려면, parseInt() 혹은 parseFloat() 함수를 활용하면 된다.

parseInt() : 정수화
parseFloat() : 실수화

특이한 점은, "185.3입니다."와 같은 string도 숫자로 바꿔준다는 점이다. 그러나, "저는 185.3입니다."는 NaN로 반환해준다. 즉, 문자열 맨 앞에서 시작하는 부분까지는 숫자로 바꿔준다.
parseInt("180+5.3")을 실행해도 180만 나온다.

string

기본 강의에서는 파이썬과 다른 점을 찾지 못했다. ",' ,\n, \ 활용법이 같았다.

undefined vs null

undefined는 정의하지 않은 변수 등을 입력할 때, 출력되는 값이고
null은 보통 프로그래머가 의도적으로 활용한다고 한다.
예를 들어, let x=null; 이라고 하면 x의 type은 object가 되며 의도적으로 비워둔 object라고 생각할 수 있다.

객체(object)

파이썬에서 dictionary 개념이라고 생각하면 될 것 같다.

let man = { name:"홍길동", age:20, height:174};

파이썬 dictionary와 마찬가지로 key, value로 이루어져 있고 접근법은 2가지이다.

1. man.age
2. man["age"]

산술 연산자(arithmetic operator)

+,-*,/ 등을 활용하여 산술 연산을 한다.
++, -- 등은 증감 연산을 할 수 있다. 아래를 확인해보자.

let a=1;
console.log(a);
console.log(++a)
console.log(a++)
console.log(a)
<
1
2
2
3

Math.pow() 함수는 제곱, Math.sqrt() 함수는 제곱근 등 Math 객체에서 제공하는 다양한 연산들이 있다.

관계 연산자(relational operator)

<, >, ==, != 등을 활용하며 boolean 자료형으로 반환한다.

논리 연산자(logical operator)

and는 '&&'으로, or은 '||'으로 사용한다. boolean 자료형으로 반환한다.

연산의 우선순위(연산자 계산 순서)

아래와 같은 순으로 계산이 일어난다. 굳이 외울 필요는 없으며, 괄호를 활용해서 가독성도 높이고 의미도 잘 전달하도록 코딩을 하자.

함수(function)

함수를 '호출'한다. 함수를 호출하면 함수가 기능을 수행하고 결과값을 반환한다.
javascript에서는 아래와 같이 함수를 정의한다.

function 함수이름(파라미터1, 파라미터2){
    /*
        실행될 코드
    */
    return 반환값;
}

문자열(string)

문자열 더하기

+ 혹은 str.concat() 함수를 활용하여 문자열을 합칠 수 있다.

"a"+"b"
< "ab"
"a".concat("b")
< "ab"

문자열에 인덱스로 접근

특정 인덱스에 접근하고자 하는 경우, str[index] 혹은 str.charAt() 함수를 쓴다.
다양하게 str.substring, str.substr, str.indexof 등이 있는데 이는 필요할 때 찾아서 쓰자~

배열(array)

파이썬의 List와 거의 같다. 아래와 같이 만들 수 있다. 이 때, 타입은 object이다;

let arr=[];

배열의 추가 및 삭제 및 정렬

1. arr.pop() : 파이썬의 pop과 같다.
2. arr.shift() : 파이썬의 popleft와 같다. (deque모듈)
3. arr.push() : 파이썬의 append와 같다.
4. arr.unshift() : 파이썬의 appendleft와 같다.(deque모듈)

이 외에도 arr.reverse() 및 arr.sort() 등 정렬에 사용되는 여러 함수들이 있는데, 필요할 때 찾아보자.