kiki-dev

자바스크립트 화살표 함수

화살표 함수(arrow function) 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있다. 화살표 함수라는 이름은 문법의 생김새를 차용해 지어졌다. let func = (arg1, arg2, ...argN) => expression 인자 arg1..argN를 받는 함수 func가 만들어진다. 함수 func는 화살표 (=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환한다. let func = function(arg1, arg2, ...argN) { return expression; }; 위 함수의 축약 버전이라고 할 수 있다. let sum = (a, b) => a + b; /* 위 화살표 함수는 아래 함수의 축약 버전입니다. let sum = function(a, b..

자바스크립트 함수 표현식

함수 표현식 자바스크립트에서 함수는 값이다. 따라서 함수도 값처럼 할당, 복사, 선언할 수 있다. function sayHi() { alert( "Hello" ); } alert( sayHi ); // 함수 코드가 보임 sayHi옆에 괄호가 없기 때문에 함수는 실행되지 않는다. 함수 소스 코드가 문자형으로 바뀌어 출력된다. function sayHi() { // (1) 함수 생성 alert( "Hello" ); } let func = sayHi; // (2) 함수 복사 func(); // Hello // (3) 복사한 함수를 실행(정상적으로 실행됩니다)! sayHi(); // Hello // 본래 함수도 정상적으로 실행됩니다. 일반적인 값과는 조금 다르지만 그 본질은 값이기 때문에 값에 할 수 있는 일을..

자바스크립트 함수

함수 함수는 프로그램을 구성하는 주요 구성요소이다. 함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러번 호출 할 수 있다. 함수 선언 함수 선언 방식은 함수 선언부라고 부르기도한다. function 함수이름(복수의, 매개변수는, 콤마로, 구분합니다) { /* 함수 본문 */ } function showMessage() { alert( '안녕하세요!' ); } function 키워드, 함수이름, 괄호로 둘러싼 매개변수를 차례로 써주면 함수를 선언할 수 있다. 이어서 함수를 구성하는 코드의 모임인 '함수 본문(body)'를 중괄호로 감싸 붙여준다. function name(parameters) { ...함수 본문... } 매개변수가 여러개 있다면 각 매개변수를 콤바로 구분해 준다. 새롭게 정의한 함..

자바스크립트 switch문

switch문 switch문은 하나 이상의 case문으로 구성된다. 대개 default문도 있지만, 필수는 아니다. switch문은 같다 라는 조건만 설정할 수있다. switch(x) { case 'value1': // if (x === 'value1') ... [break] case 'value2': // if (x === 'value2') ... [break] default: ... [break] } 변수 x의 값을 첫 번째 case문의 값과 일치한 지 비교한 뒤, 두 번째 case문 값과 비교한다. 이러한 과정이 계속 이어진다. case문에서 변수x의 값과 일치하는 값을 찾으면 해당 case문의 아래 코드가 실행되고, break문을 만나거나 swich문이 끝나면 코드의 실행은 멈춘다. 값과 일치하는..

자바스크립트 반복문

while 반복문 while (condition) { // 코드 // '반복문 본문(body)'이라 불림 } condition(조건)이 true이면 반복문의 본문의 코드가 실행된다. let i = 0; while (i < 3) { // 0, 1, 2가 출력됩니다. alert( i ); i++; } i < 3을 만족할 동안 i를 출력해준다. 반복문의 본문이 한 번 실행되는 것을 반복(iteration, 이터레이션)이라고 부른다. 반복문의 조건엔 비교뿐만 아니라 모든 종류의 표현식, 변수가 올 수 있다. let i = 3; while (i) { // i가 0이 되면 조건이 falsy가 되므로 반복문이 멈춥니다. alert( i ); i--; } 본문이 한줄이면 대괄호를 생략할 수 있다. let i = 3; ..

자바스크립트 병합연산자

nullish 병합 연산자 '??' 병합 연산자 ?? 를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어있는' 변수를 찾을 수 있다. 최근에 추가된 지 얼마 안 된 문법이라 구식 브라우저는 폴리필이 필요하다. a ?? b a가 null도 아니고 undefined도 아니면 a 그 외의 경우는 b 병합 연산자 없이 동일한 동작을 하는 코드를 작성한다면 x = a ?? b x = (a !== null && a !== undefined) ? a : b 위 두 코드는 동일한 동작을하는 코드 값이 정해진 변수를 간편하게 찾기 let firstName = null; let lastName = null; let nickName = "바이올렛"; // null이나 undefined가 아닌 첫 번째 피연산자 ..

자바스크립트 논리 연산자

논리 연산자 자바스크립트에는 세 종류의 논리 연산자 || (OR), && (AND), !(NOT)이 있다. || (OR) 인수 중 하나라도 true 이면 true를 반환하고 아니면 false를 반환한다. if문에서 주어진 조건 중 하나라도 참 인지를 테스트하는 용도로 자주 사용된다. let hour = 9; if (hour 18) { alert( '영업시간이 아닙니다.' ); } 첫 번째 truthy를 찾는 OR 연산자 ‘||’ OR "||" 연산자를 여러 개 체이닝 하면 왼쪽에서부터 시작해서 피연산자의 불린 변환 값이 true인 첫번째 피연산자를 반환한다. 피연산자에 true가 하나도 없다면 마지막 피연산자를 반환한다. OR 연산자와 피연산자가 여러 개인 경우 아래와 같은 알..

자바스크립트 조건문

if문 if(...) 조건식의 결과가 true이면 코드블록실행 let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', ''); if (year == 2015) alert( '정답입니다!' ); 조건식이 true일 때 복수의 문을 실행한다면 중괄호로 코드 블록을 감싸야한다. if (year == 2015) { alert( "정답입니다!" ); alert( "아주 똑똑하시네요!" ); } 구문이 한 줄이더라도 가독성을 위해 코드 블록으로 감싸는것을 권장 불린형으로 변환 if (...) 문은 괄호 안의 표현식을 평가하고 그 결과를 불린값으로 변환한다. 숫자 0, 빈문자열"", null, undefined, NaN은 불린형으로 변환 시 모두 false 'else'절 ..

자바스크립트 비교연산자

비교연산자 a > b 보다 큼, 작음 a >= b, a 1 ); // true alert( 2 == 1 ); // false alert( 2 != 1 ); // true 반횐된 불린값은 다른 값처럼 변수에 할당 할 수 있다. let result = 5 > 4; // 비교 결과를 변수에 할당 alert( result ); // true 문자열비교 자바스크립트는 유니코드순으로 문자열을 비교한다. 문자열을 구성하는 문자 하나하나를 비교해가며 문자열을 비교한다. alert( 'Z' > 'A' ); // true alert( 'Glow' > 'Glee' ); // true alert( 'Bee' > 'Be' ); // true 두 문자의 첫글자를 비교해 첫 글자가 다른 문자열의 첫 글자보다 크거나작으면 결론을 내..

자바스크립트 기본연산자

피연산자 연산자가 연산을 수행하는 대상이다. 5 * 2 에는 왼쪽 피연산자가 5와 오른쪽 피연산자가 2, 총 두개의 피연산자가있다. 피연산자는 인수라는 용어로 불리기도한다. 단항연산자 피연산자를 하나만 받는 연산자 let x = 1; x = -x; alert( x ); // -1, 단항 마이너스 연산자는 부호를 뒤집습니다. 이항연산자 두 개의 피연산자를 받는 연산자 let x = 1, y = 3; alert( y - x ); // 2, 이항 마이너스 연산자는 뺄셈을 해줍니다. 위와 같이 부호를 반전해주는 단항 마이너스 연산자와 뺄셈에 쓰이는 이항 마이너스 연산자는 기호는 같지만 수행하는 연산이 다르다. 두 연산을 구분하는 기준은 피연산자의 개수이다. 자바스크립트에서 지원하는 수학 연산자 덧셈연산자 + 뺄..

자바스크립트 형 변환

형 변환 적절한 자료형으로 자동 변환되는 과정을 형 변환이라고한다. 전달받은 값을 의도를 갖고 원하는 타입으로 변환(명시적 변환)해 주는 경우도 형 변환이다. 문자형 변환 String(value)함수를 사용하면 명시적으로 변환가능 let value = true; alert(typeof value); // boolean value = String(value); // 변수 value엔 문자열 "true"가 저장됩니다. alert(typeof value); // string false는 문자열 "false"로, null은 문자열 "null"로 변환 숫자형 변환 수학과 관련된 함수와 표현식에서 자동으로 일어난다. Number(value) 함수를 사용하면 주어진 값(value)을 숫자형으로 명시해서 변환할 수 있..

자바스크립트 기본모달창

모달창(modal window) 메세지가 있는 작은 창을 모달창이라고 부른다. 모달 창이 떠 있는 동안은 스크립트의 실행이 일시 중단되고 사용자가 창을 닫기 전까지 나머지 페이지와 상호 작용이 불가능하다. alert 사용자가 확인 버튼을 누를 때 까지 메세지를 보여주는 창이 떠있는다. alert("Hello"); prompt 사용자에게 텍스트를 입력하라는 메세지와 동시에, 입력 필드를 제공하고 확인을 누르면 사용자가 입력한 문자열을 반환, 취소하면 null 반환 let age = prompt('나이를 입력해주세요.', 100); alert(`당신의 나이는 ${age}살 입니다.`); // 당신의 나이는 100살입니다. result = prompt(title, [default]); title - 사용자에게..