2.1 Hello, world!
요약
웹 페이지에 자바스크립트 코드를 추가하기 위해<script>태그를 사용합니다.
type 과 language 속성은 필수가 아닙니다.
외부 스크립트 파일은<script src="path/to/script.js"></script>와 같이 삽입합니다.
script 태그
<script> 태그를 이용하여 HTML 문서 대부분의 위치에 삽입할 수 있음
모던 마크업
<script> 태그의 몇 가지 속성(attribute)
type속성 : HTML4에서는 명시가 필수였지만, 이제는 아니고, 모던 HTML에서는 모듈을 사용할 때에 필요language속성 : 현재는 자바스크립트가 기본 언어이므로 필요 없음
외부 스크립트
파일로 소분하여 저장하고 아래와 같이 불러올 수 있음
- 절대경로
<script src="/path/script.js"></script> - 상대경로
<script src="script.js"></script> - URL
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시에 저장하기 때문에 성능상의 이점이 있음
한 번만 다운받기 때문에 속도가 빨라짐script 태그는 src 속성과 내부 코드를 동시에 가지지 못함
아래와 같은 경우 내부 코드는 무시됨
<script src="file.js">alert(1);</script>
2.2 코드 구조
문(statement)
서로 다른 문은 세미콜론으로 구분
세미콜론(;)
줄바꿈이 있으면 암시적 세미콜론으로 해석(세미콜론 자동 삽입)
🚨 대활호(
[...]) 앞에는 세미콜론이 있다고 가정하지 않음
주석
// 줄 주석
/* 범위 주석 */
2.3 엄격 모드
새롭게 제정된 ECMAScript5(ES5)에서 새로운 기능이 추가되고 기존 기능 중 일부가 변경됨
하위 호환성 문제로 변경사항 대부분은 기본모드에서 활성화되지 않도록 설계
use strict라는 지시자를 최상단에 위치시켜 엄격모드를 활성화 했을 때에만 변경사항이 활성화됨.
class 혹은 module 구조를 사용하면 use strict가 자동으로 적용되므로 use strict를 작성할 필요가 없음
2.4 변수와 상수
요약
var, let, const를 사용해 변수를 선언할 수 있습니다. 선언된 변수엔 데이터를 저장할 수 있죠.
let – 모던한 변수 선언 키워드입니다.
var – 오래된 변수 선언 키워드입니다. 잘 사용하지 않습니다. let과의 미묘한 차이점은 오래된 'var' 챕터에서 다루도록 하겠습니다.
const – let과 비슷하지만, 변수의 값을 변경할 수 없습니다.
변수명은 변수가 담고 있는 것이 무엇인지 쉽게 알 수 있도록 지어져야 합니다.
변수(let)
이름 붙은 저장소(가변적인 데이터 저장)
let message
message = "Hello"
let number = 123
message라는 이름표가 붙은 상자에"Hello"라는 값을 저장한 것이라고 생각
어떤 값이든 넣을 수 있으며 값이 변경되면 이전 데이터는 변수에서 제거 됨.
변수 명명 규칙
- 문자, 숫자,
$,_ - 첫글자는 숫자가 될 수 없음
카멜 표기법을 주로 사용
myVeryLongName예약어 목록에 있는 단어는 변수명으로 사용 불가
ex)let,class,return,function
상수(const)
변화하지 않는 데이터를 선언할 때에는 const를 사용
선언된 변수를 변경하려고 하면 에러 발생
대문자 상수(관습)
기억하기 힘든 값을 변수에 할당해 별칭으로 사용
ex)const COLOR_ORANGE = "#FF7F00";
바람직한 변수명
- 사람이 읽을 수 있는 이름을 사용
- 줄임말, 의미없는 단어나 스펠링을 피함
- 자신만의 혹은 팀의 규칙을 따름
재사용보다 새로 만들기
변수 내부에 어떤 데이터가 있는지, 변경되지는 않았는지 등 디버깅하는데 어려움
2.5 자료형
요약
자바스크립트에는 여덟 가지 기본 자료형이 있습니다.
숫자형 – 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용합니다. 정수의 한계는 ±253 입니다.
bigint – 길이 제약 없이 정수를 나타낼 수 있습니다.
문자형 – 빈 문자열이나 글자들로 이뤄진 문자열을 나타낼 때 사용합니다. 단일 문자를 나타내는 별도의 자료형은 없습니다.
불린형 – true, false를 나타낼 때 사용합니다.
null – null 값만을 위한 독립 자료형입니다. null은 알 수 없는 값을 나타냅니다.
undefined – undefined 값만을 위한 독립 자료형입니다. undefined는 할당되지 않은 값을 나타냅니다.
객체형 – 복잡한 데이터 구조를 표현할 때 사용합니다.
심볼형 – 객체의 고유 식별자를 만들 때 사용합니다.
typeof 연산자는 피연산자의 자료형을 알려줍니다.
typeof x 또는 typeof(x) 형태로 사용합니다.
피연산자의 자료형을 문자열 형태로 반환합니다.
null의 typeof 연산은 "object"인데, 이는 언어상 오류입니다. null은 객체가 아닙니다.
이어지는 챕터에선 원시 자료형에 대해 학습해 볼 예정입니다. 원시형에 어느 정도 익숙해지면 객체형에 대해 알아보도록 하겠습니다.
자바스크립트는 동적 타입 언어임
‘동적 타입(dynamically typed)’ 언어 : 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어
여덟 가지 기본 자료형 : Number(숫자형), BigInt, String(문자형), Boolean(불린형), Null, Undefined, Object(객체), Symbol(심볼)
💡 Array? JavaScript에서 Array는 객체(Object)에 속함
Number(숫자형)
정수 및 부동소수점 숫자 이외에도 Infinity, -Infinity, NaN같은 '특수 숫자 값(special numeric value)'이 포함
Infinity: 무한대()
NaN: 계산 중 에러가 발생함
BigInt(빅인트)
보다 큰 값 혹은 보다 작은 정수
BigInt형 값은 정수 리터럴 끝에 n을 붙여 만듦
const bigInt = 1234567890123456789012345678901234567890n;
String(문자형)
let str1 = "hello" // 큰따옴표
let str2 = 'hello' // 작은따옴표
let str3 = `hello` // 역따옴표(백틱)
console.log(`${str1} World!`) // hello world!보간법 `${...}`
`` 백틱 안에
$를 추가하고중괄호로 묶고 ... 에 변수 혹은 표현식을 넣을 수 있음
Boolean(불린형)
긍정 true 또는 부정 false
Null
'존재하지 않는(nothing)’ 값
‘비어 있는(empty)’ 값
‘알 수 없는(unknown)’ 값
let age = null;undefined
'값이 할당되지 않은 상태’
변수는 선언했지만, 값을 할당하지 않은 상태
let age;
console.log(age); // undefinedundefined를 직접 할당할 수는 있지만 권장되지 않음.
변수가 ‘비어있거나’ ‘알 수 없는’ 상태라는 걸 나타내려면 null을 사용
undefined는 값이 할당되지 않은 변수의 초기값을 위해 예약어로 남겨둠
Object & Symbol(객체와 심볼)
- 객체는 데이터 컬렉션이나 복잡한 개체(entity)를 표현
- 심볼(symbol)형은 객체의 고유한 식별자(unique identifier)를 만들 때 사용
객체형을 제외한 다른 자료형은 문자열이든 숫자든 한 가지만 표현할 수 있기 때문에 원시(primitive) 자료형
Mae(매형)
매형은 꿀을 빨고 있으니, 다음에 알아보도록 하자
typeof 연산자
typeof 연산자는 인수의 자료형을 반환
typeof 0 // "number"
typeof true // "boolean"
typeof null // "object"
typeof alert // "function"
typeof null의 결과는 "object"
하위 호환성을 유지하기 위해 이런 오류를 수정하지 않고 남겨둔 상황.
언어 자체의 오류이므로 null이 객체가 아님에 유의
typeof alert'함수’형은 따로 없음
하위 호완성 유지를 위해 남겨진 상태
한편, 실무에선 이런 특징이 매우 유용하게 사용되기도 함
2.6 alert, prompt, confirm을 이용한 상호작용
요약
브라우저는 사용자와 상호작용할 수 있는 세 가지 함수를 제공합니다.
alert
메시지를 보여줍니다.
prompt
사용자에게 텍스트를 입력하라는 메시지를 띄워줌과 동시에, 입력 필드를 함께 제공합니다. 확인을 누르면 prompt 함수는 사용자가 입력한 문자열을 반환하고, 취소 또는 Esc를 누르면 null을 반환합니다.
confirm
사용자가 확인 또는 취소 버튼을 누를 때까지 메시지가 창에 보여집니다. 사용자가 확인 버튼을 누르면 true를, 취소 버튼이나 Esc를 누르면 false를 반환합니다.
위 함수들은 모두 모달 창을 띄워주는데, 모달 창이 떠 있는 동안은 스크립트의 실행이 일시 중단됩니다. 사용자가 창을 닫기 전까진 나머지 페이지와 상호 작용이 불가능합니다.
지금까지 살펴본 세 함수엔 두 가지 제약사항이 있습니다.
모달 창의 위치는 브라우저가 결정하는데, 대개 브라우저 중앙에 위치합니다.
모달 창의 모양은 브라우저마다 다릅니다. 개발자는 창의 모양을 수정할 수 없습니다.
이런 제약사항은 간결성을 위해 치러야 할 대가입니다. 창을 더 멋지게 꾸미고 복잡한 상호작용을 가능하게 해주는 다른 방법도 있긴 하지만, '멋을 위한 부가 기능’이 필요하지 않다면 지금까지 소개해드린 기본 메서드만으로 충분합니다.
alert
alert("Hello");
함수가 실행되면 사용자가 ‘확인(OK)’ 버튼을 누를 때까지 메시지를 보여주는 창
prompt
result = prompt(title, [default]);
함수가 실행되면 텍스트 메시지와 입력 필드(input field), 확인(OK) 및 취소(Cancel) 버튼이 있는 모달 창
title: 사용자에게 보여줄 문자열
default: 입력 필드의 초깃값(선택값)
let age = prompt('나이를 입력해주세요.', 100);
alert(`당신의 나이는 ${age}살 입니다.`); // 당신의 나이는 100살입니다.confirm
result = confirm(question);
확인버튼를 누르면 true, 그 외의 경우는 false를 반환
let isBoss = confirm("당신이 주인인가요?");
alert( isBoss ); // 확인 버튼을 눌렀다면 true가 출력됩니다.2.7 형 변환
형 변환(type conversion): 함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환됨.
(객체의 형변환은 추후 챕터에서 다룸)
문자형으로 변환
문자형으로의 형 변환은 문자형의 값이 필요할 때 일어남
명시적 형변환: String(value)
숫자형으로 변환
숫자형으로의 변환은 수학과 관련된 함수와 표현식에서 자동으로 일어남
명시적 형변환: Number(value)
let age = Number("임의의 문자열 123");
alert(age); // NaN, 형 변환이 실패
alert( Number(" 123 ") ); // 123
alert( Number("123z") ); // NaN ("z"를 숫자로 변환하는 데 실패함)
alert( Number(true) ); // 1
alert( Number(false) ); // 0
alert( Number(null) ); // 🚨 0
alert( Number(undefined) ); // 🚨 NaN불린형으로 변환
false: 숫자 0, 빈 문자열, null, undefined, NaN과 같이 직관적으로도 “비어있다고” 느껴지는 값들
true: 그 외의 값
명시적 형변환: Boolean(value)
🚨 문자열
"0"은true'0'이라는 문자가 있음
🚨 문자열" "은true'공백'이라는 문자가 있음
2.8 기본 연산자와 수학
용어: ‘단항’, ‘이항’, ‘피연산자’
피연산자(operand): 연산자가 연산을 수행하는 대상
ex) 5 * 2: 5와 2. 총 2개의 피연산자
단항(unary) 연산자: 피연산자를 하나만 받는 연산자
ex) let x = 1; x = -x;
이항(binary) 연산자: 두 개의 피연산자를 받는 연산자
ex) let x = 1; let y = 3; y - x;
수학
덧셈 연산자 +,
뺄셈 연산자 -,
곱셈 연산자 *,
나눗셈 연산자 /,
나머지 연산자 %,
거듭제곱 연산자 **
나머지 연산자 %
a % b는 a를 b로 나눈 후 그 나머지(remainder)를 정수로 반환
ex) alert(5 % 2) // 5를 2로 나눈 나머지 1 출력
거듭제곱 연산자 **
a ** b를 평가하면 a를 b번 곱한 값이 반환
ex1) alert(2 ** 3) // 8(2의 3승)
ex2) alert( 4 ** (1/2) ); // 2 (1/2 거듭제곱은 제곱근)
이항 연산자 '+'와 문자열 연결
+의 피연산자로 문자열이 전달되면 덧셈 연산자는 덧셈이 아닌 문자열을 병합(연결)
let s = "my" + "string";
alert(s); // mystring
alert( '1' + 2 ); // "12"
alert(2 + 2 + '1' ); // '221'이 아니라 '41'
alert( 6 - '2' ); // 4, '2'를 숫자로 바꾼 후 연산 진행
alert( '6' / '2' ); // 3, 두 피연산자가 숫자로 바뀐 후 연산 진행단항 연산자 '+'와 숫자형으로의 변환
숫자형이 아닌 피연산자는 숫자형으로 변환
Number(...)와 같은 효과
alert( +true ); // 1
alert( +"" ); // 0연산자 우선순위
우선순위 테이블(precedence table)
괄호는 모든 연산자보다 우선순위가 높기 때문에 자바스크립트에서 정의한 연산자 우선순위를 무력화시킴
🚨 동일한 기호의 단항 연산자는 이항 연산자보다 우선순위가 더 높다는 것에 주목
할당 연산자
=, 우선순위는 3으로 아주 낮음
값을 반환하는 할당 연산자(지양)
x = value을 호출하면 value가 x에 쓰여지고, 이에 더하여 value가 반환.
할당 연산자 체이닝(지양)
a = b = c = 2 + 2;
복합 할당 연산자
let n = 2;
n += 5; // n은 7(n = n + 5와 동일)
n *= 2; // n은 14(n = n * 2와 동일)증가·감소 연산자
숫자를 하나 늘리거나 줄임
let counter = 2;
counter++; // counter = counter + 1과 동일
counter--; // coutner = counter -1과 동일🚨 증가/감소 연산자는 변수에만 쓸 수 있음.
5++와 같이 값에 사용하려고 하면 에러 발생
후위형
counter++
let counter = 1;
let a = ++counter; // 1을 더해서 a에 할당
alert(a); // 2전위형
++counter
let counter = 1;
let a = counter++; // a에 할당한 후 1을 더함
alert(a); // 1비트 연산자
비트 연산자(bitwise operator)는 인수를 32비트 정수로 변환하여 이진 연산을 수행
비트 AND ( & )
비트 OR ( | )
비트 XOR ( ^ )
비트 NOT ( ~ )
왼쪽 시프트(LEFT SHIFT) ( << )
오른쪽 시프트(RIGHT SHIFT) ( >> )
부호 없는 오른쪽 시프트(ZERO-FILL RIGHT SHIFT) ( >>> )
쉼표 연산자
이때 표현식 각각이 모두 평가되지만, 마지막 표현식의 평가 결과만 반환되는 점에 유의
let a = (1 + 2, 3 + 4);
alert( a ); // 7 (3 + 4의 결과)
// 한 줄에서 세 개의 연산이 수행됨
for (a = 1, b = 3, c = a * b; a < 10; a++) {
...
}2.9 비교 연산자
요약
비교 연산자는 불린값을 반환합니다.
문자열은 문자 단위로 비교되는데, 이때 비교 기준은 '사전’순입니다.
서로 다른 타입의 값을 비교할 땐 숫자형으로 형 변환이 이뤄지고 난 후 비교가 진행됩니다(일치 연산자는 제외).
null과 undefined는 동등 비교(==) 시 서로 같지만 다른 값과는 같지 않습니다.
null이나 undefined가 될 확률이 있는 변수가 > 또는 <의 피연산자로 올 때는 주의를 기울이시기 바랍니다. null, undefined 여부를 확인하는 코드를 따로 추가하는 습관을 들이길 권유합니다.
보다 큼·작음: a > b, a < b
보다 크거나·작거나 같음: a >= b, a <= b
같음(동등): a == b. 등호 =가 두 개 연달아 오는 것에 유의하세요. a = b와 같이 등호가 하나일 때는 할당을 의미합니다.
같지 않음(부등): 같지 않음을 나타내는 수학 기호 ≠는 자바스크립트에선 a != b로 나타냅니다. 할당연산자 = 앞에 느낌표 !를 붙여서 표시합니다.
불린형 반환
let result = 5 > 4; // 비교 결과를 변수에 할당
alert( result ); // true문자열 비교
자바스크립트는 '사전’순, 정확히는 유니코드 순으로 문자열을 비교
다른 형을 가진 값 간의 비교
비교하려는 값의 자료형이 다르면 자바스크립트는 이 값들을 숫자형으로 변환함
일치 연산자
동등 연산자(equality operator) ==은 0과 false를 구별하지 못함(묵시적 형변환)
alert( 0 == false ); // true
alert( '' == false ); // true일치 연산자(strict equality operator) ===를 사용하면 형 변환 없이 값을 비교할 수 있음
alert( 0 === false ); // false, 피연산자의 형이 다르기 때문null이나 undefined와 비교하기
alert( null === undefined ); // false
alert( null == undefined ); // truenull vs 0
alert( null > 0 ); // (1) false
alert( null == 0 ); // (2) false
alert( null >= 0 ); // (3) true(1), (3): null이 숫자형으로 변환돼 0으로
(2): 동등 연산자 ==는 피연산자가 undefined나 null일 때 형 변환을 하지않음. undefined와 null을 비교하는 경우에만 true를 반환하고, 그 이외의 경우(null이나 undefined를 다른 값과 비교할 때)는 무조건 false를 반환
비교가 불가능한 undefined
alert( undefined > 0 ); // false (1)
alert( undefined < 0 ); // false (2)
alert( undefined == 0 ); // false (3)함정 피하기
- 일치 연산자 ===를 제외한 비교 연산자의 피연산자에 undefined나 null이 오지 않도록 특별히 주의
- 또한, undefined나 null이 될 가능성이 있는 변수가 <, >, <=, >=의 피연산자가 되지 않도록 주의
📚 참고 : javascript.info
