👍 함수란?
- 어떤 특정 작업을 수행하기 위해 필요한 일련의 구문들을 그룹화하기 위한 개념이다. 만일 스크립트의 다른 부분에서 동일한 작업을 반복적으로 수행해야 한다면 함수를 재 사용할 수 있다.
함수 내의 구문들은 페이지가 로드될 때마다 실행되지 않기 때문에 작업을
완료하는 데 필요한 단계들을 함수로 보관해 둘 수 있다.
보관한 함수를 실행하려면 함수를 호출(call)해야한다.
경우에 따라서 추가 정보를 매개변수 형태로 함수에 전달한다.
함수를 작성할 때 함수의 실행 결과를 다시 전달받아야 하는 경우도 있다.
이런 함수의 응답을 '리턴 값(return value)이라 한다.
👉 함수 문법
// 함수선언
(함수키워드) (함수이름)
function sayHello(){
document.wrtie('안녕하세요');
}
함수 이름은 camel case, snake case로 사용하고,
기능에 해당하는 이름으로 이해하기 쉽게 지어야햔다.// 함수호출
(함수이름)
sayHello();👉 함수 - 배경색 변경
<body id="theBody">
<button onclick="changColor();>배경색 바꾸기</button>
<script>
const color = ["#5F2D9A", "#FEDB13", "#F67272", "#0D9C71"];
let i = 0;
function changeColor() {
i++;
if(i >= color.length) {
i = 0;
}
const bodyTag = document.getElementById("theBody");
bodyTag.style.backgroundColor = color[i];
</script>🤞 결과
👉 매개변수가 있는 함수 정의문
-
간혹 함수는 자신의 작업을 수행하기 위해 추가적인 정보가 필요할 수도 있다.
이런 경우에는 함수를 선언할 때 '매개변수(parameter)'를 전달하면 된다.function getArea(width, height){ return width * height; └────────┘ // 매개변수는 함수 내에서 변수처럼 사용된다. } -
값을 인수로 전달하기
getArea(3,5);
- 매개변수를 가진 함수를 호출할 때는 함수 이름의 다음의 괄호 안에 값을 명시하면 된다.
이 값을 인수(arguments)라고하며, 이를 통해 값이나 변수를 전달할 수 있다.👉 함수로부터 단일 값 전달받기
- 일부 함수는 자신을 호출한 코드에게 정보를 돌려주기도 한다.
아래 코드처럼 함수가 계산을 수행한다면 그 결과를 리턴한다.
<script>
function calculateArea(width, height){
const area = width * height;
return area;
}
const elOne = calculateArea(3, 5);
const elTwo = calculateArea(8, 5);
console.log(elOne);
console.log(elTwo);
</script>
// 자바스크립트 해석기는 return 키워드를 만나면 함수의 실행을 중단한다.
그런 후 함수를 호출한 코드로 되돌아간다.
만일 return 키워드 이후에 다른 구문이 함수 내에 존재한다면 그 코드들은 실행되지 않는다.🤞 결과
👉 함수로부터 여러 값 전달받기
- 함수는 배열을 이용해 한 번에 여러 개의 값을 리턴할 수 있다.
아래 코드는 값에 따라 부피를 계산하는 코드이다.
- 먼저, getSize()라는 이름의 새로운 함수를 정의한다. 계산된 면적은 area라는 변수에 저장된다.
- 부피는 volume 이라는 변수에 계산하여 저장한다. 그리고 두 변수의 값을 size라는 배열에 저장한다.
- 이후 size() 함수를 호출한 코드가 계산된 값을 사용할 수 있도록 이 배열을 리턴한다.
- areaOne변수는 3*2의 연산결과인 사각형의 면적을 저장하게 된다. 이 값은 sizes의 첫 번째 배열의 값이다.
- volumeOne 변수는 323의 연산 결과인 사각형의 부피를 저장하게 된다. 이 값은 sizes의 두 번째 배열의 값이다.
<script>
function getSize(width, height, depth){
const area = width * height;
const volume = width * height * depth;
const sizes = [area, volume];
return sizes;
}
const areaOne = getSize(3, 2, 3)[0];
const volumeOne = getSize(3, 2, 3)[1];
console.log(areaOne);
console.log(volumeOne);
</script>🤞 결과
👉 익명함수
- 이름 없는 함수를 익명함수(anonymous function)이라고 한다.
익명함수는 변수에 데이터를 저장하여 변수를 마치 함수처럼 사용 할 수 있도록 만들어준다. 함수를 호출 할 때에는 변수 선언 이후에 호출해야 한다.
- 익명함수로 두 수 더하기
- 첫 번째 수, 두 번째 수를 입력하는 창을 두개 만들고,
입력받은 두 데이터 값을 더하여 도큐먼트에 출력해보자.
<script>
const num1 = Number(prompt("첫 번째 수는?",""));
const num2 = Number(prompt("두 번째 수는?",""));
const addNumber = function(a, b){
const sum = a + b;
return document.write("두 수를 더한 값은 " + sum + "입니다.");
}
addNumber(num1, num2);
</script>🤞 결과
👉 즉시실행함수
- 함수를 정의하자마자 바로 호출하는 것을 즉시 실행 함수라고 한다.
한 번의 실행만 필요로 하는 초기화 코드 부분에 많이 사용 한다.
초기화 코드 부분에 많이 사용하는 이유는 변수를 전역(global scope)으로
선언하는 것을 피하기 위해서이다.
const area = (function() {
const width = 3;
const height = 2;
return width * height;
} () );
└─ 함수가 즉시 호출되어야 한다는 사실을 알려준다.🤞 결과
👉 함수 스코프(scope)란?
- 자바스크립트에서 변수를 선언하고 사용할 때 변수가 적용되는 범위를 스코프(scope)라고한다.
//전역변수 : 자바스크립트 어디에서든 사용할 수 있는 변수
//지역변수 : 함수 스코프내에서만 사용할 수 있는 변수
let a 'global'; ─┐ a의 유효범위
function myFnc(){│
let b = 'local'; ─┐ b의 유효범위
console.log(a); //global
return b; ─┘
}
myFnc();
console.log(b); //ReferenceError ─┘✍ scope실습
- Global은 전역변수로 Local은 지역변수로 만들어서 테스트해보자.
<script>
let scope = "Global";
function show(){
let scope = "Local";
return scope;
}
console.log(show());
console.log(scope);
</script>🤞 결과
👉 this 키워드
- 자바스크립트 내에서 this는 '누가 나를 불렀느냐' 를 뜻한다.
함수와 객체 내부에서 주로 사용된다.
함수가 선언된 위치에 따라 this 키워드의 의미가 달라진다.
이 키워드를 하나의 객체를 참조하며,
주로 특정 시점에 함수를 실행하고 있는 객체를 가리킨다.
- 1인 단독으로 쓴 this
-
스크립트의(다른 객체나 함수 내부가 아닌) 최상위 수준에 함수를 선언하면, 이 함수는 전역범위(global scope) 혹은 전역 컨텍스트(global context)에 포함된다.
-
이 컨텍스트에 속한 기본 객체는 window 객체이므로 전역 컨텍스트 내에 선언된 함수 내에서 this 키워드를 사용하면 이 키워드는 window 객체를 가리키게 된다.
-
아래 코드에 있는 this는 window 객체의 속성을 리턴하기 위한 목적으로 사용되었다.
<script>
'use stric';
const x = this;
console.log(x);
</script>🤞 결과
- 함수 안에서 쓴 this
- 함수 안에서 this는 함수의 주인에게 바인딩된다. 함수의 주인은 ? window 객체 !
<script>
function windowSize(){
const width = this.innerWidth;
const height = this.innerHeight;
return [width,height];
}
console.log(windowSize());
</script>🤞 결과
- 함수 안에서 쓴 this - 엄격모드
- strict mode(엄격모드)에서는 위의 결과와 다르다.
함수 내의 this에 디폴트 바인딩이 없기 때문에 ERROR가 된다.
<script>
"use strict";
let num = 0;
function addNum(){
this.num = 100; //ERROR! Cannot set property 'num' of undefined
num++;
}
console.log(addNum());
</script>🤞 결과
-메서드 안에서 쓴 this
- 메서드 호출 시 메서드 내부 코드에서 사용된 this는 해당 메서드를 호출한 객체로 바인딩된다.
<script>
const person = {
firstName : "Jin-won",
lastName : "Shen",
fullName : function(){
return this.firstName + " " + this.lastName;
},
};
console.log(person.fullName());
</script>🤞 결과
- 생성자 안에서 쓴 this
- 생성자 함수가 생성하는 객체로 바인딘된다.
<script>
funtion person(){
this.name = name;
}
const kim = new Person("kim");
const lee = new Person("lee");
console.log(kim.name);
console.log(lee.name);
</script>🤞 결과
하면 된다. | 좋은 FE 개발자 되기