1. JavaScript Syntax 1.md

JavaScript Syntax Review

1. Object 안에 있는 함수

// 1 : Hi, I am undefined
const person = {
    name: 'Max',
    age : 29,
    greet: () => {
        console.log('Hi, I am ' + this.name);
    }
};

person.greet(); 

// 2 : Hi, I am Max
const person = {
    name: 'Max',
    age : 29,
    greet: function() {
        console.log('Hi, I am ' + this.name);
    }
};

person.greet(); 

// 3 : Hi, I am Max
const person = {
    name: 'Max',
    age : 29,
    greet() {
        console.log('Hi, I am ' + this.name);
    }
};

person.greet(); 

2. Arrays & Arrays methods

1. for of

   const hobbies = ['Sports', 'Cooking'];
   for (let hooby of hobbies) {
       console.log(hobyy);
   }

2. map 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

   const hobbies = ['Sports', 'Cooking'];
   console.log(hobbies.map(hobby => {
       return 'Hobby: '+ hobby
   }))
   console.log(hobbies)

3. Arrays , Object & Reference Types

배열과 객체는 레퍼런스 타입이다. 따라서 여러가지 메소드를 사용할 수 있다.

1. push

   const hobbies = ['Sports', 'Cooking'];
   hobbies.push('Programming');
   console.log(hobbies) // ['Sports', 'Cooking', 'Programming']

4. Arrays method

1. split 기술적으로 본다면 split 은 string method 다.

   const myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle'; 
   const arr = myData.split(',');
   console.log(arr);

2. join vs toString

   • join 은 인자를 넣어주면 각 배열 요소 사이에 그 값을 넣고 string을 return 한다
   • toStirng은 각 인자를 이어서 , 를 구분하여 string을 만든다.

   const dogNames = ['Rocket','Flash','Bella','Slugger'];
   const str = dogNames.join('+')
   
   
   console.log('str : ' + str)
   console.log('toString : ' + dogNames.toString())
   
   //str : Rocket+Flash+Bella+Slugger
   //toString : Rocket,Flash,Bella,Slugger

3. pop()

   • 마지막 인자를 return 해준다.
   • 포인트 하고 있는 배열에서 마지막 요소를 제거한다.

   const myArray = ['Manchester', 'London'];
   myArray.push('busan')
   
   console.log(myArray); // [ 'Manchester', 'London', 'busan']
   const removedItem = myArray.pop(); // 'busan'
   console.log(myArray); // [ 'Manchester', 'London' ]

4. unshift()

   • 메서드는 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환한다.

   const array1 = [1, 2, 3];
   
   console.log(array1.unshift(4, 5));
   // expected output: 5
   
   console.log(array1);
   // expected output: Array [4, 5, 1, 2, 3]

ps : 추후 알고리즘, 자바스크립트 공부를 통해 추가하기

5. Spread & Rest Operator

객체나 배열에 메소드를 사용할 때 오류를 피하기 위해 원본은 보존하고 사본을 편집하고 리턴 받을 때 가 있다.

1. Spread

   • [...arr]을 이용하면 객체나 배열이 커피 된다.

     const person = {
         name : 'Max',
         age : 29,
         greet : () => {
             console.log('Hi, I am' + this.name);
         }
     };
     
     const hobbies = ['Sports', 'Cooking'];
     
     const copiedArray = [...hobbies];
     console.log(copiedArray);

   • [...obj]

     const person = {
         name : 'Max',
         age : 29,
         greet : () => {
             console.log('Hi, I am' + this.name);
         }
     };
     const copiedPerson = {...person};
     console.log(copeidPerson)

2. Rest Operator

   • 함수에 인자를 넣어 줄 때 몇개를 넣어줘야 할지 정할 수 없을 때가 있다. 그럴 때 이 연산자를 사용하면 동적으로 인자 갯수를 정할 수 있다.

     const toArray = (...args) => {
     	return args;
     };
     
     console.log(toArray(1, 2, 3, 4, 5)); // 1, 2, 3, 4, 5

6. destructuring

const person = {
    name : 'Max',
    age : 29,
    greet : () => {
        console.log('Hi, I am' + this.name);
    }
};
const printNmae = ( { name } ) => {
    console.log(name);
}

printName(person);

const { name, age } = person; // name = 'Max' , age = 29