[JS] 기본

heyhey·2023년 2월 20일
0

JavaScript

목록 보기
3/14

[2.1, 2.2, 2.3, 2.4]
script 태그와 상수와 변수 에 대해 알아본다.

Hello World

JS는 <script> 태그 안에 사용해 html에 삽입할 수 있다.

<html>
  <body>
    <p>hi world</p>
    <script>
	   	alert("hi")
    </script>
  </body>
</html>

브라우저는 이 태그를 만나면 안의 코드를 자동으로 처리한다.

script 태그

  • type 속성
    - script 태그에 type이라는 속성이 존재한다. 잘 쓰진 않지만 예전에는 필수였다고 한다.
    type="text/javascript"

  • language 속성
    - 현재 사용하고 있는 스크립트 언어이다.기본언어가 js가 됐기 때문에 의미가 없다고 봐도 된다.

  • src 속성
    - 코드의 양이 많을 경우엔 파일로 소분해서 저장할 수 있다.
    - src 속성으로 위치를 지정해서 사용한다.
    - url을 속성으로 사용할 수도 있다. => 실제로 url을 열어보면 js 파일이 열린다.

    • src 속성을 적으면 태그 내부의 코드는 무시된다.

스크립트를 분리해서 별도의 파일에 작성하면, 브라우저가 스크립트를 다운받아 캐시에 저장하기 때문에 성능상의 이점이 있다.
=> 여러 페이지에서 동일한 스크립트를 사용하면, 캐시로부터 가져와 사용한다. (트래픽 절약)

코드 구조

세미콜론은 생략이 가능하다.

  • 줄바꿈이 있다면 '암시적'인 세미콜론이라고 해석한다.
  • 대부분은 줄 바꿈이 있다면 자동으로 세미콜론을 삽입하지만, 아닐 때도 있다

주석

// 이나
/**/ 를 통해 주석을 달 수 있다.

주석을 달아도, 배포할 때 코드를 압축해주는 도구가 삭제를 해주기 때문에 걱정하지 않아도 된다.

strict 모드

ES5 에서 새로운 기능이 추가되고 , 기존 기능이 변경되어서 하위 호환성 문제가 생기는 것을 방지 하기 위해 기본모드에선 활성화되지 않도록 설계되었다.
대신 use strict 라는 지시자를 사용하면, 모던한 방식으로 동작한다.

모던 js는 클래스와 모듈이라 불리는 구조를 제공한다.
이 둘을 사용한면 use strict가 적용된다. => 굳이 입력하지 않아도 사용

변수

변수는 데이터를 저장할 때 쓰이는 이름이 붙은 저장소 라고 할 수 있다.

  • let 을 통해 변수를 생성한다.
  • = 을 통해 변수에 데이터를 할당한다.
    문자열이 변수와 연결된 메모리 영역에 저장되어있기 때문에 변수명을 이용해 문자열에 접근할 수 있다.

변수를 두번 선언하면 에러가 발생한다.

함수형 프로그래밍 언어는 변숫값 변경을 금지한다...=> 당장은 모르더라도 알고는 있는 것이 도움된다

변수는 카멜케이스 명명법으로 많이 사용한다.

상수

변화되지 않는 변수를 선언할 때는 , let 대신 const를 사용해서 생성한다.

대부분 카멜 케이스를 사용하기도 하나, 기억하기 힘든 값을 변수에 할당할때는 대문자와 밑줄로 이름을 명명하기도 한다.
const RED = "#F00"

변수명은 간결하고 명확해야한다.
변수명은 변수가 담고 있는 것이 무엇인지 쉽게 알 수 있도록 지어져야 한다.

profile
주경야독

0개의 댓글