My footsteps

code 실습 / 2️⃣6️⃣ 본문

국비수업/CODE

code 실습 / 2️⃣6️⃣

밀김 2023. 3. 31. 13:03
728x90

 

 

 

 

 

 

 

 

 

✏️ 화살표 함수와 친해지기

주석처리된 함수들을 ??에 화살표 함수로 바꾸어 보아요

function add(x, y) {
 return x + y;
}

const add = (x,y) => x+y;
add(1,2);

console.log(add(1,2));

//---------------------------------------------------1




function printName({name}) { //name객체가 안에 담겨있음
 console.log('name : ', name); //name객체값 출력
}

const cat = {
 name: "tory",
};

const printName = ({name}) => {
    console.log(name);
}
printName(cat); //cat객체를 전달함 어디다? 콘솔에?


// 이 코드는 자바스크립트로 작성된 객체와 함수를 포함합니다.
// 첫째 줄에서는 cat 이라는 이름을 가진 객체를 생성하고, name 속성에 "tory" 값을 할당합니다.
// 둘째 줄에서는 printName 이라는 이름을 가진 화살표 함수를 정의합니다. 이 함수는 객체를 인자로 받으며, 객체의 name 속성값을 출력하는 역할을 합니다.
// 셋째 줄에서는 printName 함수에 cat 객체를 전달하여 호출합니다. 이때 cat 객체의 name 속성값인 "tory"가 출력됩니다.
// 따라서 위 코드의 실행 결과는 "tory"가 콘솔에 출력되는 것입니다.

//---------------------------------------------------2


function doubleAll(nums) {
    const result = [];
    for (const n of nums) { //객체에 담긴 값을 꺼내는 for-of문
    result.push(n*2);
    }
    return result;
}


const doubleAll = (nums) =>{
    const result = [ ];
    for(const n of nums){
    result.push(n*2);
    }   
    return result;
}

//---------------------------------------------------3


/** 숫자 배열에서 홀수만 찾아 리턴*/
const filterOdd = (nums) => nums.filter((num) => num % 2 === 1);

//---------------------------------------------------4


/** 숫자 배열내의 모든 숫자 값을 두배로 만든 배열을 리턴 */

// const doubleAll = ??

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];

nums = filterOdd(nums);
nums = doubleAll(nums); 
console.log(nums); 

const doubleAll = (nums) =>{

const result = [ ];
	for(const n of nums){
	result.push(n*2);
}	
return result;
}
//////////////////////////////////////////////////////////////////////
// 아래와 같이 할 수도 있다.
//////////////////////////////////////////////////////////////////////
const result = nums.map(x => x*2);
// 주어진 함수의 결과값을 계산해서 반환하는 함수 : map
//---------------------------------------------------5

 

 

✏️ 일반 함수 vs 화살표 함수 this 차이

: 일반함수는 this를 갖고 있고 화살표 함수는 this를 갖고 있지 않다

 

 

✏️ call, apply, (ES6~) bind

: call,apply는 구버전이라..잘 사용하지 않고 bind를 주로 사용하는데

call은 배열안에 있는 인자들을 전달하고 apply는 배열객체 자체를 전달한다 

bind는 this를 직접 가리킬수 있는 유일한 함수이다

 

 

https://mong-blog.tistory.com/entry/call-apply-bind%EC%9D%98-%EC%B0%A8%EC%9D%B4

 

call, apply, bind의 차이

이 포스팅은 call(), apply(), bind()에 대해 소개하고 있습니다. js에서는 함수 호출 방식과 상관없이 this에 접근할 수 있다. 그렇다면 this를 우리가 원하는 객체로 지정할 수는 없을까? 이번시간에는

mong-blog.tistory.com

 

 

 

 

 

 

 

 

 

728x90

'국비수업 > CODE' 카테고리의 다른 글

code 실습 / 2️⃣8️⃣  (0) 2023.04.16
code 실습 / 2️⃣7️⃣  (0) 2023.04.09
code 실습 / 2️⃣5️⃣  (0) 2023.03.31
code 실습 / 2️⃣4️⃣  (0) 2023.03.29
code 실습 / 2️⃣3️⃣  (0) 2023.03.21