JS 입문 기초 정리

본 포스팅은 정말 정말 처음 입문하는 사람의 공부 기록입니다... ~~얻어가실 정보는 별로 없겠지만~~ 혹시 틀린 부분이 있다면 언제든 댓글 달아주세요!

<aside> <img src="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1567070889/noticon/otinww0jdkhz7ninctnu.png" alt="https://noticon-static.tammolo.com/dgggcrkxq/image/upload/v1567070889/noticon/otinww0jdkhz7ninctnu.png" width="40px" /> 배운 언어라고는 C언어 밖에 없었던 완전 생초보의 인생 첫 객체지향 언어 JS 공부 기록

</aside>

Watch Now - 노마드 코더 Nomad Coders

강의

0. 자바스크립트

자바스크립트란 모든 브라우저에 내장되어 있는 객체 기반의 스크립트 프로그래밍 언어이다. html, css와 함께 사용하여 웹 어플리케이션 등을 만들 수도 있고, 백엔드도 자바스크립트로 할 수 있다고 한다.

위 강의는 HTML과 CSS, JS를 이용하여 Momentum 이라는 웹 어플리케이션을 만드는 것을 목표로 한다.

1. Html + CSS 와의 연동

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">     //CSS
	<title>title</title>
</head>
<body>
	<script src="app.js"></script>               //JS
</body>
</html>

html 파일 내에서 css 파일과 js 파일을 연동시킨다.

2. 변수, 데이터타입

const a = 123;
const b = 3.1415;
const str = "string";
const tf = true;

정수, 실수, 문자열, true/false 등이 데이터 타입이 존재한다.

const a = 100;
a = 101; // error

let b = 50;
b = 60; //success

var c = 10;
c = 15; //success

const 는 뒤에서 수정할 수 없다. 변경하려고 할 시 console 에서 error 발생.

let 은 수정 가능한 변수.

var 도 뒤에서 수정 가능. (하지만 본 강의에서는 쓰지 않음. 처음 js가 만들어질 때 사용된 것이므로 const와 let을 구분할 수 없어 잘 쓰지 않는다.)

const ud;

console.log(ud);

→ undefind 라고 출력된다. 선언만 하고 초기화를 해주지 않았을 때 값이 정의되지 않았다는 의미인 undefind 가 출력된다. 값이 없다는 의미인 null 과는 다르다!

3. 배열

const arr = ["one", "two", "three", 4, 5];
arr.push("six");
arr.pop();
console.log(arr);

배열 선언은 [] 로 한다. 여러 데이터 타입을 섞어서 사용할 수 있다.

arr.push(value) 로 값을 추가할 수 있고, arr.pop() 을 이용하여 삭제할 수 있다. (스택 방식으로 가장 마지막 값이 pop 된다.)

4. 객체

const player = {
	name : "sehyan",
	age : 22
};

player.lastname = "An";

객체 선언은 {} 로 하고, 각 요소는 , 로 구분한다.

처음 선언 때 추가되지 않았던 값도 후에 추가할 수 있다. 위처럼 작성할 시 player 객체에 lastname 요소가 "An" 으로 초기화되어 추가된다.

const 로 선언되었지만 객체 자체는 변경할 수 없어도 안의 요소들은 변경할 수 있다.

const obj = {
	name: "hello",
	sayHi: function(n) {
		console.log(n);
	}
}

obj.sayHi("Hi!");

위처럼 객체 안에 함수를 넣을 수도 있다.

5. 비교연산자

=== : 같다

!== : 같지 않다

6. 함수

function printHello(str) {
	console.log(str);
}

printHello("Hello world!");

함수는 function으로 선언한다. 매개변수는 () 안에 받고, 그 매개변수를 함수 안에서 사용할 수 있다.

let res = 10;

function calKrAge(age, res){
	age += 2;
	res += 5;
	console.log(res); //res = 15;
	return age;
}

console.log(calKrAge(30, res)); // age = 32
console.log(res); //res = 10;

C언어처럼 포인터가 있지 않기 때문에, 위처럼 작성해도 함수 안에서 쓰인 res 는 변하지 않는다. 함수에서 return 한 값이 쓰일 뿐, 그 내부에서 바뀐 것들은 직접적으로 바뀌지 않는다. 저렇게 함수 안에서 변수를 바꾸고 싶을 땐 객체를 매개변수로 보내고, 함수 내부에서 객체 안의 요소를 바꿔주어야 한다.

~~데이터타입을 선언할때 구분해주지 않아도 된다니...~~

~~배열을 만들때 메모리 할당을 해주지 않아도 된다니...~~

~~정의되지 않은 값이 undefined 로 나온다니...~~

~~포인터...가 없다니..~~.

~~함수 매개변수도 타입을 정의해주지 않아도 된다니...~~