*따로 요약정리해서 필요할때 찾아보기

🔗 읽는 순서 정리 노션

💡 팁: 정독하지 말고 잘 모르겠으면 넘어가고 한번 더 읽자. 다음에는 놀랍게도 이해된다. 진짜다.

자바스크립트란?

🔗 소개

자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어입니다.

자바스크립트로 작성한 프로그램을 스크립트(script) 라고 부릅니다. 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행됩니다.

스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행도 할 수 있습니다.

이런 관점에서 보면 자바스크립트는 자바(Java)와는 매우 다른 언어라고 할 수 있습니다.(자바스크립트는 자바와 아무런 연관이 없습니다.)

브라우저엔 '자바스크립트 가상 머신’이라 불리는 엔진이 내장되어 있습니다.

엔진의 종류는 다양한데, 엔진마다 특유의 코드네임이 존재
예)
V8 – Chrome과 Opera
SpiderMonkey – Firefox

엔진은 어떻게 동작하나요?

기본 원리는 다음과 같이 간단합니다.

1. 엔진(브라우저라면 내장 엔진)이 스크립트를 읽습니다(파싱)
2. 읽어 들인 스크립트를 기계어로 전환합니다(컴파일)
3. 기계어로 전환된 코드가 실행됩니다. 기계어로 전환되었기 때문에 실행 속도가 빠릅니다.

엔진은 프로세스 각 단계마다 최적화를 진행합니다. 심지어 컴파일이 끝나고 실행 중인 코드를 감시하면서, 이 코드로 흘러가는 데이터를 분석하고, 분석 결과를 토대로 기계어로 전환된 코드를 다시 최적화하기도 합니다. 이런 과정을 거치면 스크립트 실행 속도는 더욱 더 빨라집니다.

요약

• 자바스크립트는 브라우저에서만 쓸 목적으로 고안된 언어이지만, 지금은 다양한 환경에서 쓰이고 있다.
• 오늘날 자바스크립트는 브라우저 환경에서 가장 널리 사용되는 언어로 자리매김함. HTML/CSS와 완전한 통합이 가능.
• 자바스크립트로 '트랜스파일’할 수 있는 언어는 많다. 각 언어마다 고유한 기능을 제공함. 자바스크립트에 숙달한 뒤에 이 언어들을 살펴볼 것을 추천.

Hello, world!

🔗 Link Page

‘script’ 태그

script태그를 이용하면 자바스크립트 프로그램을 HTML 문서 대부분의 위치에 삽입할 수 있습니다. 브라우저는 이 태그를 만나면 안의 코드를 자동으로 처리합니다.

🚩 외부 스크립트

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

자바스크립트 코드의 양이 많은 경우엔, 파일로 소분하여 저장할 수 있습니다. 이렇게 분해해 놓은 각 파일은 src속성을 사용해 HTML에 삽입합니다.

• 아래와 같이 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>
…

src 속성이 있으면 태그 내부의 코드는 무시됩니다.

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

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

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

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

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

실습

엄격 모드

🔗 Link Page

use strict가 스크립트 최상단에 오면 스크립트 전체가 “모던한” 방식으로 동작한다.

변수와 상수

🔗 Link Page

변수

‘상자’ 안에 데이터를 저장하는데, 이 상자에는 특별한 이름표가 붙어 있다고 상상해보자

변수 message는 message라는 이름표가 붙어있는 상자에 "Hello!"라는 값을 저장한 것이라고 생각할 수 있다. 상자 속엔 어떤 값이든지 넣을 수 있고, 원하는 만큼 값을 변경할 수도 있다.

• 값이 변경되면, 이전 데이터는 변수에서 제거됩니다.

  

let message;

message = 'Hello!';

message = 'World!'; // 값이 변경되었습니다.

alert(message);

• 변수 2개를 선언하고, 다른 변수에 복사는 가능하다.

let Hello = 'Hello world!';

let message;

// Hello의 'Hello world' 값을 message에 복사합니다.
message = Hello;

// 이제 두 변수는 같은 데이터를 가집니다.
alert(Hello); // Hello world!
alert(message); // Hello world!

• 그러나 같은 변수를 두번 선언하면 에러가 발생한다.

let message = "This";

// 'let'을 반복하면 에러가 발생합니다.
let message = "That";

변수 명명 규칙

1. 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있습니다.

2. 첫 글자는 숫자가 될 수 없습니다

   변수명 작성에 흔히 사용되는카멜 표기법은 단어를 차례대로 나열하면서 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성한다.
   예) myVeryLongName

3. 예약어는 단어는 변수명으로 사용할 수 없습니다. 이 단어들은 자바스크립트 내부에서 이미 사용 중이기 때문입니다. 예) let, class, return, function

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

상수

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

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

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";

대문자 상수는 ‘하드 코딩한’ 값의 별칭을 만들 때 사용하면 된다.

변수를 추가하는 것은 악습이 아닙니다. 좋은 습관입니다.

변수명은 변수가 담고 있는 것이 무엇인지 쉽게 알 수 있도록 지어져야 합니다.

실습

let admin;
let name = "john";

admin = name;
//변경받으려는 값을 앞에 두기. admin의 위치 확인하기

alert(admin);

자료형

🔗 Link Page

숫자형

NaN은 계산 중에 에러가 발생했다는 것을 나타내주는 값

문자형

따옴표는 세 종류가 존재하는데,큰 따옴표와 작은 따옴표는 차이가 없고 백틱은 변수나 표현식을 감싼 후 ${…}안에 넣어주면, 아래와 같이 원하는 변수나 표현식을 문자열 중간에 손쉽게 넣을 수 있습니다.

1. 큰따옴표: "Hello"
2. 작은따옴표: 'Hello'
3. 역 따옴표(백틱, backtick): Hello

// 변수를 문자열 중간에 삽입
alert( `Hello, ${name}!` ); // Hello, John!

// 표현식을 문자열 중간에 삽입
alert( `the result is ${1 + 2}` ); 
// the result is 3

typeof 연산자

typeof 연산자는 두 가지 형태의 문법을 지원합니다.

연산자: typeof x
함수: typeof(x)

🚨🚨🚨typeof 연산자는 다시 보기🚨🚨🚨

alert, prompt, confirm을 이용한 상호작용

🔗 Link Page

메시지가 있는 작은 창은 모달 창(modal window) 이라고 부르는데, 모달이란 단어엔 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미가 내포되어 있다. 따라서 사용자는 모달 창 바깥에 있는 버튼을 누른다든가 하는 행동을 할 수 없다. 확인 버튼을 누르기 전까지는!

alert

alert("Hello");

alert에서 뜨는 모달창도 마찬가지 !

prompt

브라우저에서 제공하는 prompt 함수는 두 개의 인수를 받습니다

result = prompt(title, [default]);

• title - 사용자에게 보여줄 문자열
• default - 입력 필드의 초깃값(선택값)

let age = prompt('나이를 입력해주세요.', 100);

alert(`당신의 나이는 ${age}살 입니다.`); 
// 당신의 나이는 100살입니다.

confirm

result = confirm(question);

confirm 함수는 매개변수로 받은 question(질문)과 확인 및 취소 버튼이 있는 모달 창을 보여줍니다.

사용자가 확인 버튼을 누르면 true, 그 외의 경우는 false를 반환합니다.

let isBoss = confirm("당신이 주인인가요?");

alert( isBoss ); 
// 확인 버튼을 눌렀다면 true가 출력됨
// 취소 버튼을 눌렀다면 flase가 출력됨

위 함수들은 모두 모달 창을 띄워주는데, 모달 창이 떠 있는 동안은 스크립트의 실행이 일시 중단되며, 사용자가 창을 닫기 전까진 나머지 페이지와 상호 작용이 불가능하다.

형 변환

🔗 Link Page
함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환됩니다. 이런 과정을 형 변환(type conversion)이라고 한다.

(여기선 원시형의 형변환에 대해서만 다룰 예정)

문자형으로 변환

alert는 매개변수로 문자형을 받기 때문에, alert(value)에서 value는 문자형이어야 한다. 만약, 다른 형의 값을 전달받으면 이 값은 문자형으로 자동 변환된다.

let value = true;
alert(typeof value); 
// boolean (t/f로 판별되는 타입이라는걸 나타냄)

value = String(value); 
// 변수 value엔 문자열 "true"가 저장됩니다.
alert(typeof value); 
// string(중간에 문자열로 바뀌었기에 스트링이 나옴)

잘 풀어서 생각해보면 이해가 된다.

숫자형으로 변환

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

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

let num = Number(str); 
// 문자열 "123"이 숫자 123으로 변환됩니다.

alert(typeof num); // number

기본 연산자와 수학

🔗 Link Page

증가·감소 연산자

숫자를 하나 늘리거나 줄이는 것은 자주 사용되는 연산

• 증가(increment) 연산자 ++는 변수를 1 증가

let counter = 2;
counter++;      
// counter = counter + 1과 동일하게 동작
alert( counter ); // 3

• 감소(decrement) 연산자 --는 변수를 1 감소

let counter = 2;
counter--;      
// counter = counter - 1과 동일하게 동작
alert( counter ); // 1

counter++와 같이 피연산자 뒤에 올 때 = '후위형'
++counter와 같이 피연산자 앞에 올 때 = '전위형'

전위형은 증가·감소 후의 새로운 값을 반환하는 반면, 후위형은 증가·감소 전의 기존 값을 반환한다.
🚨🚨🚨이 부분 다시 공부🚨🚨🚨

비교 연산자

🔗 Link Page

한번 읽어보기 'ㅅ'

if와 '?'를 사용한 조건 처리

🔗 Link Page

'if’ / 'else if’ / 'else'

let year = prompt('몇 년도에 출판되었을까요?', '');

if (year < 2015) {
  alert( '숫자를 좀 더 올려보세요.' );
} else if (year > 2015) {
  alert( '숫자를 좀 더 내려보세요.' );
} else {
  alert( '정답입니다!' );
}

조건부 연산자 ‘?’

조건에 따라 다른 값을 변수에 할당해줘야 할 때가 있다.
삼항(ternary) 연산자 = 조건부 연산자

let result = condition ? value1 : value2;

// 연산자 우선순위 규칙에 따라, 
//비교 연산 'age > 18'이 먼저 실행됩니다.
// (조건문을 괄호로 감쌀 필요가 없습니다.)
let accessAllowed = age > 18 ? true : false;

🚨페이지에 있는 실습문제들 한번씩 풀어보면 이해 잘됨.

논리 연산자

자바스크립트엔
세 종류의 논리 연산자 ||(OR), &&(AND), !(NOT)이 있습니다.

|| (OR)

• 인수 중 하나라도 true이면 true를 반환하고, 그렇지 않으면 false를 반환

let hour = 12;
let isWeekend = true;

if (hour < 10 || hour > 18 || isWeekend) {
  alert( '영업시간이 아닙니다.' ); // 주말이기 때문임
}

&& (AND)

• AND 연산자는 두 피연산자가 모두가 참일 때 true를 반환합니다. 그 외의 경우는 false를 반환

&&의 우선순위가 ||보다 높다.

! (NOT)

result = !value;

• NOT 연산자의 우선순위는 모든 논리 연산자 중에서 가장 높기 때문에 항상 &&나 || 보다 먼저 실행

nullish 병합 연산자 '??'

🚨🚨🚨이 부분 다시 공부🚨🚨🚨

while과 for 반복문

반복문(loop)을 사용하면 동일한 코드를 여러 번 반복할 수 있다.

‘while’ 반복문

• 조건 i < 3을 만족할 동안 i를 출력

let i = 0;
while (i < 3) { // 0, 1, 2가 출력됩니다.
  alert( i );
  i++;
}

‘do…while’ 반복문

🚨🚨🚨이 부분 다시 공부🚨🚨🚨

‘for’ 반복문

• 가장 많이 쓰이는 반복문

for (begin; condition; step) {..}

for (let i = 0; i < 3; i++) { // 0, 1, 2가 출력됩니다.
 alert(i);
} 

switch문

• 복수의 if 조건문은 switch문으로 바꿀 수 있다.

  🚨🚨🚨이 부분 다시 공부🚨🚨🚨

함수

• 세 가지 방법으로 함수를 만들 수 있다.

1. 함수 선언문

: 주요 코드 흐름을 차지하는 방식

function sum(a, b) {
  let result = a + b;

  return result;
}

2. 함수 표현식

: 표현식 형태로 선언된 함수

let sum = function(a, b) {
  let result = a + b;

  return result;
};

3. 화살표 함수

// 화살표(=>) 우측엔 표현식이 있음
let sum = (a, b) => a + b;

// 대괄호{ ... }를 사용하면 본문에 여러 줄의 코드를 
//작성할 수 있음. return문이 꼭 있어야 함.
let sum = (a, b) => {
  // ...
  return a + b;
}

// 인수가 없는 경우
let sayHi = () => alert("Hello");

// 인수가 하나인 경우
let double = n => n * 2;

화살표 함수 기본

• 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법

let func = function(arg1, arg2, ...argN) {
  return expression;
}; 

// 위 함수의 축약 버전은 아래와 같다.

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

---

🚨🚨🚨이 부분 다시 공부🚨🚨🚨
중괄호 없이 작성: (...args) => expression
화살표 오른쪽에 표현식을 둡니다. 함수는 이 표현식을 평가하고, 평가 결과를 반환합니다.

중괄호와 함께 작성: (...args) => { body }
본문이 여러 줄로 구성되었다면 중괄호를 사용해야 합니다. 다만, 이 경우는 반드시 return 지시자를 사용해 반환 값을 명기해 주어야 합니다.

---