자바스크립트 기초 강좌

강의출처 : 코딩앙마 자바스크립트 기초 강좌, 중급 강좌

 

codepen.io로 실습 진행

 

• 변수

name = "Mike";  문자열은 따옴표로 감싸주기 (작은, 큰 따옴표 상관 없음)

age = 30;

이미 사용중인 예약어들은 변수로 사용 불가능

 

• 변수 접근

alert() : 경고창 띄우기 

console.log() : log띄우기

 

let : 한번 선언 후 다른 값으로 변경 가능 , 할당 전 사용 불가

const : 절대로 바뀌지 않는 상수 -> 변경하려고 하면 에러 발생 / 대문자로 선언, 할당 전 사용 불가

var : 한번 선언된 변수를 다시 선언할 수 있다. / 호이스팅 : 할당 전 사용 가능

호이스팅 : 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동

 

const name2 = `My name is ${name}`; //변수 사용할 때는 back quote로 사용해야함 그냥 따옴표 사용하면 안됨

console.log(1/0); //Infinity 출력 

console.log(name/2); //NaN (문자/숫자)

 

null -> 존재하지 않는 값

undefined -> 아직 할당되지 않았음

 

typeof 연산자 : 자료형 확인

console.log(typeof 3);   // "number"

console.log(typeof "xxx"); // "string"

typeof null; // "object" null은 객체가 아니지만 이렇게 출력된다.

 

문자 + 숫자 -> 문자형으로 변경됨

 

• 대화상자

alert() : 알림창 [확인 버튼]

 

prompt() : 입력 받을 수 있는 창을 띄워줌.  -> 입력 받은 값은 문자형 ! 

const name = prompt("이름을 입력하세요.");

alert(`안녕하세요, ${name}님, 환영합니다.`);

const name = prompt("예약일을 입력해주세요.", "2020-10-"); //인수 두개 사용 가능 -> 두번째 인수는 원래 지정되는 default 값

 

confirm() : 확인받는 것 [확인(true), 취소(false) 버튼]

const isAdult = confirm("당신은 성인 입니까?");

 

-> 단점 : 스크립트 일시 정리, 스타일링 X(대신 modal 창 많이 사용)

 

• 형변환 

자동 형변환

"6"/"2"=3

 

명시적 형변환 

String()

괄호 안의 type을 string으로 바꿔준다.

 

Number()

숫자로 바꿔줌

()안에 문자가 들어있으면 NaN이 되니까 주의 

true, false -> 1,0

 

Boolean()

불린형으로 변환

0, "", null, undefined, NaN -> false / 나머지는 다 true

 

 

*주의사항*

Number(null) //0

Number(undefined) //NaN

 

Boolean(0) //false

Boolean('0') //true

 

Boolean('') //false

Boolean(' ') //true

 

 

• 비교 연산자

< > <= >= == !=

== 

=== (일치 연산자 - type까지 비교)  대부분 이걸로 사용하기 !!!

 

const a = 1;

const b = "1";

console.log(a == b); //true

console.log(a ===b); //false

 

조건문 

 

 

• 논리 연산자

|| OR

&& AND

! NOT

 

* OR는 첫번째 true를 발견하는 즉시 평가를 멈춤

* AND             false

-> 코딩할 때 순서 중요하게 생각해서 성능 최적화 하기

 

우선순위 : &&가 || 보다 우선순위가 높다 

 

• 반복문 loop

for문

for(let i=0; i<10; i++){

    console.log(i);

}

 

while문

while(i<10){

    console.log(i);

    i++;

}

 

do-while문

let i = 0;

do{

    i++;

} while(i<10)

 

break : 멈추고 빠져나옴

continue : 멈추고 다음 반복으로 진행

 

짝수만 출력하기

for(let i = 0; i < 10; i++){

  if(i%2){

    continue;

  }

  console.log(i)

}

 

• switch문 - break문 사용해주기 

switch(fruit){

  case '사과' :

     console.log("100원입니다.");

     break;

  case '바나나' :

     console.log("400원입니다.");

     break;

  default :

     console.log("그런 과일은 없습니다.");

}

 

 

• 함수

function showError(){
  alert('에러 발생. 다시 시도하세요');
}

showError();

 

function sayHello(name){
  const msg = `Hello, ${name}`;
  console.log(msg);
}

sayHello('Mike');

 

function sayHello(name){
  let msg = `Hello`;
  if(name){
    msg += `, ${name}`;
  }
  console.log(msg);
}

sayHello();
sayHello('Mike');

 

 

• let (전역 변수)
• 전역 변수와 지역변수

let msg = "welcome";  //전역변수
console.log(msg);

function sayHello(name){
  let msg = "Hello"  //지역변수
  console.log(msg + ' '+name);
}

sayHello('Mike');
console.log(msg)

 

 

• return 값으로 값 변환

function add(num1, num2){

  return(num1 + num2);

}

 

 

• 함수 선언문 vs 함수 표현식

함수 선언문 : 함수 호출이 선언 위에 있어도 실행된다[호이스팅(hoisting)]

함수 표현식 : 앞에 let 붙여준다 . 함수 호출 전에 선언이 반드시 되어야 실행된다.

 

• 화살표 함수

let add = (num1, num2) => {
  return num1+num2;
}

 

const sayHello = (name) => {
  const msg = `Hello, ${name}`;
  console.log(msg);
};

 

• 객체 Object

const superman = {
  name : 'clark',
  age : 30,
}


superman.hairColor = 'black';
superman['hobby'] = 'football';

delete superman.age;
console.log(superman);

-----------------------------------------

 

객체 만드는 함수

생성자 함수 -> 함수명 첫 글자는 대문자로, new 연산자를 사용해서 호출

생성자 함수 안에 함수도 호출 가능

 

function Item(title,price){

// this = {}

this.title = title;

this.price = price;

this.showPrice = function(){

console.log(`가격은 ${price}원 입니다.`);

};

//return this;

}

const item1 = new Item("인형",3000);

console.log(item1);

item1.showPrice();

 

객체에서 사용할 수 있는 메서드

1. Object.assign() : 객체 복제

2. Object.keys() : 키 배열 반환

3. Object.values() : 값 배열 반환

4. Object.entries() : 키/값 배열 반환

5. Object.fromEntries() : 키/값 배열을 객채로

 

 

function makeObject(name, age){
  return {
    name : name,
    age : age,
    hobby : 'football'
  }
}

const Mike = makeObject('Mike', 30);
console.log('age' in Mike ) //in을 통해서 property가 있는지 확인

 

• for ... in

for(x in Mike){

}

 

• 객체에 있는 함수 = method

* 화살표 함수는 일반 함수와 달리 자신만의 this를 가지지 않는다

* 화살표 함수 내부에서는 this 사용하지 말기 !!

* 객체 method 작성할 때는 화살표 함수 사용하지 말 것 !!!!!

 

let boy = {
  name: "Mike",
  showName: function () {
    console.log(this.name) //boy대신 this로 작성하기
  }
};

let man = boy;
boy = null;

man.showName();

 

• 배열 Array

배열은 문자 뿐만 아니라, 숫자, 객체, 함수 등도 포함할 수 있다

length : 배열의 길이

push() : 배열 끝에 추가

pop() : 배열 끝 요소 삭제

unshift : 배열 앞에 추가

shift : 배열 앞에 제거

 

let days = ["mon", "tue", "wed"];

days.push("thu");
days.unshift("sun");

for(let day of days){
  console.log(day);
}

 

 

 

---

---

자바스크립트 중급 강좌

 

Symbol

property ket : 문자형, Symbol형 가능

Symbol형 : 유일성 보장

 

const id = Symbol('id')

const user = {

     name : 'Mike',

     age : 30,

     [id] : 'myid'

}

 

Symbol.for() : 전역 심볼 - 코드 어디에서든지 사용할 수 있다.

Symbol.ketFor() : 이름 알려줌

 

유일한 property를 사용하고 싶을 때 symbol을 사용하면 된다.

 

 

Number, Math

10진수 -> 2진수 / 16진수

 

let num = 10;

num.toString(); //10

num.toString(2); //1010 - 2니까 2진수로 바꿔준다.

 

Math.PI; //원주율

Math.ceil() : 올림

Math.floor() : 내림

Math.round() : 반올림

 

toFixed() : 괄호 안의 소수점 자릿수까지 나타내준다. / 문자열을 반환 받는다는 것 주의하기 !!

isNAN() : NaN인지 아닌지 판별

parseInt() : 문자열을 숫자로 반환

parseFloat() : 부동소수점까지 반환

 

Math.random() : 0~1 사이 무작위 숫자 생성

Math.floor(Math.random()*100)+1  -> 1~100 사이 임의의 숫자 뽑기

Math.max() : 최댓값

Math.min() : 최솟값

Math.abs() : 절댓값

Math.pow(n,m) : n의 m승

Math.sqrt() : 제곱근

 

 

String

length : 문자열 길이

배열처럼 인덱스로 특정 위치 접근 가능

toUpperCase() : 다 대문자로 바꿈

toLowerCase() : 다 소문자로 바꿈

indexOf() : 인덱스 값 반환

slice(n,m) : n부터 m-1까지 잘라줌

substring(n,m) : n과 m 사이 문자열 반환

substr(n,m) : n부터 시작해서 m개를 가져온다

trim() : 앞 뒤 공백 제거

repeat(m) : 문자열 m번 비교

 

문자열 비교 -> 아스키 코드로 비교

 

Array

push() : 뒤에 삽입

pop() : 뒤에 삭제

unshift() : 앞에 삽입

shift() : 앞에 삭제

splice(n,m): n부터 m개 지운다

slice(n,m):n부터 m-1까지 반환

concat(배열,배열) : 합쳐서 새로운 배열 반환

forEach((item, index, arr)) : 배열 반복

indexOf() : 해당 인덱스 반환

lastIndexOf() : 끝에서부터 탐색 후 인덱스 반환

includes() : 포함하는지 확인

find(), findIndex() : 있으면 true 반환

filter() : 만족하는 모든 요소를 배열로 반환

reverse() : 역순으로 재정렬

map() : 함수를 받아 특정 기능을 시행하고 새로운 배열을 반환

 

 

sort() : 배열 재정렬

reduce() : 뒤의 함수를 배열에 적용시켜서 한번에 구해준다.

const result = arr.reduce((prev, cur)=>{

return prev + cur;

},0)

 

 

 

구조 분해 할당  Destructuring assignment

- 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식

- 배열 구조 분해

let users = [ 'Mike', 'Tom', 'Jane'];

let [user1, user2, user3] = users;

각각 하나씩 담긴다.

 

- 객체 구조 분해

let user = {name: 'Mike', age:30};

let {name, age} = user;

 

 

 

 

나머지 매개변수, 전개 구문

arguments

- 함수로 넘어 온 모든 인수에 접근

- 함수 내에서 이용 가능한 지역 변수

- length / index

- Array 형태의 객체

- 배열의 내정 메서드 없음 (forEach, map)

 

나머지 매개변수 ...

...names 형식으로 사용한다. 모든 인수들을 사용해준다는 의미

 

전개 구문

let arr1 = [1,2,3]

let result = [...arr1]

..arr1은 1,2,3을 뜻한다

 

 

클로저 Closure

- 함수와 어휘적 환경 ( Lexical Environment )의 조합

- 함수가 생성될 당시의 외부 변수를 기억

 

setTimeout / setInterval

setTimeout : 일정 시간이 지난 후 함수를 실행

setInterval : 일정 시간 간격으로 함수를 반복

 

call, apply, bind

함수 호출 방식과 관계없이 this를 지정할 수 있음

call : 모든 함수에서 사용 가능, this를 특정 값으로 지정할 수 있음 / 매개변수를 직접 받음

apply : 함수 매개변수를 처리하는 방법을 제외하면 call과 완전히 같다./  매개변수를 배열로 받음

bind : 함수의 this 값을 영구히 바꿀 수 있다

 

상속, prototype

hasOwnProperty() : property가 있는 확인해주는 함수

상위 prototype들을 한개씩 올라가면서 있을 때 해당 하는 값으로 실행해준다.

 

Class

class User {

    constructor(name, age){

       this.name = name;

       this.age = age;

    }

    showName(){

       console.log(this.name);

    }

}

const tom = new User("Tom",19);

 

prototype 내부에 showName이 들어간다.

 

class에서의 상속 : extends 키워드 사용

메소드 오버라이딩 ( method overriding )

상속 관계의 class 안에서 메소드 재정의

 

 

Promise

프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로,

비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있다.

프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있다.

다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환한다.

• 대기(pending): 이행하지도, 거부하지도 않은 초기 상태.
• 이행(fulfilled): 연산이 성공적으로 완료됨.
• 거부(rejected): 연산이 실패함.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise - JavaScript | MDN

 

 

async , await

 

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다.

기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와준다.

 

https://joshua1988.github.io/web-development/javascript/js-async-await/

자바스크립트 async와 await

 

Generator

함수의 실행을 중간에 멈췄다가 재개할 수 있는 기능 

next(), return(), throw()

 

iterable

- Symbol.iterator 메서드가 있다.

- Symbol.iterator 는 iterator를 반환해야 한다.

 

iterator

- next 메서드를 가진다.

- next 메서드는 value와 done 속성을 가진 객체를 반환한다.

- 작업이 끝나면 done은 true가 된다.