JavaScript/Clone Website

[JavaScript] #2.1 Your first JS Function - parameter(매개변수), argument(인자) (#코딩공부)

함께 공부해요 2020. 3. 13. 22:00

https://youtu.be/Q0S6l_gkpeU


<복습>

https://wook-2124.tistory.com/66

 

[JavaScript] #1.10 Organizing Data with Objects (#코딩공부)

https://youtu.be/PRA_bhUxuh4 <복습> https://wook-2124.tistory.com/64 [JavaScript] #1.9 Organizing Data with Arrays - 배열의 특징 (#코딩공부) https://youtu.be/VvNF3rFWIkQ <복습> https://wook-2124.tis..

wook-2124.tistory.com

 

<준비물>

https://repl.it/

 

Online IDE, Editor, and Compiler - Fast, Powerful, Free

Repl.it is a simple yet powerful online IDE, Editor, Compiler, Interpreter, and REPL. Code, compile, run, and host in 50+ programming languages: Clojure, Haskell, Kotlin (beta), QBasic, Forth, LOLCODE, BrainF, Emoticon, Bloop, Unlambda, JavaScript, CoffeeS

repl.it

 

<코드기록>

// console은 엄청 큰 object임, 내장함수(built-in function)
// 따라서 console.log에서 log는 console object에 내장되어있는 함수를 뜻함
console.log(console);


// Python - def(함수정의), print(출력)
// JavaScript - function(함수정의), console.log(출력)
// def sayHello():
function sayHello(){
  // print("Hello!")
  console.log("Hello!");
}

sayHello();


// parameter - argument(인자)의 개념인 파라미터, 함수 안에서 사용하게 될 이름임
// a, b 파라미터(인자)에 맞게 positional arguments로 알아서 위치시킴
// console.log 안에서는 b, a를 어디로 옮겨도 keyworded arguments로 인식해서 출력함
function sayHello(a, b){
  console.log("Hello!", b, a);
}

sayHello("YoungWook", "How is going on?");


// console.log는 함수의 argument(인자)를 무한하게 가질 수 있음
// ex) "Hello!", "you are", "years old right?"
function sayHello(name, age){
  console.log("Hello!", name, "you are", age, "years old right?");
}

sayHello("YoungWook", 27);

1. console은 뭘로 이뤄져있을까?

출력된 결과처럼 console은 많은 object(log, error, info, warn, dir, time 등등)을 포함하고 있는 내장함수(built-in function)이다.

 

console.dir, console.warn, console.info 등 수많은 console object를 호출할 수 있다.


2. Python과 JavaScript

Python에서 def(함수정의), print(출력)이, JavaScript에서는 function(함수정의), console.log(출력)이다.

 

이제 function으로 함수를 설정하고, 그것을 출력하고자 할 때는 console.log를 적을 것이다.


3. parameter(매개변수), argument(인자)

parameter(매개변수)와 argument(인자)에 대해서 알아보자.

 

1) parameter(매개변수)는 함수를 정의 할 때 외부로부터 받아들이는 임의의 값을 의미한다.

 

예를 들어,

function f(x, y){

return x + y;

};

여기서 x, y를 parameter(매개변수)라고 할 수 있다.

 

2) argument(인자)는 function(함수)를 호출할 때 사용하게 되는 일련의 값들이다.

function f(25, 31){

return x + y;

};

여기서 f(25, 31) 즉 25, 31라는 값이 argument(인자)가 된다.

 

정리하자면 'parameter(매개변수)의 값으로 argument(인자) 25과 31를 대입했다' 라고 말할 수 있다.

 

이처럼 parameter(매개변수)와 argument(인자)같은위치에 있지만 다른의미로 쓰인다.


4. positional arguments(의존적 인자)

https://wook-2124.tistory.com/17

 

[Python] #1.8 Keyworded Arguments (#코딩공부)

https://youtu.be/Z27sK7sNoSk #1.7 💖은 니꼬쌤의 말씀! I just wanted to say: Thank you for being here and watching our lectures. See you on the next video! <복습> https://wook-2124.tistory.com/15 [Py..

wook-2124.tistory.com

a, b parameter(매개변수)에 맞게 positional arguments(의존적 인자)로 각각 위치에 맞게 위치시켰다.

 

console.log에 parameter(매개변수) a, b를 추가해서 출력하면, positional arguments로 정해둔대로 출력이 된다. 

 

그렇다면 만약 "Hello!", b, a처럼 parameter(매개변수)의 순서를 바꾸면 어떻게 될까?

 

순서를 바꾸더라도 b, a순으로 출력된다. 그러나 결과가 a, b로 출력되길 원했지만, 그렇지 않은 경우에는 곤란할 수 있다.


5. keyword arguments(키워드 인자)

때문에 name, age처럼 parameter(매개변수)의 값인 arguments를 keyword로 정하는 방법이 있다.

 

이렇게 하면 개발자의 의도대로 "Hello!", 여기에는 name이라는 keyword만 출력해주고, "you are", 마찬가지로 여긴 age, "years old right?"처럼 name, age 순으로 문구를 출력할 수 있다.

 

그럼 sayHello function을 쓰게되는 사용자name, age 순으로 입력해달라는 keyword가 있으니, name에는 자신의 이름을 넣고 age에는 자신의 나이를 입력하게 된다.

 

이것은 a, b parameter(매개변수)로 positional argumetns(의존적 인자)를 정한 것 보다, keyword를 정해줘서 어떤 것을 먼저 적어야 할지 모르는 사용자를 위한 배려라고 볼 수도 있다.


※ 코로나19 조심하세요!!!!