[자바스크립트] 기본 문법 (1)

자바스크립트를 배워보자.

mmmmmm02

Aug 29, 2024

Contents

자바스크립트

자바스크립트를 배워보자. 두근두근

인텔리J 를 사용해도 되고, VS code 를 사용해도 된다.

나는 VS code GO.

STS 쓰면 단축키가 같은 아래의 Evlipse Keymap 을 설치하고,

인텔리J 쓰면 아래의 JetBrains 설치하기.

다운로드는 여기서 검색해서 Install 하면 된다.

자바스크립트에서 자주 사용하게 되는 단축키


ctrl + alt + l → 정렬
alt + shift + 커서 선택 → 다중선택

File → Preferences → Setting 자동 정렬되게 세팅해두기

자바스크립트

File → Open Floder → 로컬 작업 환경 JSWORK 폴더 만들어서 열고,

VS code 에서 ex01 폴더 > test1.html 파일 만들기

실행하고 브라우저에서 F12 로 콘솔창 확인 (실행은 파일명 우클릭 > Open with Live Server)

이것이 바로 스크립트, 스크립트는 독립적으로 실행 할 수 없다.

브라우저 없이 실행해보고 싶을 때, 아래와 같이 test1.js 파일을 새로 만들어서 자바스크립트 코드만 넣고 터미널 열고 실행해보면 된다.

궁금하면 node.js 설치해서 해보면 됨(환경변수 설정해야됨)

💡

변수는 let 만 쓰자. (var X)

타입 추론

자바스크립트는 밑으로 내려가면서 해석-실행 된다.


let n4 = true;

들어갈 때 타입이 결정된다. 이를 타입 추론 이라고 한다.

미리 추론이 되는 게 아니라, 들어올 때 추론이 된다. 속도도 느리고, 메모리가 없으면 터지기도 한다.

일반 자료형은 데이터 사이즈가 있는데, (ex. c언어나 자바의 int 8; → 4byte 의 값을 받을 수 있음)

타입이 다 적혀있으니, 안전하게 사이즈를 확보한다.

c언어의 구조체나 자바의 String/Class 같은 애들은 문자가 몇 개 들어올지 알 수 없으니 사이즈 확보가 안되는 경우가 존재한다.

메모리 공간은 컴파일 시에 확보해둘 수 있어, 실행 시 엄청 빠르다.

일반 자료형은 컴파일 시에 ex. 4byte 확보 해놔야지~ 할 수 있는데, 얼마가 들어올지 모르는 경우, heap 이라는 공간을 만든다.

ex. String 이네? 얼마 들어올지 모르겠어 → 무조건 4byte 를 잡아, 주소를 가지니까. 주소를 가진 상태로 데이터 사이즈를 확보한다. (4byte 확보하고, 주소를 가지는 것(주소의 시작번지) 데이터가 아니라) 레퍼런스 자료형 변수는 객체의 메모리 주소를 저장, 실제 객체는 힙 메모리에 저장된다.

4byte 지정해두고, 저 넓은 공터의 실제 주소를 가리키게 하는 것이 → 포인터

포인터 자료형들을 레퍼런스 자료형이라 한다.

미리 사이즈를 확보할 수 있다면 레퍼런스 자료형이라 할 수 없다. (그런 의미에서 자바는 레퍼런스 자료형^^)

타입 추론 언어들은 전부 포인터다. 메모리 사이즈를 레퍼런스 자료형으로 다 가진다.

명시적으로 값이 없음을 설정하는 null.

변수가 선언되었지만 초기화되지 않은 상태, 값이 아직 할당되지 않았음은 undefined.

아래의 user 가 자바스크립트 객체이다. 자바스크립트의 오브젝트.

key: value 가 자바스크립트의 문법.

자바스크립트에서 데이터 전송하기 (→ JSON)

이 데이터를 전송하고 싶으면, 용량을 쓸데없이 크게 전송하지 않기 때문에 띄어쓰기를 다 빼야 한다.

일자로 다 줄여서 보낸다.

내가 다른 사람한테 전송할 거니까, 버퍼에 담는다. (버퍼는 사이즈에 다 차야 전송됨, 다 안찼을 때에는 flush() 를 해야 전송됨) → BufferedWriter

받는 사람은 → BufferedReader

자바스크립트 오브젝트 타입 (→ 바로 다른 언어에 보내면 안된다. MIME 타입에 있는 것들 중 하나로 보내야 하는데, 제일 인기있는 것이 JSON ^^)


let user={id:1,username:"ssar",password:"1234"};

버퍼에 있는 걸 읽을 때, readLine() 으로 한 줄 씩 읽는다. “\n” 이 반드시 있어야 readLine 으로 읽을 수 있는 것. (기본기)

“\n” 을 붙여서 읽었다?

→ 이게 뭐지? 라고 하지 않게 ‘Content-Type’ 을 자바스크립트 오브젝트 라고 적어 놓고,

자바 오브젝트로 바꿔서 보내줘야 한다. (자바스크립트 오브젝트는 자기가 직접 파싱 못한다. 그대로 보내면 자바가 이해 못함)


class User{int id=1;String username=”ssar”,String password=”1234” + “\n”}

데이터를 타 시스템으로 전송할 때는(HTTP 통신에서), MIME 타입에 있는 걸로 전송하라는 국제적 표준이 있다.(x-www-form url 처럼~)

이건 통신을 위한 데이터 타입이라 됨, 이런 데이터로 보내주어야 한다.


id=1&username=ssar&password=1234

JSON (JavaScript Object Notation)

지금 국제적 표준이 JSON. 자바스크립트랑 비슷하게 만든 표기법으로, 텍스트 기반의 데이터 포맷이다. 통신은 자기 오브젝트가 아니라 JSON 형식으로 변환한 후 전송해야 한다.


{"id":1,"username":ssar",password":1234}

. 을 통해서 객체의 메서드나 필드를 찾을 수 있다. 문자열은 이렇게 접근이 안된다.(당근)

자바는 new int [50] 하면 50개의 공간이 필요하다, 하고 배열에 확보해 놓고 시작하는 반면,

추론형은 다르다.


let arr = [1, 2, 3];

또한 자바는 늘어나지 않는다. 처음부터 사이즈를 확보해 놓고 쓰기 때문.

배열은 연속된 공간을 확보에서 굉장히 빠르게 찾는 게 목적이거든.

But 자바스크립트는 남는 공간에 슥슥 막 넣을 수 있음. 찾아 갈 때는 현재 주소가 다음 번지 주소를 꼭 알고 있어야 한다. 쓰기는 참 쉽다.


let arr = [1, 2, 3];
console.log("배열", arr);
console.log("배열", arr[0]);
console.log("배열", arr[1]);
console.log("배열", arr[2]);

arr 하면 값을 시작번지부터 끝까지 쫙 읽음 → 123 출력

함수 function()

리턴 타입이 필요가 없다.

리턴 하고싶으면 넣고 안하고싶으면 안넣어도 된다.

클래스 안에는 메서드라 불리는 것이 존재하고(상태를 변경시키니까),

감싸는 오브젝트가 없으면 함수라고 부른다. 독립적으로 실행되는 코드 덩어리는 → 함수

자바에서는 무조건 클래스 안에 넣어야 한다.

자바에서 메서드는 매개변수로 전달이 안된다. 함수 타입은 매개변수로 받을 수 없다.

자바는 전달 받을 수 있는게 기본자료형, 클래스 타입밖에 없음, 자바는 1급 객체가 오브젝트 밖에 없음

모든 프로그램언어는 1급 객체를 가지는데, 1급 객체는 메서드의 파라미터로 전달할 수 있다.

메서드는 1급 객체가 아니다.

자바는 1급 객체가 클래스 밖에 없기 때문에, 클래스로 전부 감싸서 넘겨야 한다.


class Hello {
	void go(A t) {
	}
}
class A {
	void out() {
	}
}

하지만 자바스크립트는 다르다. 자바스크립트는 모든 게 1급 객체다. = 모든 타입을 전달 할 수 있다. = function 도 전달 할 수 있다.

자바는 함수를 담을 수 없지만, 자바 스크립트는 이것이 가능하다.

아래는 익명함수.

1급 객체는 변수에 담을 수 있다.

→ 함수를 담을 수 있다.

람다식 / 람다 표현식 (같은 의미)

람다식은 함수형 프로그래밍에서 사용되는 익명 함수(Anonymous Function)를 나타내는 표현식이다.

f1은 표현식 expression 이 아니다. (삼항연산자 → expression)

f1() 는 실행만 되고, 대입되는 게 아님

이렇게 하면 표현식이라 할 수 있음. (표현식은 반드시 어떤 값을 생성한다)

람다식은 expression이다. 리턴이 되어야 한다. 이건 람다 표현식이라 한다.

내부가 실행만 되면, 람다식

리턴이 되면 람다 표현식

람다 표현식

호출할 때에는 f1, f2 로 호출하면 됨

어떤 메서드에 매개변수의 함수를 전달하고 싶잖아,

() ⇒ 1; 를 전달하면 짧잖아~ 가독성도 좋고~

람다는 간결하다. 길게 적지 않아도 되고.

문법 정도는 알고 있어야 한다.

언어 공부 할 때는

메모리 관리 해주는 것인지 (GC 처럼)

멀티스레드/단일스레드 기반인지

인터프리터 언어인지/컴파일 언어인지 구분

1급 객체가 뭔지 확인

얘가 static 이 어딨어, main 이 없는데^^ 처음 공부했던 language 에 대한 파악이 있어야 한다. 비교하면서 공부하면 빠름.

See more posts

[자바스크립트] 기본 문법 (1)

자바스크립트에서 자주 사용하게 되는 단축키

자바스크립트

타입 추론

자바스크립트에서 데이터 전송하기 (→ JSON)

JSON (JavaScript Object Notation)

함수 function()

람다식 / 람다 표현식 (같은 의미)

More articles

[자바스크립트] DOM 숨기기 (3)

[자바스크립트] 이벤트 Event (2)

[웹사이트 만들기] airbnb 웹 화면 만들기 (main) (2)

[웹사이트 만들기] airbnb 웹 화면 만들기 (main) (1)