[TIL-39] 노마드코더 크롬앱(JS) 클론코딩 #2.7~#2.10

#2 JS 기초 이론

 

function

• function은 코드를 캡슐화해서 여러 번 실행할 수 있게 함.
• 반복되는 작업 줄여줄 수 있음.
  • 예) 여러 사람들에게 인사하는 말 출력
    
    • console.log("Hello my name is Nico");
      console.log("Hello my name is Flynn");
      console.log("Hello my name is Dal");
      
    • Hello my name is 는 반복되고, 뒤의 이름만 바뀜.
• 만드는 법
  • function 함수명() {
        반복 실행될 코드
    }
    • { } 안의 코드들이 function 실행시킬 때마다 발생함.
  • function sayHello() {
        console.log("Hello! My name is ");
    }
• 실행하는 법 : 함수명(argument);
  • 함수명만 써서는 작동하지 않음. ()괄호가 실행버튼!
  • 예) sayHello();
    
    • 근데 "Hello! My name is "라는 같은 내용만 나옴.
    • "Hello! My name is nico"를 출력하려면 () 안에 어떤 데이터를 입력해줘야 함.
    • 지금은 그 데이터가 반영되지 않는 상태. 괄호 안에 뭘 쓰든 결과물에 상관 없음.
  • argument : 매번 다른 내용이 적용되어 실행되게 하려면, 정보를 function에 보내야 함.
• 함수가 데이터를 받는 법
  
  • argument를 받을 변수를 함수 안에 만들어줌.
    • function sayHello(nameOfPerson) {
          console.log(nameOfPerson);
      }
    • sayHello("nico");
  • 하나의 함수에 argument는 여러 개일 수 있음.
    • function sayHello(nameOfPerson, age) {
          console.log("Hello my name is " + nameOfPerson + "and I'm " + age);
      }
    • sayHello("nico", 15);
      • 괄호 안에 입력한 순서대로 해당 위치의 변수에 데이터가 전달됨.
  • 괄호 안에 아무것도 안 쓰면 제대로 실행되지 않음.
    • NaN : not a number. 숫자가 있어야 할 자린데 숫자가 아니라는 뜻.
  • 함수의 블록 안에 사용된 변수는 함수 안에서만 존재함. 함수 밖에서 사용될 수 없음.

 

object.property(argument) 

• 객체 안에 함수 넣기 : player.sayHello() 이런 식으로 사용하려면?!
  • "player" 객체 안에 요소 중 하나로 "sayHello" 함수를 넣음.
  • 함수 작성하는 순서 바뀜. "함수명: function()"
    • const player = {
        name: "nico",
        sayHello: function(otherPersonsName){
           console.log("hello " + otherPersonsName);
        },
      };