Web/Vanilla JS

Modern Javascript / 자바스크립트 기본

KimMinJun 2021. 6. 28. 14:19

'script 태그'

<script> 태그를 이용하면 자바스크립트 프로그램을 HTML 문서 대부분의 위치에 삽입할 수 있다.

(간단한 경우에만 사용하는 것이 좋다.)

<!DOCTYPE html>
<html>
    <head>
    	<title>Script Tag</title>
    </head>
    
    <body>
    	<p>스크립트 전</p>
        
        <script>
        	alert("Hello World!");
        </script>
        
        <p>스크립트 후</p>
    </body>
</html>

 

 

외부 스크립트

자바스크립트 코드의 양이 많은 경우에, 외부에 따로 작성하여 저장한다.

저장한 js파일은 src속성을 사용해 HTML에 삽입한다.

<script src="/path/to/script.js"></script> // 절대 경로
<script src="https://www.aaaa.com/.../.../script.js"></script> // URL을 속성으로 사용

// 복수의 스크립트를 사용하고 싶다면 여러번 사용하면 된다.

 

<참고>

스크립트를 별도의 파일에 작성하면 스크립트를 다운받아 캐시에 저장하게 된다.

따라서 여러 페이지에 동일한 스크립트를 사용하는 경우, 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고,

캐시에 저장된 스크립트를 불러와 사용하게 된다.

따라서 성능상의 이점이 있고 속도가 빨라지게 된다.

코드 구조

 

주석

// 한 줄 주석
alert("공부 시러");

/* 여러 줄
주석
*/
alert("공부 노잼");
  • 한 줄 주석 단축키 : Ctrl + /
  • 여러 줄 주석 단축키 : Ctrl + Shift + /

(사용하는 에디터에 따라 단축키는 다를 수 있음)

변수와 상수

  • let - 변수 선언
  • var - let과 같지만 예전에 쓰이고 최근에는 잘 쓰이지 않음
  • const - 상수 선언(변하지 않는 값)

 

변수 명명 규칙

  1. 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있다.
  2. 첫 글자는 숫자가 될 수 없다.
  3. 대문자와 소문자를 구별한다.(apple과 Apple은 다르다)
  4. 예약어는 변수명으로 사용이 불가하다.(let, class, return, function)

자료형

 

숫자형

  • Infinity
  • NaN
  • 일반적인 숫자

 

BigInt

(2^53-1)보다 큰 값 혹은 -(2^53-1)보다 작은 정수를 나타낸다.

정수 리터럴 끝에 n을 붙이면 된다.

 

문자형

let str = "Hello";
let str2 = 'Single quotes are ok too';
let phrase = `can embed another ${str}`;

 

불린형

true | false

 

'null' 값

 

'undefined' 값

변수는 선언했지만, 값이 할당되지 않은 상태

 

객체와 심볼

 

typeof 연산자

typeof undefined // "undefined"

typeof 0 // "number"

typeof 10n // "bigint"

typeof true // "boolean"

typeof "foo" // "string"

typeof Symbol("id") // "symbol"

typeof Math // "object"

typeof null // "object"

typeof alert // "function"

형 변환

 

문자형으로 변환

String(value)함수를 호출해 전달받은 값을 문자열로 변환 할 수 있다.

let value = true;
alert(typeof value); // boolean

value = String(value); // boolean의 true가아니라 문자열 "true"가 저장
alert(typeof value); // string

 

숫자형으로 변환

숫자형으로의 변환은 수학과 관련된 함수와 표현에서 자동으로 일어난다.

숫자형이 아닌 값에 / 를 적용한 것이 예이다.

alert("6" / "2"); // 3

 

Number(value)나 parseInt(value)를 통해 숫자형으로 변환할 수 있다.

(둘의 차이점은 이 게시글을 참조하기 바람.)

2020.04.04 - [Web/Vanilla JS] - Vanilla JS / Number() 와 parseInt()

 

Vanilla JS / Number() 와 parseInt()

나는 학교에서 가르침을 받을때도, parseInt()만 배워서 Number()라는 것이 있는 줄 몰랐다. 알고리즘 문제를 풀면서, 내가 parseInt()를 사용한 자리에 Number()를 사용한 사람들을 보고 의구심이 들었다.

jun-coding.tistory.com

let str = "123";
alert(typeof str); // string

let num = Number(str); // "123"이 123으로 변환

alert(typeof num); // number

 

숫자형으로 변환 시 undefined와 null은 다르게 변환 된다.

Number("   123   "); // 123 (앞 뒤 공백이 제거되어 으로 변환)
Number("123z"); // NaN ("z"를 숫자로 변환하는데 실패)
// NaN = Not a Number
Number(true) // 1
Number(false) // 0

 

불린형으로 변환

  • 숫자 0, 빈 문자열, null, undefined, NaN과 같이 직관적으로 "비어있다"고 느껴지는 값들은 false가 됨.
  • 그 외의 값은 true로 변환
  • 문자열 "0"은 true이다.
Boolean(1) // 숫자 1(true)
Boolean(0) // 숫자 0(false)

Boolean("0") // 문자열 "0"(true)
Boolean("Hello") // 문자열(true)
Boolean("") // 빈 문자열(false)

null 병합 연산자 '??'

a ?? b의 평가 결과는 다음과 같다.

  • a가 null도 아니고 undefined도 아니면 a
  • 그 외의 경우는 b

 

'??'와 '||'의 차이

  • ||는 첫 번째 truthy 값을 반환한다.
  • ??는 첫 번째 정의된(defined) 값을 반환한다.
let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

// ?? 사용시 height가 null이나 undefined일 경우에만 100이 할당된다.

while과 for 반복문

  • while - 각 반복이 시작하기 전에 조건을 확인
  • do..while - 각 반복이 끝난 후에 조건을 확인
  • for(;;) - 각 반복이 시작하기 전에 조건을 확인. 추가 세팅 가능.

무한 반복문은 보통 while(true) 이용.

현재 실행 중인 반복에서 던은 무언가를 하지 않고 다음 반복으로 넘어가고 싶다면 continue 이용.

반복문 앞에 레이블을 붙이고, break / continue에 레이블을 함께 사용

 

break/continue와 레이블

outer: for(let i=0; i<3; i++) {
    for(let j=0; j<3; j++) {
    	let input = prompt(`(${i},${j})의 값`, '');
        
        // 사용자가 아무것도 입력하지 않거나 Cancel 버튼을 누르면 두 반복문 모두 빠져나온다
        if(!input) break outer;
        
        // input 처리 코드 생략
        ...
    }
}
alert("완료!");

레이블은 반드시 break나 continue위에 있어야 한다!

함수 표현식

자바스크립트는 함수를 특별한 종류의 값으로 취급한다.

다른 언어에서처럼 "특별한 동작을 하는 구조"로 취급되지 않는다.

function sayHi() {
	alert("Hello");
}

alert(sayHi); // 함수 코드가 보인다

// 위의 함수를 함수표현식으로 나타낸 것이다.
let sayHi = function() {
	alert("Hello");
};

 

function sayHi() { // (1) 함수 생성
	alert("Hello");
}    

let func = sayHi; // (2) 함수 복사

func(); // (3) 복사한 함수를 실행(정상적으로 실행)
sayHi(); //    본래 함수도 정상적으로 실행.
  1. (1)에서 함수 선언 방식을 이용해 함수를 생성한다. 생성한 함수는 sayHi라는 변수에 저장된다.
  2. (2)에선 sayHi를 새로운 변수 func에 복사한다. 이때 sayHi 다음에 괄호가 없다는 점에 유의해야 한다.
    괄호가 있었다면 func = sayHi()가 되어 sayHi 함수 자체가 아니라, 함수 호출 결과가 func에 저장되었을 것이다.
  3. 이젠 sayHi()와 func()로 함수를 호출할 수 있다.

 

콜백 함수

function ask(question, yes, no) {
    if(confirm(question)) yes()
    else no();
}

function showOk() {
	alert("동의하셨습니다.");
}

function showCancel() {
	alert("취소 버튼을 누르셨습니다.");
}

// 사용법 : 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨
ask("동의하십니까?", showOk, showCancel);

함수 ask의 인수, showOk와 showCancel은 콜백 함수 또는 콜백이라고 불린다.

 

function ask(question, yes, no) {
    if(confirm(question)) yes()
    else no();
}

ask(
	"동의하십니까?",
    function() { alert("동의하셨습니다"); },
    function() { alert("취소 버튼을 누르셨습니다."); }
);

 

함수 표현식 vs 함수 선언문

  • 함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을때 함수를 생성한다.
    따라서 실행 흐름이 함수에 도달했을 때부터 해당 함수를 사용할 수 있다.
  • 함수 선언문은 함수 선언문이 정의되기 전에도 호출할 수 있다.
  • 엄격 모드에서 함수 선언문이 코드 블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근할 수 있다.
    하지만 블록 밖에서는 함수에 접근하지 못한다.

화살표 함수 기본

let func = (arg1, arg2, ...argN) => expression

- 이렇게 하면 인자 arg1, arg2, ...argN을 인자로 갖는 func 함수가 만들어진다.

- 함수 func는 화살표(=>) 우측의 표현식을 평가하고, 평가 결과를 반환한다.

 

// 위 함수와 같다
let func = function(arg1, arg2, ...argN) {
	return expression;
};
저작자표시