Javascript | Review

01. Introduction to Javascript

• 프론트앤드 개발자의 가장 큰 역할은 자바스크립트를 사용하여 웹페이지를 더욱 dyanmic 하고 interactive하게 만드는것
• Javascript를 실행시키려면
  1) 브라우저가 존재해야하고
  2) HTML파일이 있어야하고
  3) HTML파일에서 Javascript 파일을 연결시켜줘야 한다.
• alert()함수나 console.log()와 같은 자바스크립트에 이미 정의된 단어들을 약속어 (Reserved Words)라고 한다.

02. 주석 Commenting

• 주석이란, '코드를 작성하기는 했지만 브라우저에서 해당 코드를 실행시키지 말고 무시하라'라는 뜻으로 쓰인다.
• 주석을 사용하는 이유: 특정 코드가 필요없지만 혹시 몰라서 남겨두고 싶을때, 인수인계 해야해서 코드 설명을 해야할때, 코드를 볼때마다 이해가 안가서 풀어서 써놓았을때
• 한줄 주석 //, 여러줄 주석 /*...*/

03. Variables (변수)

• 컴퓨터가 많은 데이터를 기억해야할때 사용한다.
  
• naming convention:
  1) 한 파일에서 같은 변수 이름을 중복해서 사용할수 없다
  2) 대소문자 구분 myName !== MyName
  3) 변수 이름을 정할때 첫번째 문자는 반드시 글자, 밑줄_, 달러기호$
  4) 두번째 문자부터는 자유롭게 쓸수있음
  5) 변수이름, 함수이름등 camelCase 방식 사용
• let: 변수값을 수정할수 있다
• const: 변수값을 수정할수 없다
• let의 역할은 변수를 '생성'하는 것이다.
• 변수의 선언과 할당은 분리 될수 있다.

let address; //선언
address = "선릉"; //할당

• 변수 이름은 중복되면 안되지만, 값은 얼마든지 중복 가능하다.

04. Function (함수) - 기본

• 함수란, 하나의 특정한 작업을 수행하도록 설계된 독립적인 블록
• 함수를 불러 실행 시킨다 = 함수를 호출한다

//함수를 정의한다
function checkCorrect() {
  let hi = "안녕하세요";
  
  return hi;
}
//함수를 호출한다
checkCorrect();

05. Function (함수) - 데이터 반환하기 (1)

• 모든 함수는 반환(return) 한다
• 모든 함수가 return을 꼭 써야하는것은 아니지만 함수는 항상 무언가를 반환하고 있다.
• 함수가 반환을 생략하면 undefined라는 값을 반환한다.
• 매개변수 (parameter): 외부에서 들어오는 값을 담아 함수 내부에서 사용하도록 하는 변수의 역할/ 함수 외부로부터 들어온 값이 담길 '자리' 혹은 '변수의 이름'
• 인자 (argument): 실질적으로 그 자리에 들어갈 값

///name = 매개변수 parameter
function getName(name) {
  return name + '님';
}
// '개발자' = 인자 argument
getName('개발자')

06. Math Expressions

• JS코드에 숫자 데이터타입과 숫자 표현식을 사용하여 수학계산을 할수있다.
  

//let newNum = num++
let num = 1; // num = 1
let newNum = num; 
num++; // num = 2, newNum = 1

//let newNum = ++num
let num = 1; // num = 1
num++; // num = 2
let newNum = num; // newNum, num = 2

07. 텍스트 문자열의 연결

• 텍스트는 +로 연결 가능하다

let message = "감사합니다. ";
let userName = "김개발";
let banger = "님!";
let customMess = message + userName + banger;
console.log(customMess); //''감사합니다. 김개발님!''

• 텍스트 + 숫자

2 + 2 //4
'2'+ 2 //'22'
'2'+'2'//'22'

• string과 number를 더하면 항상 string형으로 반환된다

08. if문

• if = 만약에 ~하면 ~한다
  
  
• 조건문은 위에서부터 차례로 조건을 체크하면서 내려온다
• 중간에 true가 되어버리면 그대로 반환된다 -> 순서가 중요하다

09. 비교연산자

• 동치연산자 ==,===,!=,!==
• 관계연산자 >,<,>=,<=
• 일치연산자 === 값과 타입이 같은지를 비교하는 동등 비교 연산자 (equality operator), 엄격한 비교연산자
• 불일치 연산자 !== 같지 않음
• 동등연산자 == 느슨한 비교연산자
• 되도록이면 ===를 쓰자

10. 논리연산자

• or ||
  
• and &&
• \\나 &&를 쓸때 괄호로 어디까지 묶어주는지가 중요하다 **

11. Function(함수) - 데이터 받기

• 함수를 정의했다고 바로 호출이 되지 않는다

function alertSuccess() {
  alert("로그인 성공!");
}

• 함수를 직접적으로 호출을 해야한다

alertSuccess()

-인자값을 전달 하는 경우

function alertSuccess(name) {   
  alert(name + "님 로그인 성공!"); 
}
alertSuccess("김개발") // "김개발님 로그인 성공!"

12. Function(함수) - parameter, argument

• 함수를 정의하면서 ()안에 있는 변수 = parameter 매개변수
• 어떤 함수를 호출 하면서 괄호안에 정의된 값/변수 = argument 인자

13. Function(함수) - 여러 인자

• 함수에 여러개의 인자를 전달할수 있다

function meetAt(year, month, date){
  if (year && month && date){ //
    return year+"/"+month+"/"+date
  }
  if (year && month) {
    return year+"년 "+month+"월"
  }
  if (year){
    return year+"년"
  }
  return 
}
//year+"년" 먼저 할 경우 월과 일이 있어도 year이 true로 early return 되어버림 **
meetAt(2021) //2021년
meetAt(2021,2) //2021년 2월
meetAt(2021,2,11) //2021/2/11

14. Function(함수) - 데이터 반환하기 (2)

• 모든 함수는 return 한다
• return이 생략 된 함수들도 모두 return한다 -> undefined

15. Array

• 배열을 사용하면 하나의 변수에 모든 데이터를 가지고 있을수 있다
• 요소와 요소 사이는 쉼표로 구분한다
• index는 1이 아닌 0부터 시작한다

16. for문

• for문을 사용하면 코드를 원하는 만큼 반복 시킬수 있다
• 실행조건에 따라 언제부터 언제까지 반복하라고 알려주기만 하면 되다

for (반복조건) {
   //반복조건이 맞으면 실행할 코드
}

17. 배열 조작하기

• 배열에 요소를 추가하기전에 빈 배열을 선언을 꼭 해줘야한다 **
• array.push(): array의 마지막부분에 요소를 추가
• array.unshift(): array의 맨 앞부분에 요소를 추가
• array.pop(): array의 마지막부분 요소를 제거
• array.shift(): array의 맨 앞부분에 요소를 제거
  

18. 데이터 타입

• Data types: string, Number, Boolean, undefined, Null, Symbol
• typeOf 연산자

typeof 42 //number
typeof 'word' //string
typeof true //boolean
typeof undefined //undefined
typeof null //object
typeof [] //object

• null의 데이터타입은 object; null은 빈 객체를 참조하고 있다
• array의 데이터타입은 object; 배열은 확장된 객체

![] //false >> 빈배열은 true
!{} //false >> 빈객체는 true
!0 //true >> 0은 false
!100 //false >> 100은 true
!'' //true >> 빈스트링은 false
!'hi' //false >> 스트링은 true
!NaN //true >> NaN는 false
!undefined //true >> undefined는 false

• 변수만 선언하고 값을 할당하지 않았다면 변수는 undefined
• Object는 key:value로 이루어졌다

19-1. String

• string은 대소문자가 구분된다

"Word" !== "word"

• toUpperCase(), toLowerCase()
• 전화번호는 '0'으로 시작하기때문에 string으로 관리해야한다

let sayHi = "Hello, World!"
sayHi.indexOf("World") //7

• .slice vs .splice
• .slice(잘릴 시작위치, 잘릴 끝위치(포함X))
• .splice(어디에서, 몇개잘릴지, 뭘추가할지)

19-2. String <-> Number 변환

• 자바스크립트 언어의 특징: 데이터 타입을 신경쓰지 않는다
• parseInt

let string = "305"
parseInt(string) // 305 Number!

20. 날짜와 시간

Date() // 'Thu Feb 11 2021 18:33:59 GMT+0900 (Korean Standard Time)'

rightNow = new Date() // 'Thu Feb 11 2021 18:33:59 GMT+0900 (Korean Standard Time)'
year = rightNow.getFullYear(); // 2021
month = rightNow.getMonth()+1; // 2
date = rightNow.getDate(); // 11
day = rightNow.getDay(); // 4 (Thurs)
currentHour = rightNow.getHours(); // 18
currentMin = rightNow.getMinutes(); // 33
time = rightNow.getTime() // 1613036562629

• getTime()은 밀리초로 표현된다

21. Number

• Math.round() 반올림
• Math.ceil() 올림
• Math.floor() 내림
• Math.random() 랜덤수

22. Object (1)

• 해당 객체의 property값에 접근하는 방법 2가지
  

23. Scope

• block: 중괄호로 감싸진것
• block내부에서 변수가 정의되면 변수는 오로지 block내부에서만 사용할수 있다
• block내부에서 정의된 변수는 local변수라고 한다
• scope: 변수가 선언되고 사용할 수 있는 공간
• block밖인 global scope에서 만든 변수를 global variable (전역변수)
• global variable 전역변수는 어디서든 접근 가능하다
• global variable을 선언하면 어디에서나 사용할수 있는 global namespace를 갖는다
• namespace: 변수이름을 사용할 수 있는 범위, scope라고도 하지만 변수이름은 namespace라고 한다
• global variable은 프로그램이 종료될때까지 계속 살아있다
• tightly scoping된 변수는 코드 품질을 올려준다!
  1) 코드가 block으로 명확히 구분되기때문에 코드 가독성이 올라간다
  2) 각각의 기능별로 block을 나누면 이해하기 쉽다
  3) 코드를 수정할 일이 있을때도 유지보수가 쉽다
  4) 프로그램이 끝날때까지 변수가 살아있는게 아니라서 메모리 절약이 된다
• global variable은 쓰지 않도록 노력해야하고 최대한 블락 {}내에서 let, const를 사용하여 변수를 써야한다.

24. Class

• 객체지향 프로그래밍이란, 프로그램들을 객체들로 구성하고 객체들 간에 서로 상호작용하도록 작성하는거다.
• 자바스크립트는 객체지향 중심에 있는 언어는 아니다
• CSS의 class랑은 완전 다른 개념! **
• instance 인스턴스: class를 통해 생성된 객체
• '인스턴스화': class를 객체로 생성하는 과정

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}

• Car = class 이름, 대문자로 시작, CamelCase
• Car class의 instance를 생성할때마다 constructor method가 호출
• constructor() method는 name, price 2개의 인자 argument를 받는다
• constructor()에서 this를 사용, class의 실행범위 context에서 this는 해당 instance를 말한다
• constructor()에서 인자로 넘어오는 name과 price를 사용해 car instance의 name, price property값을 할당
• 이렇게 클래스 내에서 name, price같이 변경 가능한 상태값이자 class내의 컨텍스트에서 어느곳에서나 사용할수 있는 변수를 "멤버 변수"라고 한다
• 멤버변수는 'this'로 접근
• instance는 class의 property이름과 method를 갖는 객체
• instance마다 모두 다른 property값을 갖고 있다
• methods는 함수
• method: 객체object가 property값으로 갖고 있는것

25. Object (2)

• 객체의 key에는 스페이스, 한글, 특수문자가 들어갈수있다
• 객체에 저장된 값이 함수일때, Methods메서드라고 부른다

let methodObj = {
  do: function() {
    console.log('메서드 정의는 이렇게');
  }
}

26. Arrow Function

• ES = ECMA Script
• 현재 ES10까지 나왔는데 주로 쓰이는것은 ES6

//ES5
const getName = function(name) {}
//ES6
const getName = (name) => {}
const getName = name => {}

//ES6
const hi = name => { return name };
const hi = name => name; // {} 생략 가능!

27. Template Literals, String Method

• string을 작성할때 back tick으로 감싸줄수있다

const name = `김개발`;

• 그리고 back tick으로 감싸면 그 안에 변수를 넣어서 표현할 수 있다

const name = '김개발';
const hi = `안녕하세요. 저는 ${name} 입니다.`;
//ES5 문법
const hi = '안녕하세요. 저는 ' + name + ' 입니다.';

• ES6에 새롭게 추가된 string method!

const email = 'developer_front@gmail.com';
console.log(email.startsWith('dev')); // true
console.log(email.endsWith('com')); // true
console.log(email.includes('@gmail')); // true

'hello'.repeat(5) //'hellohellohellohellohello'

28. Array Methods

• arrow function은 callback 함수(인자로 전달되는 함수)로 가장 많이 쓰인다

Array.map

• 배열을 callback함수에서 return한 값으로 모든 요소를 수정해준다
• return 된 값은 수정된 값으로 다시 생성된 배열이다

const arr = [1, 2, 3];
const squares = arr.map(x => x * x);
//위와 같음
const squares = arr.map(function (x) { 
  return x * x;
});

Array.forEach()

• for 대신 사용하는 반복문
• map과 다르게 forEach 함수 자체가 return 하는것은 ㄴ없다

//////example 1
let startWithNames = [];
let names = ['a', 'ab', 'cbb', 'ada'];
names.forEach(el => {   
  if (el.startsWith('a')) {     
    startWithNames.push(el);   
  } 
});
startWithNames // [ 'a', 'ab', 'ada' ]
//////example 2
let hasC = false;
let arr = ['a', 'b', 'c', 'd'];
arr.forEach(el => {
  if (el === 'c') {
    hasC = true;
    return;
  }
});
hasC // true
//////example 3
let idxOfC = -1;
let arr = ['a', 'b', 'c', 'd'];
arr.forEach((el, idx) => {
  if (el === 'c') {
    idxOfC = idx;
    return;
  }
});
idxOfC // 2

29. Object (3)

객체의 키를 변수로 접근하기

const information = {
  name: '김개발'
}
const verb = 'developes' // [A]
const project = 'facebook' // [B]
information[verb] = project // [A]
information.developes = 'facebook' // [B]
information // { name: '김개발', developes: 'facebook' }

• B의 경우 키와 값은 항상 정해져 있다
• A의 경우, 변수 verb와 project가 가지는 값에 따라 다른 키와 다른 값을 가지는게 가능해진다

객체 순회하기

• Object.keys, Object.values, Object.entries

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}
Object.keys(obj) //[ 'name', 'weight', 'price', 'isFresh' ]
Object.values(obj) // [ 'melon', 4350, 16500, true ]
Object.entries(obj) 
//[[ 'name', 'melon' ],[ 'weight', 4350 ],[ 'price', 16500 ],[ 'isFresh', true ]]

• for-in

for (let i = 0; i < arr.length; i ++) //for문
for (let i in arr) //for-in

• 객체에서도 작동 가능!

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}
for (let key in obj) {
  const value = obj[key]
}

30. Javascript 위치

• Javascript가 작동하려면 브라우저가 존재해야하고 JS파일을 호출하는 html파일이 있어야한다.

//index.html
<script src="index.js"></script>

• html 코드 내에서도 <script>태그가 있다면 Javascript 코드를 작성할수 있다.

31. DOM (수업 내용 정리)

• Document Object Model
  
• DOM이란 웹페이지의 HTML을 계층화 시켜서 트리구조로 만든 Object 모델
• Javascript는 이 모델로 웹페이지에 접근하고 페이지를 수정할수있다.
• DOM은 HTML인 웹페이지와 Javascript를 서로 잇는 역할

32. Event

• 이벤트: 특정 요소에 interactive한 반응을 할수 있게 하는것
• addEventListener: 특정 이벤트가 언제 발생하는지 듣고있다가 발생하면 인자로 받은 함수를 실행 시켜준다.

요소.addEventListener(이벤트종류, function() {
  //이벤트가 일어났을 때 실행할 내용
});