영광의 시대!/2022 개발자의 품격 부트캠프 1기
[개발자의품격][부트캠프][1기][9차시] JavaScript 주요 포인트 #9 | 고급 문법 - this, Scope, Default Function Parameter, Rest Parameter, Arrow Function, Template Literals
DandyNow
2022. 2. 5. 09:39
728x90
반응형
JavaScript 주요 포인트 #9
this 키워드
this 키워드는 사용되는 위치에 따라 바인딩되는 객체가 달라진다.
this와 Window 객체
// this에 Window 객체가 바인딩 된 경우
<script>
// this 키워드가 Window 객체인 경우, Window 객체 관련 모든 내장 함수 사용 가능하다.
console.log(this); // Window(this는 Window 객체)
function myFunction() {
console.log(this); // this는 함수 내 Window 객체
}
myFunction(); // Window
</script>
this와 DOM 요소
<!-- this에 DOM 요소가 바인딩 된 경우 -->
<!-- 호출하는 함수에 this 파라미터로 전달하면, this는 클릭 이벤트가 발생한 <button> 태그 그 자체가 된다. -->
<button onclick="callFunction(this)">클릭</button>
<!-- 호출하는 함수에 this 파라미터로 전달하면, this는 onchange 이벤트가 발생한 <select> 태그 그 자체가 된다. -->
<select name="" id="" onchange="callFunction(this)">
<!-- html 요소에서 this는 그 html 돔요소 자체 -->
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select><script>
// HTML DOM 요소에서 호출할 함수
function callFunction(obj) {
console.log(obj);
}
</script>
this와 object
// this에 object가 바인딩 된 경우
<script>
// object 안에서의 함수의 this는 object 자체를 가리킨다.
let person = {
firstName: "Jhon",
lastName: "Doe",
getFullName: function () {
return this.firstName + " " + this.lastName;
},
};
console.log(person.getFullName()); // Jhon Doe
</script>object 내에 함수를 정의할 수 있고, 함수가 object 내에 정의된 다른 키에 접근할 때 this 키워드를 사용한다. 이러한 방식은 object 내에 이미 정의된 키로 새로운 데이터를 만들고자 할 때 많이 사용한다.
Scope
선언된 변수에 대한 접근성을 의미한다.
<script>
// Scope, 선언된 변수에 대한 접근성을 의미한다.
// 자식에서 부모의 변수는 접근할 수 있다. 따라서 함수 안에서 함수 밖의 변수에 접근 가능하다.
let carName = "볼보";
function myFunction() {
let carName = "기아차";
console.log(carName); // 기아차(변수명이 같을 경우, 함수 밖의 "볼보"에 접근할 수 있지만 우선순위가 높은 "기아차"를 출력한다.)
}
myFunction();
console.log(carName); // 볼보(함수 밖에서는 함수 내의 변수에 접근할 수 없다.)
</script>
Default Function Parameter
함수 호출 시 인자를 넣지 않은 경우에 대한 기본값을 적용한다. 파라미터 값이 전달되지 않아 생기는 오류를 미연에 방지할 수 있다.
// default function parameter
<script>
function log(msg) {
console.log(msg);
}
// Default function parameter 미적용
log("콘솔에 출력합니다."); // 콘솔에 출력합니다.
log(); // undefined(인자를 넣지 않은 경우)
// Default function parameter 적용
function convertDateFormat(format = "YYYY-MM-DD") {
let today = new Date();
let year = today.getFullYear();
let month = (today.getMonth() + 1).toString().padStart(2, 0);
let day = today.getDate().toString().padStart(2, 0);
let formatDate = format
.replace("YYYY", year)
.replace("MM", month)
.replace("DD", day);
console.log(formatDate);
}
// 인자를 넣지 않아도 지정한 기본값(디폴트 파라미터)이 적용된다.
convertDateFormat(); // 2022-02-05(디폴트 파라미터인 YYYY-MM-DD 적용됨)
convertDateFormat("YYYY-MM-DD"); // 2022-02-05
convertDateFormat("MM-DD-YYYY"); // 02-05-2022
convertDateFormat("DD-MM-YYYY"); // 05-02-2022
</script>
Rest Parameter
Rest Parameter는 실무에서 많이 사용한다. 함수 호출 시 파라미터 값의 개수에 상관없이 인자를 넣을 수 있다. 인자 값은 배열로 저장된다.
<script>
// Rest Parameter 미적용
function sum(n1, n2) {
return n1 + n2;
}
function sum2(n1, n2, n3) {
return n1 + n2;
}
function sum3(n1, n2, n3, n4) {
return n1 + n2;
}
console.log(sum(5, 7)); // 12
// Rest Parameter 적용
function add(...nums) {
let total = 0;
console.log(nums); // [5, 6, 7, 8, 9]
for (const n of nums) {
total += n;
}
return total;
}
console.log(add(5, 6, 7, 8, 9)); // 35
</script>
Arrow Function
화살표 함수는 함수를 정의하는 새로운 방법이다. 실무에서 많이 사용하므로 반드시 익숙해져야 한다.
// Arrow Function(화살표 함수)
<script>
// 함수 선언식
function hello(name) {
return "Hello " + name;
}
console.log(hello("hello")); // Hello hello
// 함수 표현식
const hello2 = function (name) {
return "Hello " + name;
};
console.log(hello2("hello2")); // Hello hello2
// Arrow Function(화살표 함수)
// function 생략 가능
const hello3 = (name) => {
return "Hello " + name;
};
console.log(hello3("hello3")); // Hello hello3
// Arrow Function(화살표 함수) - () 생략 가능
const hello4 = name => {
return "Hello " + name;
};
console.log(hello4("hello4")); // Hello hello4
// Arrow Function(화살표 함수) - {} 생략가능
const hello5 = name => "Hello " + name; // 실무에서는 이 표현을 사용한다. 익숙해 져야 한다.
console.log(hello5("hello5")); // Hello hello5
</script>
Template Literals
문자열 안에 변수를 바로 넣을 수 있다.
// Template Literals
<script>
function hello(firstName, lastName) {
console.log("Hello " + firstName + ", " + lastName + ". Welcome!"); // 기존 문자열 결합 방식
console.log(`Hello ${firstName}, ${lastName}. Welcome!`); // Template Literals 방식(``는 백틱이라고 부른다.)
}
hello("길동", "홍"); // Hello 길동, 홍. Welcome!, Hello 길동, 홍. Welcome!
</script>
"어디 등짝을 바닥에 붙일 생각을 하는가?" 좋은 개발자는 자기가 짠 코드의 길이 만큼 성장한다. 좋은 도반에서 함께 공유할 때 더 빨리 성장할 수 있다!
728x90
반응형