javascript - 기초

모던 웹에 핵심이라고 할 수 있는 javascript. 기본적인 내용을 정리해보자 1에선 가장 베이스가 되는 내용 정리😁

프롤로그

동적이고(화면에 움직임이 많음), 방대한 양의 데이터를 처리하기 위해선 돔(DOM)을 조작해야 됨.

그래서 모던 웹에선 자바스크립트를 뗄래야 뗄수 없다. 그리고 또 하나, 예전엔 그냥 돔을 조작하기 위해 브라우저 위에서만 돌아가는 귀여운 스크립트 언어였다면, 이젠 서버사이드, 모바일, 데스크탑 등, 자바스크립트로 만들 수 있는 플랫폼이 무궁 무진. 그래서 요즘 가장 뜨거운 언어.

특히, 읽고 계신 분께서 프론트엔드를 꿈꾼다면, 다른 선택지가 아직은 없습니다. 무조건 자바스크립트를 학습하셔야함.

Let's go 🙄

변수와 상수

1. 변수
   • let 키워드를 통해 생성
   • 변수에 담긴 값이 변할 수 있습니다.

   	let age = 7;
   	age = 8; // 변수의 값이 변해도 ok!

2. 상수
   • const 키워드를 통해 생성
   • 변수에 담긴 값이 변할 수 없습니다.

   	let name = "wabbang";
   	// name = "kiwi" <= error 발생, 상수는 변경 x 
   	let othername = "kiwi" // 다른 변수를 선언!

자료형

자바스크립트에는 8가지 자료형이 있다.

1. 숫자형
   • 숫자형은 정수 및 부동소수점 숫자.
   • 숫자형과 관련된 연산은 다양, *, /, +, - 등이 대표적.
   • Infinity, -Infinity, NaN같은 '특수 숫자 값(special numeric value)'이 포함.

   let number = 7;	// 정수
   let num2 = 7.777;	// 부동소수점
   let num3 = Infinity;

2. Bigint형
   • 숫자형으로 담을 수 없는 큰 값이나, 작은 값을 담음.
   • 9007199254740991 보다 큰 값 혹은 -(2의53제곱-1)) 보다 작은 정수
   • 정수 리터럴 끝에 n을 붙이면 됨.

   let bigint = 1234567890123456789012345678901234567890n;

3. 문자형
   • 문자형은 ``(백틱), ''(작은따옴표), ""(큰따옴표) 로 감싸주어 표현
   • 백틱은 ${...}를 통해 표현식을 삽입 가능

   const single = '나는 작은따옴표 입니다.';
   const double = "나는 큰따옴표 입니다."
   let content = "백틱"
   const backtick = `나는 ${content} 입니다` //나는 백틱입니다.

4. 불린형
   • true, false 값. if문과 for문 등 분기 처리에 많이쓰임.

   let korean = true;
   let japan = false;

5. null
   • 존재하지 않는(nothing), 비어 있는(empty), 알 수 없는(unknown)을 나타내는 데 사용

   let age = null; // 나이를 알수 없음, 혹은 비어있음.

6. undefined
   • undefined도 null처럼 자신만의 자료형을 형성.
   • undefined는 값이 할당되지 않은 상태를 나타낼 때 사용.
   • 변수는 선언만하면 undefined가 자동으로 할당.

   let name; // name을 선언만 하였으므로 undefined 자동 할당됨

7. 객체형
   • 특수한 자료형.
   • 데이터를 바인딩 하는 개념으로, 나중에 따로 정리할 만큼 자바스크립트를 넘어 프로그래밍언어에 중요한 페러다임

   let obj = {name: 'wabbang', age: 29, habbit: 'programming'}

8. 심볼형
   • 객체의 고유한 식별자(unique identifier)를 만들 때 사용

함수

• 반복되는 코드들을 묶어 재사용성을 높여줌
• 자바스크립트에서의 함수는 다른 언어와 다른 차이 점을 가지는데, 함수 또한 객체값으로 다룸. 그래서 파라미터를 통해 주입하기도하고, 함수를 동적으로 사용가능.
• 함수 선언 방법

function iamfunc() {
	alert('hi');	// 함수 본문.
}

• 함수 표현식

const iamfunct2 = function() {
 	alert('bye') 	// 함수 표현식
}

• 화살표 함수로 편하게 함수 사용 가능

const arrowfn = () => {
 alert('hahaha');	// 화살표 함수 
}

• 지역변수
  함수에서 선언된 변수는 함수안에서만 사용가능. 스코프가 함수까지만