[JavaScript] The Modern JavaScript Tutorial - (2-15) Functions
2021. 4. 30. 00:59
JavaScript/The Modern Tutorial JS
함수 함수는 프로그램을 구성하는 주요 '구성 요소(building block)'이다. 함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러 번 호출할 수 있다. 함수 선언 function name(parameters) { // 함수 본문 } function 키워드, 함수 이름, 괄호로 둘러싼 매개변수를 차례로 쓰면 함수를 선언할 수 있다. 매개변수가 없을 수도 있으며, 만약 매개변수가 여러 개 있다면 각 매개변수를 콤마로 구분한다. 이어서 함수 본문(body)을 중괄호로 감싸 붙여 주면 된다. 새롭게 정의한 함수는 함수 이름 옆에 괄호와 매개변수를 붙여서 호출할 수 있다. function showMessage() { alert("안녕하세요!"); } showMessage(); showMessage(..
[JavaScript] The Modern JavaScript Tutorial - (2-14) The "switch" statement
2021. 4. 29. 23:51
JavaScript/The Modern Tutorial JS
switch문 복수의 if문은 switch문으로 변경할 수 있다. 문법 switch문은 하나 이상의 case문으로 구성된다. default문도 있으나, 필수는 아니다. switch(x) { case 'value1': // if (x === 'value1') break; case 'value2': break; case 'value3': break; default: break; } 변수 x의 값과 case의 값을 일치 비교한다. x의 값과 일치하는 값을 찾으면 해당 case문 아래의 코드가 실행된다. 이때, break문을 만나거나 switch문이 끝나면 코드의 실행이 멈춘다. 일치하는 case가 없다면 default문 아래의 코드가 실행된다. (단, default문이 있는 경우에만) 예시 let a = 2 ..
[JavaScript] The Modern JavaScript Tutorial - (2-13) Loops: while and for
2021. 4. 26. 21:10
JavaScript/The Modern Tutorial JS
'while' 반복문 while (condition) { // 반복문의 body } condition이 truthy라면 반복문 body가 실행된다. let i = 0; while (i < 3) { alert(i); i++; } 반복문 body가 한 번 실행되는 걸 반복(iteration)이라고 한다. 위 예시에서는 세 번의 iteration을 만든다. let i = 3; while (i) { // i가 0이 되면 조건이 falsy가 되므로 반복문이 멈춘다. alert(i); i--; } 'do...while' 반복문 do { // 반복문 본문 } while (condition); body가 먼저 실행되고, 조건을 확인한 후 조건이 truthy인 동안에 body가 계속 실행된다. 조건이 truthy인지 아..
[JavaScript] The Modern JavaScript Tutorial - (2-12) Nullish coalescing operator '??'
2021. 4. 22. 21:06
JavaScript/The Modern Tutorial JS
개요 null 병합 연산자(Nullish coalescing operator) ??를 사용하면, 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어 있는' 변수를 찾을 수 있다. a ?? b의 평가 결과는 다음과 같다. a가 null도 아니고 undefined도 아니면 a 그 외의 경우는 b let firstName = null; let lastName = null; let nickName = "Supercoder"; // null or undefined가 아닌 첫 번째 피연산자 alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder '??'와 '||'의 차이 ||는 첫 번째 truthy 값을 반환한다. ??는 첫 번째 정의된(def..
[JavaScript] The Modern JavaScript Tutorial - (2-11) Logical operators
2021. 4. 21. 22:13
JavaScript/The Modern Tutorial JS
자바스크립트에는 세 종류의 논리 연산자 ||, &&, !가 있다. || (OR) result = a || b; 인수 중 하나라도 true이면 true를 반환하고, 그렇지 않으면 false를 반환한다. 즉, 피연산자가 모두 false인 경우를 제외하고는 연산 결과가 항상 true이다. alert(true || true); // true alert(false || true); // true alert(true || false); // true alert(false || false); // false 피연산자가 불린형이 아니면, 평가를 위해 불린형으로 변환된다. if (1 || 0) { // if (true || false) alert('truthy!'); } OR 연산자 ||는 if문에서 자주 사용되며, 주..
[JavaScript] The Modern JavaScript Tutorial - (2-10) Conditional branching: if, '?'
2021. 4. 19. 21:50
JavaScript/The Modern Tutorial JS
'if'문 if(...)문은 괄호 안에 들어가는 조건을 평가하고, 그 결과가 true이면 코드 블록이 실행된다. 멀티라인은 중괄호 {}로 감싼다. let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', ''); if (year == 2015) alert('정답입니다!'); if (year == 2015) { alert("정답입니다!"); alert("아주 똑똑하시네요!"); } 불린형으로의 변환 if (...) 문은 괄호 안의 표현식을 평가하고, 그 결과를 불린 값으로 변환한다. 숫자 0, 빈 문자열 "", null, undefined, NaN은 불린형으로 변환 시 모두 false가 된다. ⇒ 'falsy' 이 외의 값은 true가 된다. ⇒ 'truthy' ..
[JavaScript] The Modern JavaScript Tutorial - (2-9) Comparisons
2021. 4. 18. 19:25
JavaScript/The Modern Tutorial JS
개요 a > b, a = b, a 1); // true alert(2 == 1); // false alert(2 != 1); // true let result = 5 > 4; // 비교 결과를 변수에 할당 alert(result); // true 문자열 비교 자바스크립트는 사전순으로 문자열을 비교한다. 실제 단어를 사전에 실을 때 단어를 구성하는 문자 하나하나를 비교해서 등재하는 것과 같이, 자바스크립트에서도 문자열을 구성하는 문자 하나하나를 비교한다. // String comparison alert('Z' > 'A'); // true alert('Glow' > 'Glee'); // true alert('Bee' > 'Be'); // true 문자열 비교 알고리즘 두 문자열의 첫 글자를 비교..
[JavaScript] The Modern JavaScript Tutorial - (2-8) Basic operators, maths
2021. 4. 16. 22:01
JavaScript/The Modern Tutorial JS
용어: '단항', '이항', '피연산자' 피연산자(operand)는 연산자가 연산을 수행하는 대상이다. 5 * 2에는 왼쪽 피연산자 5와 오른쪽 피연산자 2, 총 두 개의 피연산자가 있다. 인수(argument)라는 용어로 불리기도 한다. 피연산자를 하나만 받는 연산자는 단항(unary) 연산자라고 부른다. 단항 마이너스 연산자 -가 그 대표적이 예이다. let x = 1; x = -x; alert(x); // -1, 단항 마이너스 연산자는 부호를 뒤집는다. 피연산자를 두 개 받는 연산자는 이항(binary) 연산자라고 부르며, 앞서 나온 마이너스 연산자는 이항 연산자로도 사용할 수 있다. let a = 1, b = 3; alert(b - a); // 2, 이항 마이너스 연산자는 뺄셈 처리한다. 기호는 ..
[JavaScript] The Modern JavaScript Tutorial - (2-7) Type Conversions
2021. 4. 15. 22:50
JavaScript/The Modern Tutorial JS
형 변환 함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환된다. 이를 형 변환(type conversion)이라고 한다. alert이 전달받은 값의 자료형과 관계없이 이를 문자열로 변환해서 보여 주는 것과 수학 관련 연산자가 전달받은 값을 숫자로 변환하는 경우가 대표적인 예라고 할 수 있다. 이외에도 전달받은 값을 원하는 타입으로 변환(명시적 변환)해 주는 경우도 있다. 문자형으로 변환 alert 메소드는 매개변수로 문자형을 받기 떄문에, alert(value)에서 value는 문자형이어야 한다. 만약 다른 형의 값을 전달받으면, 문자형으로 자동 변환된다. String(value) 함수를 호출해서 전달받은 값을 문자열로 변환할 수도 있다. let value = true; alert(typ..
[JavaScript] The Modern JavaScript Tutorial - (2-6) Interaction: alert, prompt, confirm
2021. 4. 14. 22:54
JavaScript/The Modern Tutorial JS
alert alert 함수가 실행되면 사용자가 '확인(OK)' 버튼을 누를 때까지 메시지를 보여 주는 창이 계속 떠 있게 된다. alert("Hello"); 메시지가 있는 작은 창을 모달 창(modal window)이라고 부른다. 이 '모달'이란 단어에는 페이지의 나머지 부분과 상호작용이 불가능하다는 의미가 있으며, 따라서 사용자는 확인 버튼을 누르기 전까지는 모달 창 밖에 있는 버튼을 누르는 등의 행동을 할 수 없다. prompt 브라우저에서 제공하는 prompt 함수는 두 개의 인수를 받는다. title - 사용자에게 보여 줄 문자열 default - 입력 필드의 초기값(선택) result = prompt(title, [default]); 인수를 감싸는 대괄호 [...]는 해당 매개변수가 필수가 아닌..
[JavaScript] The Modern JavaScript Tutorial - (2-5) Data types
2021. 4. 13. 21:40
JavaScript/The Modern Tutorial JS
Dynamically typed language 자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있다. 따라서 변수는 어떤 순간에 문자열일 수 있고, 다른 순간엔 숫자가 될 수 있다. // no error let message = "hello"; message = 123456; 이처럼 자료의 타입은 있지만, 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어를 '동적 타입(dynamically typed)' 언어라고 부른다. 숫자형 let n = 123; n = 3.141592; 숫자형(number type)은 정수 및 부동 소수점 숫자(floating point number)를 나타낸다. 일반적인 숫자 외에 Infinity, -Infinity, NaN 같은 '특수 문자 값(special ..
[JavaScript] The Modern JavaScript Tutorial - (2-4) Variables
2021. 4. 8. 23:55
JavaScript/The Modern Tutorial JS
변수 변수(variables)는 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소'이다. 자바스크립트에서는 let 키워드를 사용하여 변수를 생성한다. let message; message = 'Hello!'; // 문자열을 저장한다. alert(message); // 변수에 저장된 값을 보여 준다. let message_one_line = 'Hello!'; // 선언과 함께 값을 할당할 수 있다. let user = 'John', age = 25, says = 'Hello'; // 한 줄에도 작성 가능하다. // 그러나 가독성을 위해 개행을 하는 편이 좋다. let user2 = 'Nabin'; let age2 = 25; let says2 = 'Hello!!'; // 이런 방식도 가능하다. let hell..
[JavaScript] The Modern JavaScript Tutorial - (2-2~3) Code Structure & "use strict"
2021. 4. 7. 22:10
JavaScript/The Modern Tutorial JS
Code Structure 문장 문장(statement)은 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미한다. 서로 다른 문장은 세미콜론으로 구분하며, 가독성을 위해 개행하는 것이 일반적이다. alert('Hello'); alert('World'); 세미콜론 줄 바꿈이 있다면, 세미콜론(semicolon)을 생략할 수 있다. 자바스크립트는 줄 바꿈이 있으면 이를 '암시적' 세미콜론으로 해석한다. 이를 세미콜론 자동 삽입(automatic semicolon insertion)이라고 부른다. ECMAScript® 2022 Language Specification ECMAScript® 2022 Language Specification The first and ..
[JavaScript] The Modern JavaScript Tutorial - (2-1) Hello, world!
2021. 4. 6. 22:13
JavaScript/The Modern Tutorial JS
서문 이 파트는 실행 환경에 독립적인 코어 자바스크립트(core JavaScript)를 다룬다. 코어 자바스크립트를 다루고 있긴 하나, 학습을 위해선 스크립트를 실행할 수 있는 환경이 필요하다. 실행 환경으로 브라우저를 사용하되, Node.js와 같이 브라우저 이외의 환경에 주력하는 학습자를 위해 브라우저 한정 명령어(alert 등)는 최소한으로 사용한다. 먼저, 웹 페이지에 스크립트를 삽입하는 방법에 대해 알아보자. Node.js처럼 서버 사이드 환경에서 스크립트를 실행하고 싶다면 node my.js와 같은 명령어를 사용하면 된다. 'script' 태그 스크립트 후 태그 옆에 붙은 주석은 절대 경로(/path/to/script.js)는 사이트의 루트에서부터 파일이 위치한 경로를 나타낸다. "script..
[JavaScript] The Modern JavaScript Tutorial - (1) An Introduction to JavaScript
2021. 4. 2. 21:30
JavaScript/The Modern Tutorial JS
An Introduction to JavaScript JavaScript란? 자바스크립트에서는 프로그램을 스크립트라고 부른다. 이 스크립트는 웹 페이지의 HTML에 맞게 작성되었고, 페이지를 로딩할 때 자동으로 실행된다. 스크립트는 특별한 준비나 컴파일 과정 없이 일반 텍스트(plain text)처럼 제공되고, 실행된다. 자바스크립트는 브라우저에서만 아니라 서버, 나아가서는 자바스크립트 엔진이라고 불리는 프로그램이 있는 어떤 장치에서든 실행이 가능하다. 엔진 동작 과정 엔진(브라우저라면 내장 엔진)이 스크립트를 읽는다. (parse) 기계어로 스크립트를 변환한다. (compile) 머신이 코드를 실행한다. 기계어로 전환되었기 때문에 속도가 빠르다. 엔진은 프로세스 각 단계마다 최적화를 진행한다. 브라우저..