-
KOSTA 교육 31일차(JavaScript, 문법, 변수, 함수, 객체, Prototype)Review 2020. 6. 23. 00:56
18.12.11(화)
배운 내용
- JavaScript는?
- 문법
- 변수
- 함수
- 객체
- Prototype
1. JavaScript
JavaScript는?
웹페이지에서 능동적으로 바뀌는 컨텐츠를 만들어주는 언어이다.
JIT 컴파일러를 도입함으로서 기존의 인터프리터 방식보다 느린 실행 속도를 개선하였다.자바스크립트의 장단점
장점
- 다른 언어에 비해 간단하고 배우기가 쉬움(물론, 깊이 들어갈 수록 어렵다-상대적인 부분)
- HTML과 같이 플랫폼에 독립적이다.
- 시스템의 부담이 적다.
단점
- 코드의 보안성이 취약하다.(Typescript로 보완 가능)
- 내장함수의 한계를 가지고 있다.
- 디버깅 및 개발도구가 부족하다(최근에 개선이 많이 된 상태)
HTML 내에서 JavaScript 사용 방법
<head>에 선언
<body>에 선언
2. 문법
JavaScript는 고급 언어는 아니지만 고급 언어가 가지고 있는 대부분의 문법들을 가지고 있다. C의 문법구조와 유사하며 문맥은 Java와 유사하다.
코드 작성시 유의사항
문법 종류 및 예제
- 출력문 : console.log(typeof 변수이름);
- null값과 undefined의 차이 : null은 null이라는 값이 존재하는 것이고 undefined는 아예 값이라는 것이 존재하지 않는 상태를 말한다.
- 변수에 함수를 담을 수 있다. 함수를 담게되면 그 변수는 함수의 역할을 수행한다.
- 기존에 데이터타입을 선언한 변수에 새롭게 데이터타입을 선언하면 새롭게 바꾼 타입으로 변경된다.
- eval(), parseInt() 함수는 문자를 정수형으로 바꿔주는 역할을 수행한다.
하지만 더 나아가 parseInt는 정수형 변환 뿐만 아니라 자체판단하여 정수형으로 바꾸어준다. - ===는 형변환을 제외한 진짜 값 만을 비교한다.
3. 변수
데이터를 보관하는 장소로 메모리상에 값을 저장할 수 있는 장소이다.
전역변수와 지역변수로 나눌 수 있다.- 선언 방법 : var 변수이름 = 변수;
- var 초기값은 undefined값이 출력, 특정 값을 지정하지 않고 선언하여 초기화 할 시에는 null값을 선언한다.
변수 예시
- 전역변수 : 함수 밖에서 선언된 변수(필드로서 전체 다 사용한다.)
- 지역변수 : 함수 안에서 선언된 변수(함수 내에서만 사용 가능하다.)
- 지역변수보다 함수에 대한 변수가 먼저 출력이 된다.
- 함수에서 지역변수를 출력하기 위해 this. 를 사용하게 되는데 여기서의 this.는
window.로서 사용된다.
4. 함수
함수는?
프로그램 내에서 특정 작업을 수행하기 위해 사용하는 기능이다.함수 선언 방법
- 함수를 선언할 때 <head> 내에서 선언한다.
- 선언 방법 : function 함수이름(매개변수1, 매개변수2, …..){함수 내용}
내부 함수 선언
- <script type></script>를 내부에서 선언한다.
외부 함수 선언
- js 파일을 따로 생성하여 함수를 만든다.
- 이 파일을 src로 호출하여 가져와 선언 할 수 있다.
함수 선언의 종류
- 선언적 함수 : 함수를 바로 선언하여 생성한 함수를 말한다.
- 함수 내에 지역변수를 선언하고 해당 변수를 return해준다.
- console문을 이용하여 함수를 출력한다.
- 익명 함수 : 변수에 함수를 대입하여 함수를 만든다.
- 변수 선언과 동시에 함수를 선언하여 변수에 함수를 넣는다.
이 변수는 또한 다른 변수에 전달이 될 수 있다. - 함수의 매개변수 값 내에도 함수가 들어갈 수 있다.
- foo 변수의 함수의 매개변수 값이 function이면 foo함수를 출력한다.
- 함수 내에서 함수를 return이 가능하다.
- foo2 변수에 함수 내에서 return을 할 함수를 선언하고 foo2에 대한 변수를 지정하고 변수();를 하면 함수값 그대로가 출력된다.
함수 선언 예제
- 전역변수는 value1, printFunc() 함수 안에 있는 지역변수는 value2이다.
- printValue 함수는 value값을 return하는데 지역변수보다 전역변수보다 먼저 출력된다.
- console문을 통해 printValue를 출력하면 value2값이 출력된다.
- printValue는 value를 return하고있다.
- printFunc은 func 매개변수 값을 가지고 있으며 value2 값을 가진 변수를 가지고 있다.
- 여기서 printFunc(printValue);는 이미 printValue값이 들어갔기 때문에 return된 value1 값이 출력된다.
5. 객체
객체는?
데이터와 그 데이터에 관련된 동작을 포함한 개념이며 식별이 가능하고 자신의 속성을 가지고 있는 것을 말한다.프로퍼티(Property) & 메소드(Method)
- 프로퍼티는 객체에 대하여 ‘.’을 이용하여 객체의 속성을 사용할 수 있다.
- myCar(객체).model(속성) = “sonata”; 를 이용하여 객체의 속성은 sonata 라는 값을 할당시켰다.
- 메소드는 동작을 수행하는 객체를 동작하기 위해 지시(정의)하는 역할을 한다.
- 메소드에 대한 생성자를 생성하고 new 연산자를 통해 값을 선언하고 호출시키면 해당 값이 출력된다.
객체 생성 방법
- new Object()를 이용한 객체 생성
- 문자형 표기(리터럴)에 의한 객체 생성
- 생성자 함수에 의한 객체 생성
- Object 객체 생성은 가장 간단히 객체를 생성할 수 있다.
데이터타입 변수명 = new Object();를 이용하여 변수이름 객체를 생성할 수 있다. - 객체.(프로퍼티)속성으로 값을 선언하고 출력이 가능하다.
- Object 객체는 재사용 및 재정의의 한계가 있다. (속성을 하나밖에 정의하지 못하기 때문)
- 리터럴 객체 생성은 배열, 임의의 자바스크립트 표현, 값을 포함 가능하다.
Key와 Value값으로 구분하여 선언한다. - 데이터타입 변수명 = {객체 이름1 : 객체 값, 객체 이름2 : 객체 값, …..}로 선언 가능하다.
- 코드를 구현하기 위해 display명의 메소드를 사용하여 this.를 사용하여 선언하고
변수명.display();를 통해 출력한다. - 번외로 함수도 마찬가지로 객체취급이 가능하여 함수명.속성을 통하여 출력이 가능하다.
- 퀴즈는 위에서 나타낸 것과 동일하게 리터럴 형식으로 변수를 선언하고 프로퍼티를 통하여 속성값을 선언하고 return하는 함수도 선언하여 출력한다.
- 생성자 함수 객체 생성은 객체의 속성과 메소드를 정의하기 위한 함수이다.
- 함수명(매개변수1, 매개변수2, …..){this.속성1 = 속성값;, this.속성1 = 속성값;, ….}로 선언한다.
- 예제에서는 grade를 student객체에 선언하여 매개변수를 동일하게 사용할 수 있게 해주었다.
- 각 메소드별로 return값을 주고 toString을 통하여 출력하였다.
- 여기서 출력메소드를 생성하고 new 연산자를 통하여 출력해도 무방하다.
Ex) var stu1 = new student(‘홍길동’,90, 80, 70); - 배열 생성을 통해 배열 내에 객체 들을 넣어줄 수 있다.
자바와는 다르게 대괄호로 선언한다. - .puch()를 이용하여 배열 내에 객체를 생성하여 각 함수의 매개변수 값을 넣어준다.
- for-in문을 통하여 i가 배열 최대까지 반복할 때 toString을 통하여 화면에 출력되도록 한다.
6. Prototype
Prototype은?
함께 사용할 수 있는 공통의 메모리 공간을 가진 객체로서 새로운 속성과 메소드를 추가할 때 사용한다.프로토타입 예시
- 먼저 프로토타입을 사용하기 전에 함수를 선언하여 객체를 생성할 준비를 한다.
- 프로토타입이 없다면 student객체별로 일일이 toString(), getSum(), getAverage() 를 입력해야하는 수고스러움이 있음 때문에 중복되는 내용을 프로토타입에 담는다.
- 프로토타입 선언 : 함수명.prototype = {프로토타입 내용1, 프로토 타입 내용2, ….}
- 해당 생성자들을 출력하기 위해 배열을 선언하여 push로 객체를 생성하여 매개변수의 값을 넣어준다.
- for-in문으로 최대배열값까지 반복하고 toString으로 출력해준다.
오늘 교육 간 느낀점
드디어 프론트엔드의 꽃 JavaScript를 시작했다. 확실히 Java를 해본 사람이라면 적응은 금방 가능했다. 하지만 함수에 대한 부분이 자바와 너무 다른 부분이 있어서 오히려 처음 배우는 것보다 헷갈리는 부분이다.
특히 객체를 생성하는 방식이나 함수를 선언하는 방식이 Java와는 차이가 있어서 습득하는데 시간이 좀 걸릴 것 같다. 또 교육과정이 짧다보니 많은 내용을 3일 안에 끝내려다 보니 하루에 공부할 내용이 너무 많아서 서로의 개념이 섞여 더욱 헷갈린다..
안그래도 Java를 복습하면서 JavaScript를 동시에 하니 끔찍한 혼종 코딩이 나오곤 한다..
내일은 내부함수 부터 시작해서 엄청나게 진도를 뺄 예정인데 오늘 교육받은 내용을 제대로 숙지해서 내일 확실하게 이해할 수 있도록 노력해야겠다.'Review' 카테고리의 다른 글
KOSTA 교육 33일차(This, Window, DOM, AJAX, JQuery) (0) 2020.06.23 KOSTA 교육 32일차(내장객체, Array, String, Date, 정규표현식, 이벤트) (0) 2020.06.23 KOSTA 교육 30일차(HTML5, 시맨틱 마크업, CSS, link, Font, 박스모델, 테이블&테두리 속성) (0) 2020.06.23 KOSTA 교육29일차(HTML, Tag, div, ol, ul, li, head, meta, body, form, h, input, type) (0) 2020.06.23 KOSTA 교육 28일차(Project-숙박업소 예매) (0) 2020.06.21