javascript - 기초

김예찬·2021년 4월 29일
0

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


프롤로그

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

🎨 DOM: Document Object Model, 웹 페이지에 대한 인터페이스. 문서 객체 모델이라고 하며, 쉽게 자바스크립트로 웹의 화면을 움직일 때 필요한 친구라고 생각하면 된다!

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

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

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
    • undefinednull처럼 자신만의 자료형을 형성.
    • 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');	// 화살표 함수 
}
  • 지역변수
    함수에서 선언된 변수는 함수안에서만 사용가능. 스코프가 함수까지만
profile
프론트엔드

0개의 댓글