My footsteps
code 실습 / 2️⃣6️⃣ 본문
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 |