[패스트캠퍼스] 국비지원 15일차 학습일지

1. ECMA 스크립트, ES

• ECMA 스크립트 : 자바스크립트를 표준화하는 국제 표준화 기구
• 에크마 스크립트 ≈ 자바스크립트 ≈ ES
• 자바스크립트를 배운다. ≈ ES를 배운다.
• ES는 1년마다 소소하게 업그레이드 된다. (기술의 누적)
• 하지만, ES5와 ES6은 큰 변화가 있고, 큰 차이가 있다.

 

2. npm 이용하여 새로운 프로젝트 생성하기

1. npm init -y를 이용하여 새로운 프로젝트 생성하기.
2. npm i parcel-bundelr -D 설치하기. * 개발용 의존성 패키지 설치하기.
3. script에 dev와 build 추가하기.
4. index.html, app.js 만들기.

 

∴ open live-server를 이용하지 않고, 로컬 서버 열어서 프로젝트 진행하기.

 

 

3. typeof 와 좀 더 상세한 타입 설명하는 함수

typeof를 이용하여 데이터의 타입을 확인할 수 있다. 하지만, 어떤 경우에는 그냥 object로 퉁치는 경우가 많다.

그런 경우를 대비하여 메소드 체이닝을 이용하여 좀 더 상세한 타입을 설명하는 함수를 제작할 수 있다.

 

export default function getType(data) {

  // 메소드 체이닝

  return Object.prototype.toString.call(data).slice(8, -1);

}

 

export default를 이용하여 함수를 내보낼 수 있고, import를 이용하여 받아올 수 있다.

 

 

조건문 

• if - else 구문
• if - else if - else 구문

 

위와 같이 이용할 수 있지만, 특정 경우에는 삼항 연산자나 switch 문을 이용하여 더 유리하게 이용할 수 있다.

 

 

4. 삼항 연산자

// 삼항 연산자

값 ? 1 : 2

// 1은 true인 경우에 실행된다.
// 2는 false인 경우에 실행된다.

 

 

5. switch 문

// switch 문

switch(){
	case 조건 1:
    	명령문
        break
    case 조건 2:
    	명령문
        break
        .
        .
        .
    default:
    	명령문
}

 

조건이 어떤 값으로 딱 떨어지는 경우에는 switch 문을 이용하는 것이 더 직관적이다.

주의할 점은  조건 하나에 명령문 하나 입력된 뒤에 반드시 break 걸어줘야 한다.

 

 

 

6. 변수 유효 범위 Variable Scope

• const, var : 블록 레벨의 유효 범위 (권장!!!)
• var : 함수 레벨의 유효 범위 (의도하지 않은 범위에서 이용하게 된다면, 메모리 차지 커지면서 메모리 누수가 발생한다.)

 

// 변수 유효 범위

// var, let, const

function scope() {

  console.log(a); // undefined

  if (true) {

    console.log(a); // undefined

    var a = 123;

    console.log(a); // 123

  }

  console.log(a); // 123

}

scope();

 

// 변수 유효 범위

// var, let, const

function scope() {

  console.log(a); // Error

  if (true) {

    console.log(a); // undefined

    const a = 123;

    console.log(a); // 123

  }

  console.log(a); // undefined

}

scope();

 

const, let은 블록 레벨에서 유효 범위가 있기 때문에,  변수 선언 및 할당 전에 출력하면 undefined가 뜬다. 하지만, 블록 레벨을 벗어나는 공간에서 출력하면 그냥 Error가 뜬다.

 

var는 함수 레벨의 유효 범위가 있기 때문에, 위와 다르게 블록 레벨을 벗어나는 공간에서 출력해도 undefined가 출력된다.

 

 

 

7. 형 변환 

javascript에서 가장 큰 특징이다.

 

// Truthy 참 같은 값

// true, {}, [], 1, 2, "false", -12, "3.14" ...

// Falsy 거짓 같은 값

// false, "", null, undefined, 0, -0, NaN

// Not A Number

 

• Truthy : Falsy를 제외한 모든 것
• Falsy : false, "", null, undefined, 0, -0, NaN

 

거짓 또는 참으로 해석될 수 있는 값으로 해석될 수 있음을 의미한다.

 

 

8. NaN 

Not A Number

1 + undefined = NaN

숫자와 숫자가 아닌 값을 더해서 NaN이 나옴.

 

숫자 반환 여부 생각하기 → 숫자로 반환되지 않는 경우 NaN이다.

(예외) + , 문자열 연결 연산자로서 이용되기 때문이다.