Javascript

친구가 그렇게 말하던 자바스크립트... 느리지만 지금부터라도 해볼 의향으로 이 글을 적어본다. 이 글은 다음 링크의 내용을 내 생각으로 정리했다.

모던 자바스크립트 튜토리얼

파이썬을 올릴 땐 함수부터 진행했지만 이 자바스크립트는 Hello, world! 부터 진행한다. 그 이유는 조금이라도 자바스크립트와 친해지기 위함이다. 그럼 이제 시작하겠다.

1. Hello, world

C언어, 자바, 파이썬 모두가 처음 시작할 때 이 문자열을 출력하게 한다. 나는 다른 건 몰라도 이 부분은 아니까 가볍게 alert('Hello, world!')만 알자.

자바스크립트는 어떻게 출력함?

일단 HTML에서는 너무나도 봐왔기에 이를 연동해서 출력할 수 있고 도저히 HTML을 모르겠다! 하면 개발자 옵션의 콘솔 창에서 해도 된다.

HTML에서 할 시, 스크립트 문 안에서 하거나 외부 스크립트 주소를 사용한다.

참고로 외부 스크립트는 이런 식으로 사용된다.

<script src="/path/to/script.js"></script>

근데 난 이거보다 다른 걸 추천한다.

<script src="/js/script1.js"></script>

스크립트 문에서 주요할 것은 src가 들어가면 스크립트 태그 안의 내용은 철저히 무시되기 때문에 이를 기억해두자.

2. 코드 구조

음... C와 자바처럼 세미콜론(';')을 사용하지 않아도 출력은 된다. alert(''); 하거나 alert('') 해도 똑같이 안의 문자열을 출력될 것이다. 하지만 일반적인 개발자들의 약속은 세미콜론을 쓰는 것이다.

특히나 자바스크립트는 이를 쓰지 않으면 동작이 되지 않는 것이 있다.

alert("에러가 발생합니다.")
[1, 2].forEach(alert)

우리는 이 내용이 아직은 몰라도 되고 1, 2가 정답이라는 것만 알아두자. 이 앞에 alert('')을 쓰는데 세미콜론을 쓰지 않으면 어떻게 될까?

1, 2가 출력이 되어야 하는데 alert문만 출력된 것을 확인할 수 있다.

3. 엄격 모드

자바스크립트는 기존의 기능을 변경하지 하면서 기능을 추가했기 때문에 구시대의 코드여도 동작이 되는 장점이 있다. 하지만 초창기 자바스크립트의 실수도 같이 남게 되어버리는데 이로써 추가된 기능만을 요구하게하는 엄격 모드라는 것이 있다.

이것이 바로 user strick(엄격 모드) 이다.

"use strict";

// 이 코드는 모던한 방식으로 실행됩니다.

이런 식으로 하면 밑의 코드는 es5 이상의 자바스크립트문을 요구하게 된다. 물론 선언하지 않으면 엄격 모드는 실행되지 않는다.

4. 변수, 상수

음... 크게 다른 언어와 차이는 없다. let은 변수, const는 상수를 선언하는 것인데 변수, 상수에 대해 의미를 모르진 않기 때문에 넘어가자.

다만 var이라는 선언하는 것도 있는데 이는 구시대의 유물로써 사용하지는 않는다. 만약 사용하는 기업이 있다면 이는 오래된 회사일 가능성이 다부하다.

변수 명에는 자료형의 이름, 함수의 이름 등... 똑같다. 그니까 쓰지말자. 이런 이름은

5. 자료형

음... 정수형, 실수형 뭐 그런 의미일 것이다. 여기서 조금 헷갈리는 것을 좀 정리해보자.

• 큰따옴표, 작은따옴표, 백틱(``)

  큰 따옴표 작은 따옴표는 딱히 기준을 두지 않는 듯하다. 백틱은 예시를 통해 정리하자.

let name = "John";
alert( `Hello, ${name}!` );
alert( `the result is ${1 + 2}` );

이런 식으로 내가 원하는 변수를 바로 가져와서 쓸 수 있다. 왠지 Ajax할 때 본 것 같다.

• null

  null을 0이라고 이해하면 안된다. null은 null이라는 것 그 자체로 존재하지 않은 객체를 말할 때 주로 말한다. 나는 주로 비어있는 값이라고 생각한다. 참고로 null의 type은 object라고 나오지만 절대 object가 아니기 때문에 이를 명심하자.

• undefined

  가끔 나는 null이랑 undefined를 헷갈릴 때가 많은데 간단하게 변수를 선언했지만 값은 할당하지 않았다면 이는 undefined 상태이다.

6. 형변환

자바스크립트에서 기본적으로 상호작용으로 제공하는 3개의 문을 알아보자.

• alert

  지금까지 우리가 계속 써온 형태이다. alert 하면 다음과 같은 화면을 계속 보았는데 이를 alert문이라고 한다.

alert('이런거');

• prompt

  오, 이번엔 좀 새로운 것이다. 하지만 이 창도 우리는 많이 보았다. 무언가 입력받을 때 쓰는 창이라고 생각하면 된다.

let age = prompt('나이를 입력해주세요: ', 100);

위의 명령문과 비교를 해보면 age라는 변수에 나이를 입력해주세요 라는 문자열과 함께 100이 나온다. 자, 이를 좀 더 문법적으로 적어보자.

let 변수 = prompt('문자열', 초기에 나올 값)

이렇다면 더 이해가 쉽다. 하지만 초기에 나올 값은 대부분 빈 공백으로 두는 편이 낫다.

• confirm

  마지막은 컨펌이라는 것이다. 간단히 설명하면 예, 아니오를 입력할 수 있고 예를 누르면 True, 아니오를 누르면 False를 반환한다.

let isBoss = confirm('당신이 주인인가요?')

나는 이 3개를 정의해보겠다. 메시지가 있는 이 창은 modal window라고 한다.

2.7까지의 내용 문서 확인