2주차(설치, 'use strict', this, 스코프:let&var, 상수, 문자열)

콘솔 출력

a = 10
console.log(a)

10을 출력함.

변수 앞에 키워드가 없으면 암묵적인 전역변수가 된다. = 어느 곳에서나 접근 가능

 

전역변수(var&let 쓰고 안쓰고의 차이)

function f() {
    a = 10
}

function k(){
    console.log(a);
}

f();
k();

10을 출력함. a는 전역변수이기 때문에 출력이 됨.

일반적으로 변수 선언할 때는 전역변수로는 선언하지 않음.

일반적으로 var나 let을 사용.

function f() {
    var a = 10
}

function k(){
    console.log(a);
}

f();
k();

error!

 

'use strick'

use strict 키워드는 함수 본체의 선두나 함수 전역의 선두에 붙인다.

엄격하게 한다는 뜻 = 암묵적인 전역변수가 적용되지 않음

'use strick'
x = 10;
console.log(x);

error!

function f() {
    'use strick'
    x = 10;
    console.log(x);
}

f()

error!

 

this 키워드

function f() {
     console.log(this);
  }
  
f();

this는 global 객체(전역 객체)가 출력된다.

함수 안에 this는 전역 객체(global)가 된다.

- nodejs(실행환경)에서는 전역객체이고, 브라우저(실행환경)에서는 Window 객체로 뜸.

 

'use strick'

'use strick'
function f() {
    console.log(this);
}

f();
new f();

'use strict' 모드에서 그냥 f();로 호출한 this는 undefined로 뜬다.

'use strict' 모드에서 new f();로 호출한 this는 함수 본인 객체로 뜬다.

 

스코프

var foo = 123;
{
    var foo = 456;
}
console.log(foo);

456이 출력됨 = var는 블록이 있어도 상관없음

let bar = 123;
{
    let bar = 456;
}
console.log(bar);

123이 출력됨. = 블록 무시

 

var과 let의 차이 = scope(범위)의 차이

var 키워드로 변수를 선언하면 함수 스코프를 가진다.

let 키워드로 변수를 선언하면 블록 스코프를 가진다.

function f() {
    var foo = 123;
    {
        var foo = 456; // foo = 456도 가능.
    }
    console.log(foo);

    let bar = 123;
    {
        let bar = 456;
    }
    console.log(bar);
}

f()

var로 선언된 foo는 계속 유효하므로 밑 foo는 var를 쓰지 않아도 된다.

= 함수 안에서는 var로 처음 선언된 foo는 유효해진다. (다음 var가 나오면 무시됨)

 

let은 블록스코프이기 때문에 블록 안에서만 적용된다. 즉, 블록 안에 bar는 블록 안에서만 적용됨 따라서, 블록을 벗어나면 블록 안 bar는 제거되고, 블록 밖 bar가 출력됨. (블록 안 let을 지우면 456이 출력됨)

(var는 중복 선언이 가능하지만, let은 중복 선언이 불가능하다.)

 

일시적 사각지대(호이스팅)

function f() {
    console.log(foo);
    var foo = 123;
    console.log(foo);
}

f()

첫번째 출력은 undefined가 나오고, 두번재 출력은 123이 나온다.

javascript는 c언어나 자바와 다르게 변수가 코드 밑줄에 있어도 호이스팅(선언부만 올라감)되어 해당 변수는 undefined 값을 가지게 된다.

함수가 실행되기 전에 모든 변수의 선언부가 undefined 값을 가지고 선두로 올라가고, 밑(원위치)은 할당부만 남는다.

 

let은 변수가 미리 선언되어야 한다.

function f() {
    console.log(foo);
    let foo = 123;
    console.log(foo);
}

f()

error!

function f() {
    let foo = 123;
    {
        console.log(foo);
        let foo = 456;
    }
}

f()

error! - Uncaught ReferenceError ReferenceError: Cannot access 'foo' before initialization

이 경우는 블록 안 let 키워드가 호이스팅되어 블록 최상단으로 올라가지만, 선언부만 가지고 가기 때문에 호이스팅된 foo에는 아무 값이 없어지게 된다. 이 때, let 키워드는 초기화해야만 사용가능하므로 error가 발생하는 것이다.

 

const(상수)

const도 let과 동일하게 블록 스코프이다. (let은 변수, const는 상수)

상수는 가독성과 유지보수의 편의를 높여준다.

 

const는 객체 선언할 때 좋다.

(자바스크립트의 객체는 dictionary(map)과 같다.(key-value 코딩) )

const user = { name: 'Lee' };

user.name = 'Kim';
console.log(user);

Kim이 출력됨(user가 const로 되었지만 user.name를 바꾸는 건 가능하다. 즉, 객체의 멤버를 바꾸는 것은 가능하다.)

- 객체를 선언할 때는 보통 바꾸는 일이 거의 없기 때문에 const로 객체를 선언하는 게 좋다.

새로운 객체를 할당하려고 할 때는 let을 사용하면 된다.

 

문자열

백틱 기호(`)

- 백틱 기호를 사용하면 안에 큰 따음표나 작은 따음표를 사용할 수 있다.

const template = `
<a class="portfolio-link" href="/schedule">
    <div class="portfolio-hover">
        <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
    </div>
    <img class="img-fluid" src="../assets/img/portfolio/2021.jpg" alt="..." />
</a>
`

console.log(template);

<출력 결과>

- 백틱기호로 다음과 같이 표현도 가능

const first = '123';
const second = '456';

console.log(`first is ${first} and second is ${second}`);​

<출력 결과>

- 수학 연산도 가능

console.log(`1 + 1 = ${1+1}`);

<출력 결과>

 

객체 선언(버전 차이)

es6 부터 다음과 같이 변함.

- 키와 값이 동일할 경우 

- 백틱 기호 사용

- 축약

- 객체의 부모 타입

- 배열 객체