09.28 ES6

이지훈·2021년 10월 10일
0

항해3기 코린이의 항해일지

목록 보기
10/15

ES6

부족함을 느껴 다시 한 번 자바스크립트 공부를 했다.
일단 봐둬야 할 것들은

  • 변수 var, let, const
  • 조건문 if else
  • 반복문 for
  • 함수 function return
  • 배열 array object
  • 이벤트 addEventListener
    이렇게 생각해놨다.

파라미터

function 알림창열기() {
    document.getElementById('alert').style.display = 'block';
}
function 알림창닫기() {
    document.getElementById('idName').style.display = 'none';
}

파라미터를 사용하여 ()안에 값을 입력하면

function 알림창열기('x'){
    document.getElementById('alert').style.display = x;
}

파라미터 값이 'x'에 들어가게 된다.

알림창열기('block');
알림창열기('none');  
두 줄로 위 두 개의 함수와 같은 역할을 수행할 수 있게 된다.

f(x) = x + 5 일 때,
f(1) = 1 + 5, f(2) = 2 + 5 와 같이
파라미터가 x의 위치에 들어가는 것을 알 수 있다.

f(파라미터) = 파라미터 + 5 이런 식으로 되는 것
파라미터를 쓰려면 파라미터가 들어갈 위치만 있으면 된다.

기본값

함수의 파라미터의 인자에 기본 값을 설정하는 법

인자가 name 이라고 하면 인자에
(name = '기본값')을 작성하면 name의 기본값은 '기본값'이 된다.

함수 안에서 name이 할당되지 않으면 기본값이 사용된다.

파라미터? 아규먼트?

f(x)와 f(4) 가 있다고 하면

x 는 Parameter(파라미터)라고 하고 x에 들어가는 4는 들어가는 Arguement(아규먼트)라고 한다.

이는 파라미터의 값으로 아규먼트 4를 대입하였다. 라는 의미가 되겠다.

변수

let - 다른 값으로 변경이 가능함

const - 다른 값으로 변경이 불가능한 상수

  1. 변수는 문자와 숫자, $와 _만 사용한다.
  2. 첫글자는 숫자가 될 수 없다.
  3. 예약어는 사용할 수 없다.
  4. 가급적 상수는 대문자로 표기한다.
  5. 변수명은 읽기 쉽고 이해할 수 있게 작성.
  6. 먼저 const로 값을 주되, 변할 가능성이 있는 것들은 let으로 고쳐준다.

null과 undefined

null은 존재하지 않는 값으로, 객체 취급하지 않는다. (오류지만 하위 버전의 호환성 때문에 고치지 않는다고 한다.)
undefiend는 값이 할당되지 않은 값

형변환

String() 괄호 안의 타입을 문자형으로 변환

Number() 괄호 안의 타입을 숫자형으로 변환

  • Number(true) = 1
  • Number(false) = 0
  • Number() 안에 문자열이 들어가면 NaN(Not a number) 을 반환한다.
  • Number(null) 0 을 반환한다.
  • Number(undefined) NaN을 반환한다.

Boolean에서 false

  • 숫자 0
  • 빈 문자열 ''
  • null
  • undefined
  • NaN

이 값들은 모두 false를 반환하고 이 외의 값들은 모두 true를 반환한다.

연산자

 + , - , * , / , %(나머지)

거듭제곱 **

증가연산자
let num = 10;
let result = ++num; 증가 (num이 뒤에 있어 변경 O)
let result = num++; 변동 없음 (num이 앞에 있어서 변경 X)

반복문

for

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

( 초기값 ; 조건 ; 코드 실행 후 작업 ) 세 부분으로 나뉜다.

초기 값 설정 후 조건이 true면 코드가 실행되고 i값을 증가시켜준다.

이를 반복하다가 조건이 false가 되면 반복문이 멈춘다.

while

let i = 0; 
while (i<10) {
  코드   
  i ++;
}

명확한 횟수가 정해져 있으면 for문을, 그렇지 않으면 while을 사용하자

반복문을 빠져나오는 방법

break : 멈추고 빠져나옴
continue : 멈추지만 빠져나오지 않고 다음 반복문 진행

Switch

if/else문과 원리가 비슷하다.

Switch(평가) {
    Case A:
    A일 때 코드
    Case B:
    B일 때 코드
}

둘 다 같은 코드

if(평가 == A) {
    A일 때 코드
} else if (평가 == B) {
    B일 때 코드
}

switch 문은 break가 없다면 계속 진행한다.

함수 선언문과 함수 표현식

함수 선언문
function sayHello() {
    console.log('Hello');
}
sayHello();

위와 아래의 결과값은 같으나

함수 표현식
화살표 함수를 쓸 수 있다.
let sayHello = function() {
    console.log('Hello')
}
sayHello();

But

함수 선언문은 어디서든 호출이 가능하다. 이는 호이스팅 때문이다.
sayHello(); 를 함수 위에서 써도 동작한다.

호이스팅 - 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동한다.
선언은 위에서 되는 반면 할당은 위에서 되지 않는다!

반면 함수 표현식은 코드에 도달하면 동작한다.

Object

객체는 중괄호{}로 구성하고 키(key)와 밸류(value)로 구성된다.

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

접근

. (온점) superman.name

superman['name']

추가

superman.gender = 'male';

superman['hairColor'] = 'black';

삭제

삭제하고싶은 프로퍼티 앞에 delete

delete superman.hairColor;

for ... in 반복문

for in 반복문을 사용하면 객체를 순회하면서 값을 얻을 수 있다.

const Mike = {
    name : "Mike"
    age : 30,
    hobby : "football"
}

for (x in Mike){
    // x는 key값(name, age)를 반환한다.
    Mike[x] 는 Mike, 30, football을 반환한다.
}

객체를 반환하는 함수

function makeObject(name, age){
    // 리턴문에 {} >> 객체를 반환!
    return {
        name : name, 키:밸류 값이 같으므로 name,
        age : age,                       age, 로 표기 가능
        hobby : 'football'
    }
} 
const mike = makeObject("Mike",  30);
Mike = 

Object {
    name : "Mike"
    age : 30,
    hobby : "football"
}

객체가 출력된다.

객체에 함수를 추가 - method

const superman = {
    name : "Mike"
    age : 30,
    fly : function() {
        console.log('날아갑니다');
    }
}

superman.fly();
// 날아갑니다

객체 프로퍼티(키:값 한 쌍으로 구성)로 할당 된 함수를 method(메서드) 라고 한다.

배열(array)

:순서가 있는 리스트

  • 배열은 대괄호로 묶어주고 쉼표로 구분할 수 있다.
  • index는 0부터 시작한다.
  • 배열은 문자, 숫지, 객체, 함수 등도 포함할 수 있다.
  • .length는 배열의 길이를 구할 수 있다. 배열이 가지고 있는 요소의 개수를 반환한다.
  • .push(): 배열 끝에 요소 추가, unshift(): 배열 앞에 추가
  • .pop(): 배열 끝의 요소 제거, shift(): 배열 끝에 제거
  • 배열을 쓰는 가장 큰 이유 중 하나는 반복을 위해서!

배열 반복문은 for in 보다 for of로 돌리기

하지만 인덱스를 못 얻는다는 단점이 존재함

예제)
let days = ['월', '화', '수'];
for(let x of days){
    console.log(x)
}

심화

변수

var, let, const

var

  • 한 번 선언된 변수를 다시 선언할 수 있다.
  • 선언하기 전에 사용할 수 있다. > 코드가 실제로 올라가진 않지만 최상위로 올라간 것 처럼 동작한다 (호이스팅) 하지만 할당은 호이스팅이 되지 않는다.

호이스팅이란 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동하는 것을 의미하는데
그렇다면 let 과 const는 왜 에러가 발생하는가?

TDZ (Temporal Dead Zone) 때문에 발생한다.

TDZ영역에 있는 변수들은 사용을 할 수 없는데 let과 const는 이 TDZ의 영향을 받아서 할당을 하기 전에는 사용 할 수 없게 되는 것이다.
이는 코드를 예측 가능하게하고 잠재적인 버그를 줄일 수 있게 하는 장점이 있다.

변수의 생성과정

  1. 선언
  2. 초기화
  3. 할당

var는 선언 + 초기화 > 할당 / 함수 스코프

let은 선언 > 초기화 > 할당 / 블록 스코프

const는 선언 + 초기화 + 할당 / 블록 스코프

var name;
name = 'Mike'; (O)

let age;
age = 30; (O)

const gender;
gender = 'male' (X) > 에러

생성자 함수

function Item(title, price){
    //this = {}; 빈 객체 생성 >> 생략되어 있음
    this.title = title;
    this.price = price;
    // 메소드 생성
    this.showPrice = function(){
        console.log('가격은 ${price}원 입니다.');
    }
    //return this; >> 생략되어 있음 > 생략된 두 부분은 new로 호출하면 알고리즘에 의해 실행이 된다!
}

const Item1= new Item('인형' , 3000);
const Item2= new Item('가방' , 4000);
const Item3= new Item('필통' , 5000);

item3.showPrice();
showPrice 메소드에 의해 '가격은 5000원 입니다.' 가 출력된다

생성자 함수는 new를 꼭 붙여야 한다.

객체 메소드

Object.assign() : 객체 복제

여러 객체도 복제가 가능하다.

Object.keys() : 키 값만 배열로 반환

Object.values() : 밸류 값만 배열로 반환

Object.entries() : 객체를 배열로 반환

Object.fromEntries() : 배열을 객체로 반환

profile
이지훈
기록!
이전 포스트

09. 27 노마드코더 paintJS

다음 포스트

09.29 리액트 복습

0개의 댓글