.png)
화살표 함수 기본
함수 선언문 그리고 함수 표현식보다 더 간결한 문법으로 함수를 생성하는 방법이 있는데 바로 그것이 화살표 함수이다.
화살표 함수(arrow function) 이름은 문법의 생김새에서 비롯됐다.
let func = (arg1, arg2, ...argN) => expression이러한 형태로 arg1부터 argN까지의 인자를 받아 expression에 기술된 동작을 수행하여 반환하는 func이라는 함수이다.
화살표 함수는 표현식에서 더 축약된 형태인데 위 화살표 함수를 표현식으로 바꾸게 된다면
let func = function(arg1, arg2, ...argN){
return expression;
}이러하다 간단한 예로는
let double = n => n*2;
//let double = function(n) { return n*2}와 거의 동일하다.
alert(douvle(3)); //6이 출력된다.인수가 없다면 괄호를 비우면 된다.
let sayHi = () => alert('안녕하세요');
sayHi(); //'안녕하세요' 출력함수 표현식에서 썼던 것처럼 값처럼 사용할 수 있다.
let age = prompt('나이를 알려주세요',18);
let welcome = (age<18) ?
() => alert('안녕') :
() => alert('안녕하세요');처음에는 가독성이 떨어져 보일 수 있지만 익숙해지면 간결한 함수들을 표현하는 데에 있어서 용이할 것 같다.
본문이 여러 줄인 화살표 함수
이처럼 위에서 했던 화살표 함수는 =>를 기준으로 좌측에 있는 인수를 이용하여 우측에 있는 표현식을 평가하는 함수다.
하지만 평가해야 할 표현식이나 구문이 여러 개인 함수일 수도 있다. 이 경우에도 역시 화살표 함수를 사용해 함수를 만들 수 있지만 중괄호 안에 평가해야 할 코드를 작성해야 한다. 그리고 return을 이용해 명시적으로 결과 값을 반환 해주어야 한다.
let sum = (a,b)=>{
let result = a+b;
return result;
};
alert(sum(1,2)); //3현재까지 기본 문법 요약
코드 구조
여러 개의 구문은 세미콜론을 기준으로 구분할 수 있다.
alert('Hello'); alert('World');줄 바꿈도 여러 개의 구문을 구분하는 데 사용되므로 아래 코드는 정상적으로 동작한다.
alert('Hello')
alert('World')이런 동작 방식을 세미콜론 자동 삽입(automatic semicolon insertion)이라고 부른다. 그런데 세미콜론 자동 삽입이 동작하지 않을 때도 있다.
alert("이 메시지가 출력된 후에 에러가 발생합니다.")
[1, 2].forEach(alert)코딩 컨벤션과 같은 코드 스타일 지침서 대부분은 문장의 끝에 세미콜론을 붙이는 걸 권장한다.
코드 블록({...} )이나 코드 블록과 함께 구성되는 문법(예: 반복문) 끝엔 세미콜론을 붙이지 않아도 괜찮다.
function f() {
// 함수 선언문 끝엔 세미콜론이 필요 없습니다.
}
for(;;) {
// 반복문 끝엔 세미콜론이 필요 없습니다.
}세미콜론이 없어도 되는 자리에 ‘여분의’ 세미콜론을 붙이더라도 해당 세미콜론은 무시되기 때문에 에러가 발생하지 않는다.
엄격 모드
모던 자바스크립트에서 지원하는 모든 기능을 활성화하려면 스크립트 맨 위에 'use strict'를 적어줘야 한다.
'use strict';
...'use strict'는 스크립트 최상단이나 함수 본문 최상단에 있어야 한다.
'use strict'가 없어도 코드는 정상적으로 동작한다. 다만, 모던한 방식이 아닌 옛날 방식으로 동작하죠. '하위 호환성’을 지키면서 말이다. 될 수 있으면 모던한 방식을 사용하자
참고로, 추후에 배우게 될 클래스와 같은 몇몇 모던 기능은 엄격 모드를 자동으로 활성화 한다.
변수
변수는 아래와 같은 키워드를 이용해 선언할 수 있다.
let - 값을 변경할 수 있는 변수를 정의할 때 쓰인다.
const – 한 번 값을 할당하면 더는 값을 바꿀 수 없는 상수를 정의할 때 쓰인다.
var – 과거에 쓰이던 변수.
변수 이름 명명 규칙은 다음과 같다.
- 숫자와 문자를 사용하되 첫 글자는 숫자가 될 수 없습니다.
- 특수기호는
$와_만 사용할 수 있습니다. - 비 라틴계 언어의 문자나 상형문자도 사용할 수 있지만 잘 쓰이진 않습니다.
- 자바스크립트는 동적 타이핑을 허용하기 때문에, 자료형을 바꿔가며 값을 할당할 수 있습니다.
let x = 5;
x = "John";자바스크립트는 여덟 가지 기본 자료형을 지원한다.
정수와 부동 소수점을 저장하는 데 쓰이는 숫자형
아주 큰 숫자를 저장할 수 있는 BigInt형
문자열을 저장하는 데 쓰이는 문자형
논리값 true/false을 저장하는 데 쓰이는 불린형
‘비어있음’, '존재하지 않음’을 나타내는 null 값만을 위한 독립 자료형 null
값이 할당되지 않은 상태를 나타내는 undefined 값만을 위한 독립 자료형 undefined
복잡한 자료구조를 저장하는 데 쓰이는 객체형과 고유한 식별자를 만들 때 사용되는 심볼형
typeof 연산자는 값의 자료형을 반환해줍니다. 그런데 두 가지 예외 사항이 있다.
typeof null == "object" // 언어 자체의 오류
typeof function(){} == "function" // 함수는 특별하게 취급됩니다.상호작용
호스트 환경이 브라우저인 경우, 다음과 같은 UI 함수를 이용해 사용자와 상호작용할 수 있다.
prompt(question, [default]);프롬프트 창에 매개변수로 받은 question을 넣어 사용자에게 보여준다. ‘확인’ 버튼을 눌렀을 땐 사용자가 입력한 값을 반환해주고, ‘취소’ 버튼을 눌렀을 땐 null을 반환힌다.
confirm(question);컨펌 대화상자에 매개변수로 받은 question을 넣어 사용자에게 보여준다. 사용자가 ‘확인’ 버튼을 누르면 true를, 그 외의 경우는 false를 반환한다.
alert(message);message가 담긴 얼럿 창을 보여준다.
세 함수는 모두 모달 창을 띄워주는데, 모달 창이 닫히기 전까지 코드 실행이 중지된다. 사용자는 모달 창 외에 페이지에 있는 그 무엇과도 상호작용할 수 없다.
예시:
let userName = prompt("이름을 알려주세요.", "영희");
let isTeaWanted = confirm("차 한 잔 드릴까요?");
alert( "방문객: " + userName ); // 영희
alert( "차 주문 여부: " + isTeaWanted ); // true연산자
자바스크립트는 아래와 같은 다양한 연산자를 제공한다.
산술 연산자
사칙 연산에 관련된 연산자 * + - /와 나머지 연산자 %, 거듭제곱 연산자 **가 대표적인 산술 연산자에 속합니다.
이항 덧셈 연산자
+는 피연산자 중 하나가 문자열일 때 나머지 하나를 문자형으로 바꾸고 두 문자열을 연결한다.
alert( '1' + 2 ); // '12', 문자열
alert( 1 + '2' ); // '12', 문자열할당 연산자
a = b 형태의 할당 연산자와 a *= 2 형태의 복합 할당 연산자가 있다.
비트 연산자
비트 연산자는 인수를 32비트 정수로 변환하여 이진 연산을 수행한다.
조건부 연산자
조건부 연산자는 자바스크립트 연산자 중 유일하게 매개변수가 3개인 연산자입니다. cond ? resultA : resultB와 같은 형태로 사용하고, cond가 truthy면 resultA를, 아니면 resultB를 반환한다.
논리 연산자
AND 연산자 &&와 OR 연산자 ||은 단락 평가를 수행하고, 평가가 멈춘 시점의 값을 반환한다(꼭 true나 false일 필요는 없다). NOT 연산자 !는 피연산자의 자료형을 불린형으로 바꾼 후 그 역을 반환힌다.
null 병합 연산자
null 병합 연산자 ??는 피연산자 중 실제 값이 정의된 피연산자를 찾는 데 쓰인다. a가 null이나 undefined가 아니면 a ?? b의 평가 결과는 a이고, a가 null이나 undefined이면 a ?? b의 평가 결과는 b가 된다.
비교 연산자
동등 연산자 ==는 형이 다른 값끼리 비교할 때 피연산자의 자료형을 숫자형으로 바꾼 후 비교를 진행한다. null과 undefined는 자기끼리 비교할 땐 참을 반환하지만 다른 자료형과 비교할 땐 거짓을 반환한다.
alert( 0 == false ); // true
alert( 0 == '' ); // true기타 비교 연산자들 < > <= >= 역시 피연산자의 자료형을 숫자형으로 바꾼 후 비교를 진행한다.
일치 연산자
===는 피연산자의 형을 변환하지 않습니다. 형이 다르면 무조건 다르다고 평가한다.
그 외
null과 undefined는 특별한 값이다. 두 값을 == 연산자로 비교하면 true를 반환하지만, 다른 값과 비교하면 무조건 false를 반환한다.
크고 작음을 비교하는 연산자의 피연산자로 문자열이 들어오면 글자 단위로 크기 비교가 이뤄진다. 다른 타입의 값이 들어오면 숫자형으로 형 변환한 후 비교를 진행한다.
기타 연산자
쉼표 연산자 등의 기타 연산자도 있다.
반복문
while, do-while, for 문은 아래와 같이 작성할 수 있다.
// 1
while (condition) {
...
}
// 2
do {
...
} while (condition);
// 3
for(let i = 0; i < 10; i++) {
...
}for(let...) 안쪽에 선언한 변수는 오직 반복문 내에서만 사용할 수 있다. let을 생략하고 기존에 선언되어있는 변수를 사용하는 것도 가능하다.
지시자 break나 continue는 반복문 전체나 현재 실행 중인 반복을 빠져나가는 데 사용된다. 레이블은 중첩 반복문을 빠져나갈 때 사용힌다.
'switch’문
'switch’문은 if문을 사용해 재작성할 수 있다. 'switch’문은 조건을 확인할 때 내부적으로 일치 연산자 ===를 사용해 비교를 진행한다다.
예시:
let age = prompt('나이를 알려주세요.', 18);
switch (age) {
case 18:
alert("Won't work"); // prompt 함수는 항상 문자열을 반환하므로, 이 case문엔 절대 도달할 수 없습니다.
break;
case "18":
alert("낭랑 18세이시군요!");
break;
default:
alert("어떤 case문에도 해당하지 않습니다.");
}함수
세 가지 방법으로 함수를 만들 수 있다.
함수 선언문: 주요 코드 흐름을 차지하는 방식
function sum(a, b) {
let result = a + b;
return result;
}함수 표현식: 표현식 형태로 선언된 함수
let sum = function(a, b) {
let result = a + b;
return result;
};화살표 함수:
// 화살표(=>) 우측엔 표현식이 있음
let sum = (a, b) => a + b;
// 대괄호{ ... }를 사용하면 본문에 여러 줄의 코드를 작성할 수 있음. return문이 꼭 있어야 함.
let sum = (a, b) => {
// ...
return a + b;
}
// 인수가 없는 경우
let sayHi = () => alert("Hello");
// 인수가 하나인 경우
let double = n => n * 2;함수는 지역 변수를 가질 수 있다. 지역 변수는 함수의 본문에 선언된 변수로, 함수 내부에서만 접근할 수 있다.
매개변수에 기본값을 설정할 수 있다. 문법은 다음과 같다. function sum(a = 1, b = 2) {...}
함수는 항상 무언가를 반환한다. return문이 없는 경우는 undefined를 반환한다.
출처
내용 : https://ko.javascript.info/intro
썸네일 제작 : https://www.canva.com/
