배운 언어라고는 C언어 밖에 없었던 완전 생초보의 인생 첫 객체지향 언어 JS 공부 기록
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
복사
index.html
html 파일 내에서 css 파일과 js 파일을 연동시킨다.
2. 변수, 데이터타입
const a = 123;
const b = 3.1415;
const str = "string";
const tf = true;
JavaScript
복사
정수, 실수, 문자열, true/false 등이 데이터 타입이 존재한다.
const a = 100;
a = 101; // error
let b = 50;
b = 60; //success
var c = 10;
c = 15; //success
JavaScript
복사
const 는 뒤에서 수정할 수 없다. 변경하려고 할 시 console 에서 error 발생.
let 은 수정 가능한 변수.
var 도 뒤에서 수정 가능. (하지만 본 강의에서는 쓰지 않음. 처음 js가 만들어질 때 사용된 것이므로 const와 let을 구분할 수 없어 잘 쓰지 않는다.)
const ud;
console.log(ud);
JavaScript
복사
→ undefind 라고 출력된다. 선언만 하고 초기화를 해주지 않았을 때 값이 정의되지 않았다는 의미인 undefind 가 출력된다. 값이 없다는 의미인 null 과는 다르다!
3. 배열
const arr = ["one", "two", "three", 4, 5];
arr.push("six");
arr.pop();
console.log(arr);
JavaScript
복사
배열 선언은 [] 로 한다. 여러 데이터 타입을 섞어서 사용할 수 있다.
arr.push(value) 로 값을 추가할 수 있고, arr.pop() 을 이용하여 삭제할 수 있다. (스택 방식으로 가장 마지막 값이 pop 된다.)
4. 객체
const player = {
name : "sehyan",
age : 22
};
player.lastname = "An";
JavaScript
복사
객체 선언은 {} 로 하고, 각 요소는 , 로 구분한다.
처음 선언 때 추가되지 않았던 값도 후에 추가할 수 있다. 위처럼 작성할 시 player 객체에 lastname 요소가 "An" 으로 초기화되어 추가된다.
const 로 선언되었지만 객체 자체는 변경할 수 없어도 안의 요소들은 변경할 수 있다.
const obj = {
name: "hello",
sayHi: function(n) {
console.log(n);
}
}
obj.sayHi("Hi!");
JavaScript
복사
위처럼 객체 안에 함수를 넣을 수도 있다.
5. 비교연산자
=== : 같다
!== : 같지 않다
6. 함수
function printHello(str) {
console.log(str);
}
printHello("Hello world!");
JavaScript
복사
함수는 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;
JavaScript
복사
C언어처럼 포인터가 있지 않기 때문에, 위처럼 작성해도 함수 안에서 쓰인 res 는 변하지 않는다. 함수에서 return 한 값이 쓰일 뿐, 그 내부에서 바뀐 것들은 직접적으로 바뀌지 않는다. 저렇게 함수 안에서 변수를 바꾸고 싶을 땐 객체를 매개변수로 보내고, 함수 내부에서 객체 안의 요소를 바꿔주어야 한다.
데이터타입을 선언할때 구분해주지 않아도 된다니...
배열을 만들때 메모리 할당을 해주지 않아도 된다니...
정의되지 않은 값이 undefined 로 나온다니...
포인터...가 없다니...
함수 매개변수도 타입을 정의해주지 않아도 된다니...
