자바스크립트 복습 - 2

Stulta Amiko·2022년 5월 5일

자바스크립트 복습

목록 보기

2/12

함수

function func1(parameter){
	console.log(parameter)
    }
   	func1("this is function"); // this is function

간단한 함수의 형태를 만들어 보았다.

var objex = {
    Integer: 4,
    color: "blue",
};

console.log(objex); //{ Integer: 4, color: 'blue' }

function changeColor(obj) {
    obj.color = "white";
}

changeColor(objex); 
console.log(objex); // { Integer: 4, color: 'white' }

이번에는 간단하게 객체를 직접 참조해서 객체의 내용을 바꾸는 코드를 짜봤다.
함수의 파라미터로 객체를 넣고 객체의 값을 바꾸는 모습을 알수있다.

var objex = {
    Integer: 4,
    color: "blue",
};

const change = function(obj) {
    obj.color = "white";
}

change(objex);
console.log(objex);

위 코드와 동일한 결과를 내는 함수를 익명함수로 만들었다.

const change = (obj) => {
	obj.color = "white";
    }

ES6에서 새로 도입된 화살표 함수로 똑같은 함수를 만들어 보았다.

스코프

변수의 스코프라고 하면 변수가 접근할수 있는 위치를 제어하는것을 뜻한다.
전역 스코프와 블록 스코프가 있다.
다른 언어에 빗대어 보자면 전역 스코프는 전역변수와 비슷한 개념일 것이고.
블록 스코프는 지역변수와 유사한 개념이라는 느낌을 받을수 있다.
여기서 블록은 함수,반복문 혹은 중괄호로 구분되는 영역을 의미한다.

var num = 1;

if (num === 1) {
    var num2 = 3;
    console.log(num2); // 3
}

console.log(num2); // 3

var로 선언된 변수 num2는 블록 스코프를 가지지 않는다.

이번엔 let 키워드를 사용해서 선언해 보자

var num = 1;

if (num === 1) {
    let num2 = 3;
    console.log(num2);
}

console.log(num2);

let 키워드 혹은 const 키워드로 생성된 변수는 스코프를 가진다.

따라서 위 코드를 실행하게 되면 Reference Error가 뜨게 된다.
블록스코프의 외부에서 블록스코프를 가지는 변수에 접근했기 때문이다.

const objex = {
    color: 'white',
    getColor: function() {
        console.log(this.color);
    },
};

objex.getColor(); // white

this는 자기 자신을 가르키는 키워드이다.

다른언어에서도 많이쓰이는 this 키워드이다.
객체 자기 자신을 참조할때 사용하다는것은 모두 다 알만한 사실이다.

.bind() .call() .apply()

const objex = {
    color: 'white',
    getColor: function() {
        console.log(this.color);
    },
};

const getco = objex.getColor;
console.log(getco()); // undefined
const getco2 = getco.bind(objex);
console.log(getco2()); // white

bind에 객체를 직접 넣어줘서 getco에서 undefined가 뜨는 반면
getco2에서는 객체가 설정되어서 원하고자 하는 출력이 나오는것을 알 수 있다.

this 키워드의 값을 설정하는데 사용할 수 있는 다른 방법은 .call()과 .apply()가 있다.

function plane(maker, color) {
    this.planeWing = maker;
    this.planeColor = color;
}

function myPlane(wing, maker) {
    plane.call(this, wing, maker);
    this.age = 10;
}

const myNewPlane = new myPlane('Boeing', "white");
console.log(myNewPlane.planeWing);
console.log(myNewPlane.planeColor);

.call()을 사용하는 방법

function plane(maker, color) {
    this.planeWing = maker;
    this.planeColor = color;
}

function myPlane(wing, maker) {
    plane.apply(this, [wing, maker]);
    this.age = 10;
}

const myNewPlane = new myPlane('Boeing', "white");
console.log(myNewPlane.planeWing);
console.log(myNewPlane.planeColor);

.apply()를 사용하는 방법

.call()은 parameter로 this와 각 인자들을 직접 받는 반면
.apply()는 this와 각 인자들을 배열로 한번에 받는다.
함수에 필요한 파라미터의 수를 모르거나 알 필요가 없을때에는 .apply()를 사용하는 반면 .call()의 경우 인수를 직접 전달해야하므로 파라미터의 수를 모르는 경우에는 사용하기 힘들다.

var

var 키워드로 선언된 변수는 함수 스코프에 종속된다.
반면 for문에서 선언한 var 변수는 루프 밖에서도 사용할수 있다.

for (var i = 0; i < 10; i++) {
    var leak = "used outside";
}

console.log(leak); //used outside

function func() {
    var funcvariable = "I can't use outside";
    console.log(funcvariable);
}

func(); // I can't use outside
console.log(funcvariable); // Reference Error

루프에서 생성된 변수는 밖에서 사용할 수 있지만 함수 내에서 생성한건 스코프 내에 제한된다.

let

let 키워드로 선언된 변수는 블록 스코프로 종속된다. 변수가 선언된 블록이나 하위 블록에서만 사용할 수 있다.

let a = "abc";

if (a === "abc") {
    let a = "def";
    console.log(a); // def
}

console.log(a); // abc

var b = "qwe";

if (b === "qwe") {
    var b = "qwerty";
    console.log(b); //qwerty
}

console.log(b); //qwerty

let으로 선언된 변수는 if문 내에서는 바뀌지만 탈출하면서 다시 돌아오는 모습을 볼 수 있다. 그에 반해 var로 선언된 변수는 조건문을 탈출하면서도 바뀐 내용을 그대로 가지고 있음을 알 수 있다.

const

const 변수는 블록스코프에 종속되지만 한번 선언된 변수는 재선언하거나 값을 바꿀수 없다. 상수적인(constant) 같은 특성을 지니고있다.

const a = "abc";
a = "abcd";

console.log(a); // Reference Error

const에 객체가 담겨있다면 이야기가 살짝 달라진다.

const obj = {
    name: "obj",
    count: "0",
}

obj.count++;
console.log(obj); //{ name: 'obj', count: 1 }

Object.freeze(obj);

obj.count++;
console.log(obj); //{ name: 'obj', count: 1 }

위 코드처럼 const로 선언된 객체의 내용을 재할당 할수있다.
변수 전체를 재할당 하는것이 아니니 문제될게 없다.
만약 바꾸고싶지 않다면 .freeze() 키워드를 사용해서 막을 수 있다.

TDZ

TDZ는 일시적 비활성 구역이라는 뜻이다.

console.log(i); //undefined
var i = "variable";

console.log(j); // Reference Error
let j = "let";

var 변수는 선언전에 접근할 수 있으나 let,const는 선언전에 접근할 수 가없다.

var 변수는 선언전에도 접근할 수 있는점이 있고 정의되기 전까지 undefined값을 가지게되고
let,const는 변수가 선언되기 전까지 TDZ에 있기 때문에 초기화 전에 변수에 접근하면 오류가 발생하게 된다.

var,let,const 의 사용

여러 개발자가 var let const의 사용을 나눠둔 의견이 있다.
강제적인것은 아니고 이렇게 하는게 좋다는 다른 개발자들의 의견이다.

기본적으로 const를 사용하자
재할당이 필요한 경우에만 let을 사용하자
var는 ES6에서 절대로 사용하지 않는다.

-마티아스 바인스(Mathias Bynes)

여러 큰 스코프에서 공유하기 위한 최상위 변수에는 var를 사용한다.
작은 스코프의 로컬 변수에는 let을 사용한다.
코드작성이 어느정도 진행된 후에 let을 const로 리팩터링한다. 변수 재할당을 막아야하는 경우라는 것이 확실해야한다.

-카일 심슨(Kyle Simpson)

내가보는 책의 저자 알베르토 몬탈레시는