함수

Array.map()

• map
  • 각 요소를 읽는 역할을 한다.
  • 인자로 넣은 함수에 각 요소들을 넣으면서 반복한다.
  • 반복하면서 실행된 값들은 다시 배열에 모여서 반환된다.
  • 사용 예시

        const somethings = ['a', 'b', 'c'];
        function example(item){return item + "TEST";}
        const test = somethings.map(example);//test라는 배열에 실행 값들이 저장된다.
        console.log(test); //출력 : ["aTEST", "bTEST", "cTEST"]
        

Arrow Function

• 기본 예시
  • {}를 사용하는 경우에는 undefined를 반환하기 때문에 return을 명시해줘야 한다.

const somethings = ['a', 'b', 'c'];
const test = somethings.map(item => {
    return item + "TEST";
});
console.log(test);//출력 : ["aTEST", "bTEST", "cTEST"]

• implicit return : 암시적 리턴
• 암시적 리턴의 경우에는 {}가 없어야 실행된다.
• {}를 할 경우에는 undefined를 반환하기 때문에 return을 명시해줘야 한다.

• 암시적 리턴 예시
  • 암시적 리턴의 경우에는 {}가 없어야 실행된다.

const somethings = ['a', 'b', 'c'];
const test = somethings.map(item => item + "TEST");
console.log(test);//출력 : ["aTEST", "bTEST", "cTEST"]

• 또다른 예시 (연산자가 없는 숫자나 문자열로 단순 초기화시 사용, map의 경우)

const somethings = ['a', 'b', 'c'];
const test = somethings.map(() => item + "TEST");
console.log(test);//출력 : ["aTEST", "bTEST", "cTEST"]

Arrow Function에서의 this

this를 사용해야 하는 상황에서는 Arrow Function을 사용하면 안 된다.

addEventListener의 매개 변수 중 함수명을 선언하는 곳에
()=>{console.log(this);}라고 작성한다면
현재 이 리스너가 버튼에 적용된다고 가정했을 때
출력은 button 태그가 아니라 window가 찍힌다.

주의점
리스너에서 사용할 때 ()=>{console.log(this);}라고 작성하면

this는 window를 가리키지만
function ()=>{console.log(this);}로 작성하면
그 때는 button 태그를 가리킨다.
즉, function 예약어의 유무에 따라 this가 가리키는 위치가 달라진다.

객체에 대한 Arrow Function

const test = {
    name : "who",
    age : 25,
    addYear : () => {
        this.age++;
    }
};
test.addYear();
console.log(test.age);//출력 : 25, 이유 : this가 window를 가리킨다.

const test = {
    name : "who",
    age : 25,
    addYear(){
        this.age++;
    }
};
test.addYear();
console.log(test.age);//출력 : 25, 이유 : this가 객체를 가리킨다.

※ 즉, 객체의 메소드 내부에서 사용하는 this가
객체 자신을 가리키게 하고 싶다면 Arrow Function을 사용하면 안된다.

Arrow Function의 실제 예시

//이메일 찾기 (find : 첫번째 값 반환)
const email = ["test1@naver.com", "test2@gmail.com", "test3@hanmil.net"];
const foundMail = email.find(item => item.includes("@gmail.com"));
console.log(foundMail); //출력 : test2@gmail.com

//이메일 필터 (filter : 배열 반환)
const email = ["test1@naver.com", "test2@gmail.com", "test3@hanmil.net"];
const foundMail = email.filter(item => item.includes(".com"));
console.log(foundMail); //출력 : ["test1@naver.com", "test2@gmail.com"]

//유저명 저장 (forEach : 반복문)
const email = ["test1@naver.com", "test2@gmail.com", "test3@hanmil.net"];
email.forEach(
test => { console.log(test.split("@")[0]); }
);

//유저명 저장 (map : forEach 형식으로 반환된 데이터들을 배열에 저장)
const email = ["test1@naver.com", "test2@gmail.com", "test3@hanmil.net"];
const userNames = email.map(test=>test.split("@")[0]);

※ email.map((test, index) => {name : test.split(“@”)[0], point : index});처럼
객체로도 반환가능하다.

Default Value

//기본적인 함수의 사용 방법
function basicFunction(text){ console.log(text);}
basicFunction("test message");//출력 : text message

//값이 없을 경우의 임시 값을 추가하는 방법
function noneValueTestFunction(text){ console.log((text || "none value"));}
noneValueTestFunction();//출력 : none value

//Default Value를 사용하는 방법
function defaultValueFunction(text = "default value"){ console.log(text);}
defaultValueFunction();//출력 : default value

//Default Value와 Arrow Function을 함께 사용하는 방법
const defualValueAndArrowFunction = (text = "default value & arrow function") => console.log(text);
defualValueAndArrowFunction();//출력 : default value & arrow function

※ Default Value는 단순한 텍스트뿐만 아니라 숫자나 변수나 객체 등 뭐든 올수 있다.