*Udemy의 "The Complete Web Developer in 2019 : Zero To Mastery" 강의에서 학습한 내용을 정리한 포스팅입니다.
*https://soldonii.github.io에서 2019년 7월 10일(수)에 작성한 글을 티스토리로 옮겨온 포스팅입니다.
*자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :)
1. 자바스크립트의 데이터 타입
# Javascript Types
: Number, String, Boolean, Undefined, Null, Symbol(new in ECMAScript6), Object
2. Variables, Control Flow
# 변수(Variables)
왜 변수를 선언해야 할까? 프로그래머는, 컴퓨터는 효율적으로 일해야 한다. 반복적인 일을 계속 하는 것은 효율적이지 못하기 때문에, 변수에 저장해서 쉽고 빠르게, 효율적으로 사용하는 습관을 들여야 한다.
변수는 숫자, 기호로는 시작할 수가 없으며(ex. let 3 = something 과 같은 선언은 불가능), 변수 선언 시에는 camelCase를 활용한다. 어떠한 data type도 변수에 담을 수 있다.
# Control Flow(조건문)
조건문(conditional statement)은 if, else if, else 구문으로 이뤄지며, 논리연산자(logical operator) &&(AND), ||(OR), !(opposite) 등을 활용하여 조건을 지정할 수 있다.
3. Javascript On Our Webpage
HTML 파일 내에 Javascript 파일을 포함시키기 위해서는 아래와 같이 <body> tag의 맨 마지막에 <script> tag를 활용하여 Javascript 파일을 불러와야 한다. <body> tag의 가장 마지막에 Javascript 파일을 불러와야 website의 로딩 속도가 더 빨라진다.
<body>
<script type="text/javascript" src="script.js"></script>
</body>
4. Functions
Javascript에는 내장된 function이 존재하지만, 필요에 따라서 프로그래머가 직접 function을 만들어 사용할 수도 있다. 함수를 실행하기 위해서는 함수를 calling해야 하며, 함수명 뒤에 () 를 붙여 함수를 실행한다.
# parameter vs. argument
parameter는 함수가 수신받아야 하는 인자이며, argument는 실제로 parameter에 사용자가 전달한 인자이다.
const add = function(num1, num2) { // num1, num2가 parameter이다.
return num1 + num2;
}
add(3, 7); // 3, 7이 argument이다.
# 함수 선언하기
함수 선언에는 크게 두가지 방식이 있다.
// 1. function declaration
function sayHello() {
console.log("Hello");
}
// 2. function expression
let sayBye = function() {
console.log("Bye");
}
첫번째 방식을 “함수 선언식(function declaration)”라고 한다. 위 사례에서 함수의 이름은 sayHello 이다.
두번째 방식을 “함수 표현식(function expression)”라고 한다. 변수 sayBye 에 함수가 선언되어 있기는 하지만, 이 함수에 이름은 없는 상태이다. 이러한 방식으로 선언된 함수를 Anonymous Function(익명함수)라고 한다.(물론 익명함수에도 똑같이 함수명을 부여할 수는 있지만, 일반적으로는 부여하지 않는다.) 함수 표현식으로 함수를 선언하면, 변수 sayBye 를 referencing 해야지만 이 함수에 접근할 수가 있다.
# 함수 return하기
모든 함수는 반드시 return이 필요하다. return해주지 않으면, 함수 실행의 결과는 undefined이다. 이는 아무런 의미도 없다. 또한 return하는 순간 함수는 종료된다. 따라서 하나의 함수 안에 여러 개의 return을 입력할 경우, 최초의 return을 제외한 나머지는 무시된다.
⇒ 만일 조건에 따라 다른 return이 필요한 경우에는, 조건문(coditional statement)를 활용한다.
5. Data Structures : Arrays, Objects
데이터가 많아질 경우, 일련의 데이터들을 조직된 형태로 저장하고 이용할 수 있는 구조가 필요하다. 이러한 구조를 data structure라고 하며, Javascript에서는 array(배열)와 object(객체)가 data structure의 대표적인 종류 중 하나이다.
배열 안에는 number, string, boolean, function 등 모든 type의 데이터를 담을 수 있고, 배열 내에 배열도 담을 수 있다.
배열에 사용가능한 사전 정의된 함수들이 존재하는데, 이를 array method라고 부른다. .shift(), .pop(), .push(), .concat(), .sort() 등이 이에 해당된다.
# array vs. object
배열은 index와 value로 이루어져있고, 반면 객체는 key와 value로 이루어져 있다. 하지만 본질적으로 결국 동일하다. 배열의 type은 object이기 때문이다.(배열은 key가 index로 이루어진 객체일 뿐이다.)
위에서 method라는 용어가 등장했는데, method는 쉽게 말해 객체 내에서 정의된 함수이다.(메소드의 이름이 객체의 key이며, 실행될 함수가 value이다.) 예를 들면 console.log("blahblah") 또한 method의 한 종류이다. 즉, console 이라는 내장 객체 내에서 정의된 내장 함수이다. 참고로 안이 완전히 텅 비어있는 객체는 Null이다.
6. Javascript Terminology
헷갈리지 않도록 Javascript 관련 용어를 잘 정리하고 가자. 일부 위 내용과 중복될 수 있다.
- 함수 선언식(function declaration)
function newFunction() {
}
- 함수 표현식(function expression)
let newFunction = function () {
};
- 표현(expression) = something that produces a value
1*3;
var a = 2;
return true;
- 함수 호출(calling or invoking a function)
alert();
newFunction(param1, param2);
- 변수 할당(assign a variable)
let a = true;
- 함수(function) vs. 메소드(method)
function thisIsAFunction() {
}
var obj = {
thisIsAMethod: function() {
}
}
thisIsAFunction() // accessing a function
obj.thisIsAMethod() // accessing a method
7. Loops
프로그램을 만들다보면, 특정 일을 반복해야 하는 경우가 발생하는데, ‘for loop’, ‘while’, ‘do’, ‘forEach’ 네 가지 구문을 활용하여 반복문을 만들 수 있다.
1. for loop
for (let i = 0; i < todos.length; i++) {
// do something
}
2. while
let counterOne = 0;
while (counterOne < 10) {
// do something
counterOne++;
}
3. do
let counterTwo = 10;
do {
console.log(counterTwo);
counterTwo--;
} while (counterTwo > 0);대부분의 경우, while, do보다 for loop 을 주로 사용하게 될 것이다. 그리고 이 for loop 은 .forEach() 로 더욱 쉽게 실행할 수 있다.(.forEach() 를 활용하면 index를 거치지 않고도 바로 value에 접근할 수 있다.)
while과 do while의 차이는?
- while loop : condition check을 먼저 진행한 후, 할 일을 진행한다.(ex. counterOne이 10보다 작은지 condition을 먼저 check, true면 counterOne++를 진행한다.)
- do while loop : 할 일을 먼저 진행한 후, condition check를 진행한다.(ex. console.log(counterTwo) 를 진행한 후, counterTwo— 를 실행하고, 이후에 counterTwo 가 0보다 큰지 condition check를 진행한다.)
'Javascript 공부 > Zero To Mastery(-)' 카테고리의 다른 글
| (10) 자바스크립트 심화 1 - scope, 삼항조건 연산자, 화살표 함수 등 (2) | 2019.08.27 |
|---|---|
| (9) DOM 조작 (0) | 2019.08.27 |
| (7) 부트스트랩 4(Bootstrap 4) (0) | 2019.08.27 |
| (6) CSS3 심화 문법 (0) | 2019.08.27 |
| (5) CSS3 기본 문법 (0) | 2019.08.27 |
댓글