11/17 자바스크립트 공부

 

 

** 위 포스팅 내용은 모두 아래 싸이트 내용이며, 해당 싸이트 내용을 혼자 공부하면서 정리한 포스팅입니다.

https://ko.javascript.info/variables

변수와 상수

---

 

 

모던 마크업

<script> 태그엔 몇 가지 속성(attribute)이 있다. 요즘엔 잘 사용하진 않지만, 오래된 코드에서 종종 이 속성을 발견할 수 있다고 한다.

type 속성: <script type=…>

HTML4에선 스크립트에 type을 명시하는 것이 필수였다. 하지만 지금은 타입 명시가 필수가 아니다. 게다가 모던 HTML 표준에선 이 속성의 의미가 바뀌었다. 이제 이 속성은 자바스크립트 모듈에 사용할 수 있다. 

language 속성: <script language=…>

이 속성은 현재 사용하고 있는 스크립트 언어를 나타낸다. 

 

외부 스크립트

자바스크립트 코드의 양이 많은 경우엔, 파일로 소분하여 저장할 수 있다.

이렇게 분해해 놓은 각 파일은 src 속성을 사용해 HTML에 삽입한다.

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

여기서 /path/to/script.js는 사이트의 루트에서부터 파일이 위치한 절대 경로를 나타낸다. 현재 페이지에서의 상대 경로를 사용하는 것도 가능하다. 같은 폴더 내에 있는 파일인 "script.js"를 src="script.js"로 참조하는 것처럼.

물론 아래와 같이 URL 전체를 속성으로 사용할 수도 있다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

복수의 스크립트를 HTML에 삽입하고 싶다면 스크립트 태그를 여러 개 사용하면 된다.

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

주의:

HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가 아주 간단할 때만 사용한다.

스크립트가 길어지면 별개의 분리된 파일로 만들어 저장하는 것이 좋다.

스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시(cache)에 저장하기 때문에, 성능상의 이점이 있습니다.

여러 페이지에서 동일한 스크립트를 사용하는 경우, 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용한다. 스크립트 파일을 한 번만 다운받으면 되는 것

 

이를 통해 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라진다고 한다.

 

<script> 태그는 src 속성과 내부 코드를 동시에 가지지 못한다.

다음 코드는 실행되지 않는다.

<script src="file.js">
  alert(1); // src 속성이 사용되었으므로 이 코드는 무시되는 것
</script>

따라서 <script src="…">로 외부 파일을 연결할지 아니면 <script> 태그 내에 코드를 작성할지를 선택해야 한다.

위의 예시는 스크립트 두 개로 분리하면 정상적으로 실행된다.

<script src="file.js"></script>
<script>
  alert(1);
</script>

 

문

문(statement)은 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미

 

세미콜론

줄 바꿈이 있다면 세미콜론(semicolon)을 생략할 수 있다.

아래 코드는 에러 없이 동작한다.

 

alert('Hello')
alert('World')

자바스크립트는 줄 바꿈이 있으면 이를 ‘암시적’ 세미콜론으로 해석한다.

이런 동작 방식을 세미콜론 자동 삽입(automatic semicolon insertion)이라 부른다.

대부분의 경우, 줄 바꿈은 세미콜론을 의미하지만  '대부분의 경우’가 '항상’을 의미하진 않는다.

아래와 같이 줄 바꿈이 세미콜론을 의미하지 않는 경우도 있다.

alert(3 +
1
+ 2);

세미콜론 자동 삽입이 일어나지 않았기 때문에 6이 출력된다.

 

반면, 세미콜론이 정말로 필요하지만 자바스크립트가 이를 추정하지 ‘못하는’ 상황도 존재한다.

 

에러 예제)

자바스크립트가 세미콜론을 자동으로 삽입해주지 못하는 구체적인 상황은 다음과 같다.

[1, 2].forEach(alert)

코드를 실행하면 결과가 1과 2가 출력된다

이제 위에서 작성한 코드 앞쪽에 세미콜론을 붙이지 않은 채 alert를 추가해보기 !

 

alert("에러가 발생합니다.")

[1, 2].forEach(alert)

예제를 실행해보면 alert만 실행되고 아래 forEach문을 실행되지 않는다. 

alert 끝에 세미콜론을 추가해 다시 실행하면 코드는 잘 작동한다.

 

 

alert("제대로 동작합니다.");

[1, 2].forEach(alert)

세미콜론이 없을 때 에러가 발생했던 이유는 자바스크립트가 대괄호 [...]앞에는 세미콜론이 있다고 가정하지 않기 때문

 

엄격 모드

자바스크립트는 꽤 오랫동안 호환성 이슈 없이 발전해왔고, 기존의 기능을 변경하지 않으면서 새로운 기능이 추가되었다.

덕분에 기존에 작성한 코드는 절대 망가지지 않는다는 장점이 있었다.

하지만 자바스크립트 창시자들이 했던 실수나 불완전한 결정이 언어 안에 영원히 박제된다는 단점도 생겼다.

이런 상황은 ECMAScript5(ES5)가 등장하기 전인 2009년까지 지속되었다.

새롭게 제정된 ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었다. 기존 기능을 변경하였기 때문에 하위 호환성 문제가 생길 수 있었고, 변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 설계되었다. 대신 use strict라는 특별한 지시자를 사용해 엄격 모드(strict mode)를 활성화 했을 때만 이 변경사항이 활성화되게 해놓았다.

use strict

지시자 "use strict", 혹은 'use strict'는 단순한 문자열처럼 생겼지만  이 지시자가 스크립트 최상단에 오면 스크립트 전체가 “모던한” 방식으로 동작한다.

예시:

"use strict";
...

 

 

alert("some code");
// 하단에 위치한 "use strict"는 스크립트 상단에 위치하지 않으므로 무시된다.

"use strict";

// 엄격 모드가 활성화되지 않는다.

"use strict"의 위에는 주석만 사용할 수 있다.

use strict를 취소할 방법은 없다.

자바스크립트 엔진을 이전 방식으로 되돌리는 "no use strict"같은 지시자는 존재하지 않는다.

 

 

브라우저 콘솔

개발한 기능을 테스트하기 위해 브라우저 콘솔을 사용하는 경우, 기본적으로 use strict가 적용되어있지 않는다는 점에 주의해야 한다.

 

>콘솔에서 use strict 사용 방법

'use strict’를 입력한 후, Shift+Enter키를 눌러 줄 바꿈 해 원하는 스크립트를 입력하면 된다. 

'use strict'; <Shift+Enter를 눌러 줄 바꿈 함>
//  ...테스트하려는 코드 입력
<Enter를 눌러 실행>

이 기능은 Firefox와 Chrome 같은 유명한 브라우저에서 대부분 사용 가능하다.

use strict를 적용하는 가장 확실한 방법은 아래와 같이 코드를 래퍼로 감싸면 된다.

(function() {
  'use strict';

  // ...테스트하려는 코드...
})()

 

 

변수와 상수

대다수의 자바스크립트 애플리케이션은 사용자나 서버로부터 입력받은 정보를 처리하는 방식으로 동작한다.

1. 온라인 쇼핑몰 – 판매 중인 상품이나 장바구니 등의 정보
2. 채팅 애플리케이션 – 사용자 정보, 메시지 등의 정보

변수는 이러한 정보를 저장하는 용도로 사용된다.

변수

변수(variable)는 데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’ 

자바스크립트에선 let 키워드를 사용해 변수를 생성한다. 

아래 문(statement)은 'message’라는 이름을 가진 변수를 생성(선언)한다.

let message;

let message;

message = 'Hello'; // 문자열을 저장합니다.

문자열이 변수와 연결된 메모리 영역에 저장되었기 때문에, 변수명을 이용해 문자열에 접근할 수 있게 되었다.

 

 

let message;
message = 'Hello!';

alert(message); // 변수에 저장된 값을 보여줍니다.

 

 

아래와 같이 변수 선언과 값 할당을 한 줄에 작성할 수도 있다.

let message = 'Hello!'; // 변수를 정의하고 값을 할당합니다.

alert(message); // Hello!

 

 

 

 

 

 

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

변수는 한 번만 선언해야 한다.

let message = "This";

// 'let'을 반복하면 에러가 발생한다
let message = "That"; // SyntaxError: 'message' has already been declared

따라서 변수는 딱 한 번만 선언하고, 선언한 변수를 참조할 때는 let 없이 변수명만 사용해 참조해야 한다.

 

 

함수형 언어

함수형(functional) 프로그래밍 언어는 변숫값 변경을 금지한다.

 스칼라(Scala)와 얼랭(Erlang)은 대표적인 함수형 언어

이들 언어에서는 ‘상자 속에’ 값이 일단 저장되면, 그 값을 영원히 유지한다. 

 

변수 명명 규칙

자바스크립트에선 변수 명명 시 두 가지 제약 사항이 있다.

1. 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있다.
2. 첫 글자는 숫자가 될 수 없다.

 

아래는 유효한 변수명 예시

let userName;
let test123;

여러 단어를 조합하여 변수명을 만들 땐 카멜 표기법(camelCase)이 흔히 사용된다.

카멜 표기법은 단어를 차례대로 나열하면서 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성한다. 

myVeryLongName 처럼! 

 

아래처럼 변수명 선언 가능

let $ = 1; // '$'라는 이름의 변수를 선언
let _ = 2; // '_'라는 이름의 변수를 선언

alert($ + _); // 3

 

아래는 잘못된 변수명의 예시

let 1a; // 변수명은 숫자로 시작해선 안된다.

let my-name; // 하이픈 '-'은 변수명에 올 수 없다.

 

대·소문자 구별

apple와 AppLE은 서로 다른 변수이다.

 

예약어

예약어(reserved name) 목록에 있는 단어는 변수명으로 사용할 수 없다.

이 단어들은 자바스크립트 내부에서 이미 사용 중이기 때문!

 

예약어 예시: let, class, return, function

 

아래 코드는 문법 에러를 발생시킨다

 

let let = 5; // 'let'을 변수명으로 사용할 수 없으므로 에러!
let return = 5; // 'return'을 변수명으로 사용할 수 없으므로 에러!

 

use strict 없이 할당하기

 

변수는 대개 정의되어 있어야 사용할 수 있습니다. 그러나 예전에는 let 없이도 단순하게 값을 할당해 변수를 생성하는 것이 가능했다. 

use strict를 쓰지 않으면 과거 스크립트와의 호환성을 유지할 수 있기 때문에 여전히 이 방식을 사용할 수 있다.

 

 

// 참고: 이 예제에는 "use strict"가 없다.

num = 5; // 변수 'num'이 정의되어있지 않더라도, 단순 할당만으로 변수가 생성된다.

alert(num); // 5

이렇게 변수를 생성하는 것은 나쁜 관습이라고 한다. 엄격 모드에서 에러를 발생시키기 때문

"use strict";

num = 5; // error: num is not defined

상수

변화하지 않는 변수를 선언할 땐, let 대신 const를 사용한다.

const myBirthday = '18.04.1982';

이렇게 const로 선언한 변수를 '상수(constant)'라고 부른다.

상수는 재할당할 수 없으므로 상수를 변경하려고 하면 에러가 발생한다.

 

 

const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; // error, can't reassign the constant!

변숫값이 절대 변경되지 않을 것이라 확신하면, 값이 변경되는 것을 방지하면서 다른 개발자들에게 이 변수는 상수라는 것을 알리기 위해 const를 사용해 변수를 선언하도록 하기!!

 

 

대문자 상수

기억하기 힘든 값을 변수에 할당해 별칭으로 사용하는 것은 널리 사용되는 관습

이런 상수는 대문자와 밑줄로 구성된 이름으로 명명한다.

 

 

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// 색상을 고르고 싶을 때 별칭을 사용할 수 있게 되었다.
let color = COLOR_ORANGE;
alert(color); // #FF7F00

 

'상수’는 변수의 값이 절대 변하지 않음을 의미한다.

그중에는 (빨간색을 나타내는 16진수 값처럼) 코드가 실행되기 전에 이미 그 값을 알고 있는 상수도 있고, 런타임 과정에서 계산되지만 최초 할당 이후 값이 변하지 않는 상수도 있다.

예시:

const pageLoadTime = /* 웹페이지를 로드하는데 걸린 시간 */;

pageLoadTime의 값은 페이지가 로드되기 전에는 정해지지 않기 때문에 일반적인 방식으로 변수명을 지은것

하지만 이 값은 최초 할당 이후에 변경되지 않으므로 여전히 상수이다.

 

 

과제

변수 가지고 놀기

중요도: 2

1. admin과 name이라는 변수를 선언하세요.

let admin = 'a'

let name = 'b'

1. name에 값으로 "John"을 할당해 보세요.

name = "John"

1. name의 값을 admin에 복사해 보세요.

admin = name

1. admin의 값을 alert 창에 띄워보세요. "John"이 출력되어야 합니다.

alert(admin)

 

 

올바른 이름 선택하기

중요도: 3

1. 현재 우리가 살고있는 행성(planet)의 이름을 값으로 가진 변수를 만들어보세요. 변수 이름은 어떻게 지어야 할까요?

const ourPlanet = "EARTH"

1. 웹사이트를 개발 중이라고 가정하고, 현재 접속 중인 사용자(user)의 이름(name)을 저장하는 변수를 만들어보세요. 변수 이름은 어떻게 지어야 할까요?

let user = "a"

let userName = "b"

 

대문자 상수 올바로 사용하기

중요도: 4

아래 코드를 평가해 보시기 바랍니다.

const birthday = '18.04.1982';

const age = someCode(birthday);

위 코드의 상수 birthday는 태어난 날짜 정보를 담고 있습니다. age라는 상수는 나이에 관한 값을 담고 있는데 birthday를 조작하여 그 값을 도출합니다

이런 상황에서 birthday를 대문자 상수로 바꾸는 것이 적절할까요? age 역시 대문자 상수로 바꾸는 것이 괜찮은 선택일까요?

 

--> 아니용, birthday는 사람마다 다르니 계속 값이 바뀌어야하기 때문에 const로 쓰면 안될 것 같아욤

 

const BIRTHDAY = '18.04.1982'; // 대문자 상수로 바꿔도 괜찮을까요?

const AGE = someCode(BIRTHDAY); // 대문자 상수로 바꿔도 괜찮을까요?

변수와 상수