내 정보(myInfo) 객체에서 성별을 출력할 때 console.log()를 사용했다.
1 | console.log(myInfo.gender); | cs |
myInfo 객체에 gender 키에 접근하는 것처럼,
console.log를 console 객체에 log() 함수를 사용한다고 보면 된다.
console 객체를 출력하면,
1 2 3 4 5 6 7 8 9 10 11 12 13 | t { log: [Function], error: [Function], info: [Function], warn: [Function], dir: [Function], time: [Function], timeEnd: [Function], trace: [Function], assert: [Function], clear: [Function], stdout: { [Function] clear: [Function] }, _times: {} } | cs |
log 함수를 비롯해 다양한 함수를 포함하고 있다.
이 중에서 우리가 사용하고 싶은 것을 console.함수명() 형태로 사용하는 것이다.
즉 console이라는 객체는 여러가지의 내장함수를 가지고 있다.
그럼 함수는 왜 필요할까?
1 2 3 4 5 | console.log("Hello, Ryan"); console.log("Hello, Adrianne"); console.log("Hello, Kaori"); console.log("Hello, Bobby"); | cs |
"Hello"라는 인삿말이 싫어서 "Hi"로 고치려면 1개씩 수정해야하는 번거로움이 있다.
만약 이런 코드가 100만개라면 100만개를 하나씩 언제까지 고치고 있을줄 모른다.
여기서 반복되는
1 2 | console.log("Hello"); | cs |
이 코드를 하나로 묶어 필요할 때마다 사용하고, 내용 수정도 한 번만으로 100개든 1000개든 한꺼번에 되도록 하는게 목표다.
그것을 도와줄 녀석이 함수이다.
함수의 정의는 function 함수명()으로 시작한다.
1 2 3 4 5 | function sayhello() { console.log("Hello"); } sayhello(); | cs |
중괄호{} 안에 중복되는 코드를 입력하고, 필요시 함수명()만 입력하면 함수로 지정된 코드를 반환한다.
다시 한 번 정리하면, 함수 형태는 함수명()이다.
console.log()는 즉, console 객체에 포함된 log() 함수라는 걸 기억하자.
이어서 우리가 만든 함수를 활용하여 인삿말과 이름을 같이 출력해보자.
1 | sayhello()+console.log("Ryan") | cs |
실망스럽게도,
1 2 | >>
Hello Ryan | cs |
우리가 원하는 한 줄의 텍스트로 출력되지 않았다.
그럼 sayhello() 함수의 도움을 받아 sayhello("Ryan") 형태로 값을 담아 같이 출력해보는 방식을 만들어보자.
1 2 3 4 5 | function sayhello(name) { console.log("Hello"+',', name); } sayhello("Ryan") | cs |
1 2 | >> Hello, Ryan | cs |
드디어 우리가 원하던 결과가 반환되었다.
name은 매개변수(parameter)이고, sayhello() 함수 안의 "Ryan"은 인자(argument)이다.
매개변수는 인자를 받아서 넘겨주는 역할을 한다.
따라서 sayhello() 함수는 "Ryan"을 name에게 토스하여 "Hello"와 같이 출력된다.
매개변수는 변수처럼 임의로 이름을 설정해주면 된다.
1 2 3 4 5 6 7 8 | function sayhello(name) { console.log("Hello"+',', name); } sayhello("Ryan") sayhello("Adrianne") sayhello("Kaori") sayhello("Bobby") | cs |
1 2 3 4 5 | >> Hello, Ryan Hello, Adrianne Hello, Kaori Hello, Bobby | cs |
추가로 인자를 2개 넘기는 연습을 해보자. 인자가 2개이면 매개변수도 2개이다.
1 2 3 4 5 6 7 8 | function sayhello(name, age) { console.log("Hello"+',', name+"!", "Are you", age+"?"); } sayhello("Ryan", 31) sayhello("Adrianne", 31) sayhello("Kaori", 26) sayhello("Bobby", 25) | cs |
1 2 3 4 5 | >> Hello, Ryan! Are you 31? Hello, Adrianne! Are you 31? Hello, Kaori! Are you 26? Hello, Bobby! Are you 25? | cs |
점점 함수가 발전되어가는 모습이다.
'코딩 연습 > Javascript' 카테고리의 다른 글
함수를 변수에 지정하기 (0) | 2018.12.07 |
---|---|
문자열 속에 매개변수 넣기 (0) | 2018.12.06 |
배열(array)과 객체(object)를 확장해서 사용 (0) | 2018.12.04 |
객체(object)를 이용해 데이터 다루기 (0) | 2018.12.04 |
배열(array) (0) | 2018.12.04 |