04-1. JavaScript 고급문법(this, arrow function, rest parameter 등) with 자바스크립트 제대로 배워볼래?(Section 03)

스터디 4주차 🐬
-JS 강의 섹션3 (자바스크립트 고급 문법)까지 듣기

JavaScript

Section 03. 자바스크립트 고급 문법

1.this

• window 객체를 의미

console.log(this); //console.log(window);

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

• object안에서는 object 자체를 의미

   var person={

            firstName:"oh",
            lastName:"bom",
            fullName:function(){
                return this.firstName + " " +this.lastName;
            }

        };

• html안에서 this는 html 그 자체를 의미

<button type="button" onclick="this.style.backgroundColor='blue'">클릭</button>
<button type="button 2" onclick="callFunc(this);"> 클릭2</button>
//위에서 this는 html의미

function callFunc(obj){
console.log(obj);
}

2. scope

scope는 변수에 대한 접근성을 의미함

• local scope

function myFunction(){
var carName="hyundai";
}

• global scope

myFunction2(); 

//이렇게 함수선언보다 함수를 앞에 놓아도 에러가 안난다.
//JS는 함수 선언이 호출보다 더 아래에 있더라도
//함수를 먼저 해석한 후에 호출을 실행하기 때문

var carNmae2="kia";

function myFunction2(){
console.log(carName2);
}

//myFunction3(); //error
//위와 같은 경우에는 함수호출이 선언보다 앞에 있더라도 에러가 아니었지만
//함수를 변수안에 넣는 경우에는 호출이 선언보다 앞에 있으면 에러남.


var myFunction3=function(){
console.log("haha");
}

3. default function parameter

ES6에서 추가된 내용

function say(message="this is default message"){
console.log(message);
}

say();//this is default message 출력

function plus(x,y=1){
console.log(x+y);
}

plus(4);// 4+1=5 출력

4. rest parameter

만약에 덧셈을 하는 함수를 짜는데, 변수를 몇 개 받아야 할지 모르겠다?

• ver1

function sum(...args){
var total=0;
for(var x of args){
total+=x;
}
return total;
}

console.log(sum(1,3,5)); //9출력

• ver2

function sum2(...args){
let total=0;
args.forEach(function(x){
total+=x;
})
return total;
}

console.log(sum2(1,2,3))//6 출력

5. arrow function

함수명=(parameter)=>{}
함수명=(parameter)=>return 값

var hello=()=>{
return "hello world!"
}
var hello=()=>"espanola~";

• 자세한 arrow function 유도과정

function hello(){
return "hello";
}

var hello=function(){
return "hello world!";
}

var hello=()=>{
return "hi222";
}

var hello=()=>"espanola~";

var hi=(firstName,lastName)=>"hi "+firstName+lastName;

console.log(hi("oh","bom"));

//parameter가 1개일 땐 ()조차 생략가능
var intro=fullName=>"nice to meet you"+fullName;
console.log(intro("ohbom"));

6. template literals

전달한 혹은 전달받은 변수를 출력하거나 리턴할때
함께 전달할 말들을 `` 로 묶고 그 안에 그 변수를 &{변수이름} 이런식으로 넣어서 쓸수 있다.

 ho=(name)=>`hi ${name}`;
 console.log(ho("ho"));
// hi ho

function hello(name){
var name2="HW";
console.log("hi ${name2} ! and hello ${name}");

}

hello("john doe");
//hi HW ! and hello john doe

7. Object Literal Syntax Extension

var type="student";
var score={
[type]:"oh bom",
score:90
};

console.log(socre.student);//oh bom 출력

var type2="grade";
score[type2]=1;
//score.grade=1;과 동일

이전 포스팅 중
'(02.JavaScript 기본 문법 with 자바스크립트 제대로 배워볼래?(Section 01)' 의
3.object 선언방법2와 함께 공부하면 좋을 것 같다.
➡velog

8. Spread Operator

var arr1=[4,5,6];
var arr2=[1,2,3,...arr1];
//...arr1에서 ...은 분해하는거 의미

console.log(arr2);
//1,2,3,4,5,6 출력

var cd="CD";
var alphabet=["A","B",...cd];
console.log(alphabet);
//A B C D 출력

9. Object destructuring

function getPerson(){
return {
Name:"oh_bom",
age:23,
country:korea
};
}

//!! 실무에서 자주 쓰임
var{Name,country}=getPerson();
console.log(age);//error(age는 object destructuring 안해줘서)
console.log(country); // korea 출력

10. array destructuring

function getScores(){
return [70,80,90];
}

//array destructuring
var [x,y]=getScores();
console.log(x); // 70 출력

//위도, 경도 예시
function getLocation(){
return [127.22,721.01];
}

var [latitude,longitude]=getLocation();
console.log(longitude); //721.01 출력