Search
Duplicate

JS 기초 정리

배운 언어라고는 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 로 나온다니...
포인터...가 없다니...
함수 매개변수도 타입을 정의해주지 않아도 된다니...