Javascript - Introduction

Introduction

Console

브라우저 디버깅을 위한 콘솔로의 접근
→ 디버깅을 위해 존재하는 객체
console.log등을 이용하면 메세지 등이 출력

console.log(5);

// print: 5

Comments

출력되지 않는 코멘트

1. Single Line Comment (//) → 한줄일 때 사용

// is this comment printed?
console.log(5);

// Printed: 5

2. Multi-Line Comment (/* */) → 여러줄일 때 사용

/* 
is this comment
printed?
*/
console.log(5);

// printed: 5

Data Types

1. Number (숫자)
   64비트 부동 소수점 형식으로, 모든 숫자를 실수 처리
   ex) 1, 2, 20.49 등..

2. Srting (문자열)
   16비트 유니코드 문자셋(UTF-16)으로 구성된 문자열
   작은따옴표(' '), 큰따옴표 (" ")등으로 할당
   ex) king, queen 등..

3. Boolean (불리언)
   True / False 두 개로 양분되는 값

4. Null
   의도적으로 '값이 없음'을 위해 명시하는 값

5. Undefined
   값이 할당되지 않았을 때, 자바스크립트 엔진이 암묵적으로 초기화하는 값(타입도 값도 모두 undefined)

6. Symbol
   ES6부터 새로 생긴 데이터 타입
   변경불가능한 유일한 값을 생성할 때 사용하며, 값 자체의 확인이 불가하여 외부로 노출되지 않는다.

7. Object (객체)
   연관된 데이터의 모음

Arithmetic Operators (산수 연산자)

자바스크립트를 이용하여 수학 연산 가능

• Add : +
• Subtract : -
• Multiply : *
• Divide : /
• Remainder : %

console.log(3.5+27);
console.log(2021-1969);
console.log(65/240);
console.log(0.2708*100);

// printed: 30.5
// printed: 52
// printed: 0.2708333333333333 
// printed: 27.08

String Concatenation (연속 문자열)

연속된 문자열을 출력하고 싶다면 + 연산자를 이용

console.log('Hello' + 'World');
console.log('Hello World');

// print: HelloWorld
// print: Hello World

Properties (속성)

객체에서 값을 담고 있는 정보
점(.) 또는 괄호([' '])로 표현 가능

• object.property
• object['property']

console.log('dance'.length);

// print: 5

→ .length: 속성

Methods (메소드)

클래스에 만드는 함수
메서드는 주로 객체의 프로퍼티 값을 알아내거나 변경하는 기능 및 클래스를 대표하는 기능이 담기게 됨
흔히 사용하는 console.log() 에서 console은 객체, .log는 메소드의 기능을 수행

console.log('tattoo'.toUpperCase());
console.log('    Remove whitespace   '.trim());

//print: TATTOO
//print: Remove whitespace

Built-in Objects (내장 객체)

브라우저의 자바스크립트 엔진에 내장된 객체
내장 객체의 종류에는 많은 객체들이 있는데, 그 중 기초 내용이면서 빈번하게 사용되는 객체에는 문자(String), 날짜(Date), 수학(Math), 정규 표현 객체(RegExp) 등이 존재

console.log(Math.floor(Math.random(43.8)*100));
console.log(Number.isInteger(2017));
console.log(Math.ceil(43.8));
console.log(Math.random())

//print: 91
//print:true
//print: 44
//print: 0.3126624419407795

• Math.random() → 0~1 사이의 임의 실수 생성
• Math.floor() → 소수점 이하 반올림
• Number.is Integer() → () 안의 수가 정수인지 판단
• Math.ceil() → 주어진 숫자보다 크거나 같은 숫자 중 가장 작은 숫자를 integer 로 반환

Take Away

• 기초부터
  기존에 HTML과 CSS를 공부했던 자료를 통해 Javascript를 기초부터 다시 배워가고 있는 중이다.
  확실히 유튜브를 통해 배웠던 것보다는 이해도 더 잘되는것 같다.
  뒤에 변수부분도 배운게 있는데, 내일 다시 하나하나 복습해보고 정리해보는 시간을 가져야할 듯 하다.
  처음에는 막막했는데, 하나하나 직접 해나가지 뭔가 배우는 느낌도 나고 뿌듯하기도 하다.