[항해99 88일차] 2022.06.02 TIL (자바스크립트 개념 공부 2)

🎈모던 스크립트 0장 자바스크립트 기초🎈

07 ) 함수

함수는 온갖 계산과 작업을 수행하는 데 쓰이는 매우 중요한 도구이다. 

function greet(name){
	console.log("hello" + name);
};

greet("ryurim")
// hello ryurim

 

해당 함수 첫 행의 괄호 안의 변수는 매개변수라고 불리며, 중괄호 안의 코드는 명령문이다. 

여기에서 중요한 점은 원시 자료형이 함수에 전달될 때는 참조가 아니라 값의 형태로 전달된다는 점이다. 

이는 해당 값에 대한 변경 사항이 전역적으로 반영되지 않음을 의미한다. 

 

반면 원시 자료형이 아닌 객체나 배열을 함수에 전달할 때는 참조로 전달된다. 

(해당 값에 대한 수정 사항이 원래의 객체에 반영된다는 말)

 

함수 표현식

const greet = function greet(name){
	console.log("hello" + name);
};

greet("ryurim")
// hello ryurim

위와 같은 함수 표현식을 사용하여 익명함수를 만들 수도 있다. 

const greet = function (name){
	console.log("hello" + name);
};

greet("ryurim")
// hello ryurim

이것을 화살표 함수를 사용하여 선언할 수도 있다.

const greet = (name)=>{
	console.log("hello" + name);
};

greet("ryurim")
// hello ryurim

 

08 ) 함수 스코프와 this키워드의 이해

 

변수의 스코프란 변수에 접근할 수 있는 위치를 제어한다. 전역 스코프를 가지는 변수는 코드의 어느 곳에서나 접근할 수 있다.

블록 스코프를 가지는 변수는 변수가 선언된 블록 내부에서만 접근할 수 있다.

 

여기에서 블록은 함수, 루프, 혹은 중괄호로 구분되는 모든 영역을 의미한다.

var myInt = 1;
if(myInt ===1 ){
	let secondInt = 2;
    console.log(secondInt);
    //2
};
 console.log(secondInt);
 //secondInt is not defined

위와 같이 블록 스코프 외부에서는 변수에 접근할 수 없으며, 접근을 시도하면 오류가 발생한다.

 

this 

 

const myCar = {
	color:"red",
    logColor: function(){
    	console.log(this.color);
    },
};
myCar.logColor();
//red

this의 값은 함수가 호출되는 방식에 따라 다르다.

위의 예에서 함수는 객체의 메서드로 호출 되었다. (this키워드가 myCar개체를 참조한다는 것은 자명하다.)

 

function logThis(){
	console.log(this);
};
logThis();
//window{...}

위의 함수는 전역 범위에서 호출했으므로 this값은 window객체를 참조한다.

스트릭트 모드('use strict')로 설정하면 실수로 window객체를 참조하는 것을 방지할 수 있다.

엄격한 규칙 중에는 전역 객체의 값을 window객체 대신에 undefined로 설정하는 규칙이 있어서, 전역 범위로 정의된 this 키워드의 값도 undefined가 된다.

 

this값을 수종으로 설정하고자 할 때는 .bind()를 사용할 수 있다.

const myCar = {
	color:"red",
    logColor: function(){
    	console.log(this.color);
    },
};

const ungetColor = myCar.logColor;
console.log(ungetColor());
//undefined
const getColor = ungetColor.bind(myCar);
//red

ungetColor를 호출하면 this.color를 찾으려고 하지만, 전역 범위의 this가 호출되기 때문에 그 값은 window객체가 되고,

이 객체에는 color가 없으므로 결과는 undefined 가 된다.

.bind()를 사용하면 해결된다.