프론트엔드 개발일지 #08-JavaScript 기초(변수)

JavaScript 역사

• 1995년 자바스크립트 탄생
  원래는 넷스케이프 커뮤니케이션 (LiveScript->JavaScript)
  브라우저(크롬, 파이어폭스, 사파리 등) 동작 스크립트 언어

• 2005년 AJAX 등장
  자바스크립트 기반의 기술 -> 많은 개발자들이 자바스크립트를 사용하게 됨!
  폭발적인 UX(User Experiense=사용자 경험) 증가

• 2008년 V8 엔진 출시(google)

• 2009년 Node.js 등장, 서버 개발 활성화
  하나의 언어로 FrontEnd + BackEnd + DB = FullStack
  (보여지는 영역 + 숨겨진 엔진과 로직)

• 2015년 ES6

• 2016년 프론트엔드 프레임워크 대중화

JavaScript 특징

• 객체 지향 프로그래밍 언어
  객체지향 (객체라는 그룹으로 묶어서 처리한다. 객체는 상태와 행동을 가지고 있다.)
  vs
  절차지향(첫번째 일을 처리하고 다음에 두번재 일을 처리 -->순서대로)

• 동적 타이핑 언어
  자바스크립트가 아닌 다른 언어에서 변수를 선언할 때, string a = "abc" 이렇게 타입을 지정해주는데 자바스크립트는 var a = "abc" 이런식으로 타입을 지정해주지않는다. 타입은 런타임에 지정이 된다.

• 함수형 프로그래밍 지원

• 비동기 처리

• 클라이언트 측 및 서버 측 모두에서 사용 가능
  Node.js의 등장으로 웹 개발 전반에 걸쳐서 자바스크립트를 활용 할 수 있다.

변수

기억하고 싶은 값을 메모리에 저장하고 읽어들여서 재사용 하는 것

• 변수의 5가지 주요 개념

1. 변수이름 : 저장된 값의 고유 이름
2. 변수 값 : 변수에 지정된 값
3. 변수 할당 : 변수에 값을 지정하는 행위
4. 변수 선언 : 변수를 사용하기위해 컴퓨터에 알리는 행위
5. 변수 참조 : 변수에 할당 된 값을 읽어오는 것

var myVar = "Hello World!";

//변수이름:myVar 변수값:Hello World!
//변수 할당하고 선언했음

• 변수 선언 세가지 종류

var / let / const

//1.var
var myVar = "Hello World!";
var myVar = "Test 1";
var myVar = "GoodBye";
console.log(myVar);


//2.let
let myLet = "Hello World!";
let myLet = "Test 2"
let myLet = "GoodBye"
console.log(myLet);


//3.const
const myConst = "Hello World!";
const myConst = "Test 3";
const myConst = "Goodbye";
console.log(myConst);

//var는 변수 변수 재선언 가능하지만,let과 const는 오류
//var,let는  값의 재할당 가능하지만, const는 오류
//const는 변하지않는 않는 값을 선언해야한다. 

• 숫자형 변수

//1-1.정수
let num1 = 10;
console.log(num1); //10
console.log(typeof num1); //number

//1-2.실수(Float)
let num = 3.14;
console.log(num2); //3.14
crossOriginIsolated.log(typeof num2); //number

//1-3.지수형(Exp)
let num3 = 2.5e5; // 2.5 x 10^5
console.log(num3); //250000
console.log(typeof num3); //number

//1-4. NaN
let num4 = "Hello" / 2;
console.log(num4); //NaN : Not A Number

0/0; //NaN
console.log(typeof NaN) // "number" 숫자로 간주함.

//1-5.Infinity(무한대)
let num5 = 1 / 0;
consol.log(num5); //Infinity
console.log(typeof num5); //number

//1-6.Infinity(무한대)
let num6 = -1 / 0;
consol.log(num6); //-Infinity
console.log(typeof num6); //number

• 문자형 변수 (' ' = " ")

let str = "Hello World!"
// console.log(str); // Hello World!
// console.log(typeof str); // string

//2-1.문자열 길이 확인
console.log(str.length); //12 문자열의 길이 확인

//2-2.문자열 합치기
let str1 = "Hello";
let str2 = "World!;"
let result = str1.concat(str2); //문자열 결합하기
// console.log(result); // Hello World!

//2-3.문자열 자르기
let str3 = "Hello, World!"
console.log(str3.substr(7, 5));//World만 출력 7번째부터 5개만 잘라줘
console.log(str3.slice(7,12)); //World만 출력 7부터 12번째까지 잘라줘

//2-4.문자열 검색하기
let str4 = "Hello, World!";
console.log(str4.search("World")); //7

//2-5.문자열 대체
let str5 = "Hello, World!";
let result01 = str5.replace("World","Javasript");
// console.log(result01); //Hello, Javascript!

//2-6.문자열 분할
let str6 = "apple, banana, kiwi";
let result02 = str6.split(",");
console.log(result02); //'apple','banana','kiwi'

• 불리언(Boolean)
  true(참), false(거짓)

let bool1 = true;
let bool2 = false;

console.log(bool1); // true
console.log(typeof bool1); //boolean
console.log(bool2); //false
console.log(typeof bool2); //boolean

• undefined
  변수를 선언하고 값을 할당하지 않음

let x;
console.log(x); //undefined

• null
  값이 존재하지않음을 '명시적'으로 나타내는 방법
  null과 undefined는 같지않다 !!!!

let y = null;
console.log(y); //null

• object
  객체, key-value pair

let person = {
    name: 'Jo',
    age: 30,
    isMarried: false,
};
console.log(typeof person); //object

• array
  배열, 여러개의 데이터를 순서대로 저장하는 데이터 타입

let number = [1, 2, 3, 4, 5];
console.log(2); //3

let fruits = ['apple'. 'banana', 'kiwi']
console.log(1); // 'banana'

형 변환

• 암시적 형 변환
  의도하지않고 자동으로 바뀌는 형 변환

1. 문자열

let result1 = 1 + "2";
console.log(result1); //12
console.log(typeof result1); //string

let result2 = "1"+ true;
console.log(result2); //1true
console.log(typeof result2); //string

문자열과 다른 데이터 타입이 더하기 연산자와 만나면 문자열이 우선시 된다.
{}, null, undefined + "1" => 문자열

2. 숫자

letresult3 = 1 - "2";
console.log(result3); //-1
console.log(typeof result3); // number

let result4 = "2" * "3";
console.log(result4); // 6
console.log(typeof result4); //number

• 명시적 형 변환
  개발자가 의도적으로 바꿔주는 형 변환

1. Boolean

console.log(Boolean(0)); //false
console.log(Boolean("")); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean(NaN)); //false
console.log(Boolean("-------------"));
console.log(Boolean("false")); //true
console.log(Boolean({})); //true

2. 문자열

let result5 = String(123);
console.log(typeof result5); //string
console.log(result5); //123

let result6 = String(true);
console.log(typeof result6); //string
console.log(result6); //true

let result7 = String(false);
console.log(typeof result7); //string
console.log(result7); //false

let result8 = String(null);
console.log(typeof result8); //string
console.log(result8); //null

let result9 = String(undefined);
console.log(typeof result9); //string
console.log(result9); //undefined

3. Number

let result10 = Number("123");
console.log(result10); //123
console.log(typeof result10); //number

이렇게 변수의 개념과 종류 / 형 변환까지 오늘 공부를 했는데,

문자열과 다른 데이터 타입이 더하기 연산자와 만나면 문자열이 우선시 된다.(다른 연산자는 아님)

이 부분을 잘 기억해야 될 것 같다!

---

문자열 메서드

thing.method()라는 형태로 써주는데

const message = "   TASTE THE RAINBOW!  "

//이 코드를 전부 소문자로 앞뒤 공백 없이 whisper라는 변수로 
//정의하는 코드를 적어 본다면

const whisper = message.toLowerCase().trim()

// 이렇게 적을 수 있다
// 그럼 whisper 변수에는 "taste the rainbow!"가 값으로 담긴다.

인수가 있는 문자열 규칙

• .indexOf

"haha that is so funny!"라는 문자열이 있다고 한다면,

"haha that is so funny!".indexOf[h]
1

"haha that is so funny!".indexOf[is]
10

"haha that is so funny!".indexOf[$]
-1 // 없기때문에 

• .slice

"haha that is so funny!".slice(5)
"that is so funny!"

let msg = "haha that is so funny!";
msg.slice(5)
"that is so funny!"
msg.slice(5, 9)
"that"
msg.slice(5, 10)
"that "
msg.slice(10, 12)
"is"
msg.slice(-6)
"funny!"

• .replace

msg
"haha that is so funny!"

msg.replace('haha', 'lololol')
"lololol that is so funny!"

msg.replace('h', 'H')
"Haha that is so funny!"

• .repeat

"ha".repeat(10)
"hahahahahahahahahaha"

등등 많은 메서드들이 있다.

템플릿 리터럴

문자열의 결과를 보다 편하게 쓰게 해주는 방식이다. 벡틱과 ${}를 이용한다.

`hello ${ 1 + 2 + 9 }`
"hello 12"

인덱스에 공백도 하나로 친다는걸 무조건 알아야 할 것 같고, 슬라이스의 개념도 다시 한 번 복습해야 할 것 같다 헷갈린다ㅠㅠ