함수
- 함수의 주요 용도 중 하나는 중복 코드 피하기
자바스크립트는 함수를 특별한 종류의 값으로 취급. 다른 언어에서처럼 "동작을 하는 구조"로 취급되지 않는다.
→ 함수가 어떤 방식으로 만들어졌는지에 관계없이 함수는 값이고, 따라서 변수에 할당 가능
++ 자바스크립트는 괄호가 있어야만 함수가 실행된다.
함수 내부에 외부 변수와 동일한 이름을 가진 변수가 선언되었다면, 내부 변수는 외부 변수를 가려버림.
매개변수는 함수 선언 방식 괄호 사이에 있는 변수(선언 시 쓰이는 용어).인수는 함수를 호출할 때 매개변수에 전달되는 값(호출 시 쓰이는 용어).
default값 설정function showMessage(from, text = "no text given") function showMessage(from, text = anotherFunction()) { // anotherFunction()은 text값이 없을 때만 호출됨 // anotherFunction()의 반환 값이 text의 값이 됨 } function showMessage(from, text) { if (text === undefined) { text = 'no text given'; } alert( from + ": " + text ); } function showMessage(from, text) { // text의 값이 falsy면 기본값이 할당됨 // 이 방식은 text == ""일 경우, text에 값이 전달되지 않은것과 같다고 간주 text = text || 'no text given'; ... }
nullish 병합 연산자 : ?? 를 사용하면 0처럼 falsy로 평가되는 값들을 일반 값처럼 처리가능.
// 매개변수 'count'가 `undefined` 또는 `null`이면 'unknown'을 출력해주는 함수
function showCount(count) {
alert(count ?? "unknown");
}
showCount(0); // 0
showCount(null); // unknown
showCount(); // unknownreturn만 있는 경우 → undefined를 반환.
return = return undefined.
자바스크립트는 return문 끝에 세미콜론을 자동, return 사이에 새 줄을 넣어 코드를 작성 절대 안됨!!!
함수 이름짓기
- "get…" – 값을 반환함
- "calc…" – 무언가를 계산함
- "create…" – 무언가를 생성함
- "check…" – 무언가를 확인하고 불린값을 반환함
getAge 함수는 나이를 얻어오는 동작만 수행해야 한다. alert 창에 나이를 출력해 주는 동작은 이 함수에 들어가지 않는 것이 좋다.
-
함수 선언문(
function Name()..)에서는 끝에 세미콜론이 없어도 된다.
자바스크립트는 스크립트를 실행하기 전, 전역에 선언된 함수 선언문을 찾고, 해당 함수를 생성하는 방식. -
함수표현식(
let Name = function()..)은 코드 블록이 아니라, 값처럼 취급되어 변수에 할당돼서 모든 구문의 끝에 세미콜론;붙임.
함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성. 실행 흐름이 함수에 도달하면, 해당 함수를 사용가능. -
함수 선언문의 경우, 만들어진 블록 내 어디서든 접근할 수 있다. 하지만 블록 밖에서는 함수에 접근금지.
-
함수 선언문은 함수가 선언된 코드 블록 안에서만 유효하기 때문에 이런 에러가 발생
콜백함수
함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수를 "나중에 호출(called back)"하는 것이 콜백 함수의 개념이다.
동작을 대변하는 값인 함수를 변수 간 전달하고, 동작이 필요할 때 이 값을 실행할 수 있습니다.
function ask(question, yes, no) {
if (confirm(question)) yes()
else no();
}
ask(
"동의하십니까?",
function() { alert("동의하셨습니다."); },
function() { alert("취소 버튼을 누르셨습니다."); }
);나머지 매개변수
나머지 매개변수는 남아있는 인수를 모으는 역할을 하므로 아래 예시에선 에러가 발생합니다.
function f(arg1, ...rest, arg2) {
// ...rest 후에 arg2가 있으면 안 됩니다.
// 에러
}
...rest는 항상 마지막에 있어야 합니다.arguments
: 유사 배열 객체이면서 이터러블(반복 가능한) 객체 → 배열 메서드를 사용할 수 없다는 단점
-
arguments.map을 호출할 수 없음.
여기에 더하여 arguments는 인수 전체를 담기 때문에 나머지 매개변수처럼 인수의 일부만 사용할 수 없다는 단점도 있다. -
배열 메서드를 사용하거나 인수 일부만 사용할 때는 나머지 매개변수를 사용하는게 좋습니다.
스프레드 문법(spread syntax, 전개 문법)
...를 사용하기 때문에 나머지 매개변수와 비슷해 보이지만, 스프레드 문법은 나머지 매개변수와 반대되는 역할.
let str = "Hello";
alert( [...str] ); // H,e,l,l,o메서드 Array.from은 이터러블 객체인 문자열을 배열로 바꿔주기 때문에 스프레드 문법과 동일하다.
- Array.from은 유사 배열 객체와 이터러블 객체 둘 다에 사용할 수 있습니다.
- 스프레드 문법은 이터러블 객체에만 사용할 수 있습니다.
깊은복사,얕은 복사(objext.assign) -> 진짜 복사본
그러나 이를 써야하는 상황은 많이 발생하지 않는다.
객체
객체는 중괄호 {…}를 이용해 만들 수 있습니다. 중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티
→ property 를 여러 개 넣을 수 있는데, 키 = 문자형, value = 모든 자료형 허용
변수 key는 런타임에 평가되기 때문에 사용자 입력값 변경 등에 따라 값이 변경될 수 있다.
- '점’ 표기법은 키가 '유효한 변수 식별자’인 경우에만 사용할 수 있다.
- 대괄호 표기법은 키에 어떤 문자열이 있던지 상관없이 동작합니다. 프로퍼티 이름과 값의 제약을 없애주기 때문에 점 표기법보다 훨씬 강력하다.
단축 프로퍼티
function makeUser(name, age) {
return {
name: name,
age: age,
// ...등등
};
}function makeUser(name, age) {
return {
name, // name: name 과 같음
age, // age: age 와 같음
// ...
};
}이름과 값이 변수의 이름과 동일할 때, 프로퍼티 값 단축 구문(property value shorthand) 을 사용하면 코드를 짧게 줄일 수 있다.
어떤 문자형, 심볼형 값도 프로퍼티 키가 될 수 있다.문자형이나 심볼형에 속하지 않은 값은 문자열로 자동 형 변환된다.
user = {
sayHi: function() {
alert("Hello");
}
};
// 단축 구문을 사용하니 더 깔끔해 보이네요.
user = {
sayHi() { // "sayHi: function()"과 동일합니다.
alert("Hello");
}
};자유로운 this
this 값은 런타임에 결정됨.
동일한 함수라도 다른 객체에서 호출했다면 'this’가 참조하는 값이 달라짐.
객체 없이 호출할 때 this는 undefined를 나타낸다.
this가 없는 화살표 함수
화살표 함수는 일반 함수와는 달리 ‘고유한’ this를 가지지 않는다. 화살표 함수에서 this를 참조하면, 화살표 함수가 아닌 ‘평범한’ 외부 함수에서 this 값을 가져온다.
let user = {
firstName: "보라",
sayHi() {
let arrow = () => alert(this.firstName);
arrow();
}
};
user.sayHi(); // 보라생성자 함수
- 함수 이름의 첫 글자는 대문자로 시작.
- 반드시 'new' 연산자를 붙여 실행.
new User(...)를 써서 함수를 실행시,
1. 빈 객체를 만들어 this에 할당
2. 함수 본문을 실행합니다. this에 새로운 프로퍼티를 추가해 this를 수정
3. this를 반환 (this가 암시적으로 반환됨)
function User(name) {
// this = {}; (빈 객체가 암시적으로 만들어짐)
// 새로운 프로퍼티를 this에 추가함
this.name = name;
this.isAdmin = false;
// return this; (this가 return)
}