자바 스크립트 기본

자바 스크립트란?

• 자바스크립트(JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다.
• 이 언어는 웹 브라우저 내에서 주로 사용되며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다.
• 또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다.
• JS > browser , server, app(react native), react
• 스크립트 언어: 브라우저 등 동작 환경에 일을 시킨다.
• 웝페이지 내에 HTML에 삽입되어 페이지가 로드 될 때 자동으로 실행된다.
• 자바와 같은 컴파일 언어와 다르게 별다른 준비나 컴파일 과정이 필요 없다

자바스크립트 엔진

• 자바스크립트의 인기가 상승하면서 이제는 단지 브라우저에서만 사용되지 않는다.
• 자바스크립트를 실행할 수 있는 자바스크립트 엔진만 있으면 어디서든 사용 가능하다
• 엔진의 종류
  • v8 : google v8 엔진, C++로 작성되었다. chrome과 node.js 에서 사용

스크립트가 동작하는 환경에 종속

• 일반적으로 브라우저 환경에서 동작
  • 메모리나 CPU 자원에 대한 직접적 접근은 허용되지 않는다.
• 그러나 서버(Node.js)에서 동작하는 자바스크립트는 브라우저 환경과 다르다.

브라우저 내 자바 스크립트

• 페이지에 새 HTML을 추가하고 기존 콘텐츠를 변경하고 스타일을 수정한다. (HTML, CSS 조작)
• 사용자 작업(이벤트)에 반응
• AJAX
• 쿠키를 가져오고 설정하고.
• 로컬 스트리지를 통해 클라이언트 측 데이터를 저장

클라이언트가 서버에게 요청하는 방법

• url 검색창
• Form 태그 → HTML
• AJAX(Fetch) → JavaScript

브라우저 내 자바스크립트 제한 사항

• 보안적 측면을 고려하기 때문에 제한이 많다.
• OS기능을 직접 사용할 수 없다

자바스크립트 장점

• 모든 주요 브라우저에서 지원하고, 기본 언어로 사용됨

ECMAScript는 표준(명세)

• JavaScript가 따르는 표준

엄격 모드

• 모던 자바스크립트로 실행
• 클래스와 모듈을 사용하면 자동 적용

// 스트립트 최상단에 위치
"use strict";

// 이 코드는 모던한 방식으로 실행됩니다.
...

변수

• 데이터를 저장할 때 쓰이는 이름이 붙은 저장소
• var는 let과 거의 동일하게 동작, 다만 var는 오래된 방식이다.
• const 는 let 과 비슷하지만, 변수의 값을 변경할 수 없다. (상수 선언)

const 사용시 주의할 점
const로 객체를 선언할 경우 객체의 내부 값은 변경 가능하다.
(변수에는 객체의 주소값이 저장되고, 내부 값이 변경되어도 객체의 주소값은 변경되지 않기 때문)
객체의 내부 값까지 변경이 불가하게 설정하기 위해서는 추가 설정이 필요하다.
Objcet.freeze(obj)

// 변수 선언

let message;
message = 'Hello!';

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

// 상수 선언

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

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

// 문자형

let str = "Hello";
let str2 = 'Single quotes are ok too';
let phrase = `can embed another ${str}`;
alert( "the result is ${1 + 2}" ); 
// the result is ${1 + 2} (큰따옴표는 확장 기능을 지원하지 않습니다.)

자료형

동적 언어 타입(dynamically typed) 언어

• 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어
• JavaScript, python 등

자바스크립트 기본 자료형 ( 8가지 )

• 숫자형 – 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용합니다. 정수의 한계는 ±2^53 입니다.
• bigint – 길이 제약 없이 정수를 나타낼 수 있습니다.
• 문자형 – 빈 문자열이나 글자들로 이뤄진 문자열을 나타낼 때 사용합니다. 단일 문자를 나타내는 별도의 자료형은 없습니다.
• 불린형 – true, false를 나타낼 때 사용합니다.
• null – 독립 자료형, 알 수 없는 값을 나타냅니다.
• undefined – 독립 자료형, 할당되지 않은 값을 나타냅니다.
• 객체형 – 복잡한 데이터 구조를 표현할 때 사용합니다.
• 심볼형 – 객체의 고유 식별자를 만들 때 사용합니다.

typeof 연산자는 피연산자의 자료형을 알려줍니다.

• typeof x 또는 typeof(x) 형태로 사용합니다.
• 피연산자의 자료형을 문자열 형태로 반환합니다.
• null의 typeof 연산은 "object"인데, 이는 언어상 오류입니다. null은 객체가 아닙니다.

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

alert("Hello");

let age = prompt('나이를 입력해주세요.', 100); // defalt value : 100
alert(`당신의 나이는 ${age}살 입니다.`); // 당신의 나이는 100살입니다.

let isBoss = confirm("당신이 주인인가요?");
alert( isBoss ); // 확인 버튼을 눌렀다면 true가 출력됩니다. 아니면 false

일치 연산자 (strict equality operator)

• 형변환 없이 값을 비교
• 값과 자료형 모두 일치해야 true 반환

alert( 0 === false ); // false, 피연산자의 형이 다르기 때문입니다.

조건문

let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');

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

let accessAllowed = (age > 18) ? true : false;

 

출처: 모던 JavaScript 튜토리얼