crabLab

개발자는 가능한 한 간결하고 읽기 쉽게 코드를 작성해야 합니다. 복잡한 문제를 간결하고 사람이 읽기 쉬운 코드로 작성해 해결하는 것이야말로 진정한 프로그래밍 기술입니다. 좋은 코드 스타일은 이런 기술을 연마하는 데 큰 도움을 줍니다. 😠 초보 개발자들은 아래처럼 코드를 작성하곤 하는데, 중괄호가 필요하지 않기 때문에 추천하지 않습니다. if (n < 0) *{*alert(Power ${n} is not supported);*}* 😠 중괄호 없이 새로운 줄에 코드를 작성할 수도 있는데, 이렇게 하면 새로운 코드 라인을 추가할 때 에러가 발생합니다. 절대 이 방법은 쓰지 마세요. if (n < 0) alert(Power ${n} is not supported); 😏 코드가 짧다면 중괄호 없이 한 줄에 쓰는 ..

좀 더 복잡한 코드를 작성하기 전에, 디버깅이란 것에 대해 이야기해봅시다. 디버깅(debugging)은 스크립트 내 에러를 검출해 제거하는 일련의 과정을 의미합니다. 디버깅 툴을 사용하면 디버깅이 훨씬 쉬워지고, 실행 단계마다 어떤 일이 일어나는지를 코드 단위로 추적할 수 있습니다. 이 글에선 Chrome 브라우저에서 제공하는 디버깅 툴을 사용하도록 하겠습니다. 기능이 다양하고, Chrome에 익숙해지면 다른 브라우저에서 지원하는 디버깅 툴은 쉽게 익힐 수 있기 때문입니다. ‘Source’패널 F12(MacOS: Cmd+Opt+I)를 눌러 개발자 도구를 엽니다. Sources 패널을 처음 열었다면 아래와 같은 화면이 보일 겁니다. 토글 버튼 을 누르면 navigator가 열리면서 현재 사이트와 관련된 파..

코드 구조 여러 개의 구문은 세미콜론을 기준으로 구분할 수 있습니다. 코드 블록({...} )이나 코드 블록과 함께 구성되는 문법(예: 반복문) 끝엔 세미콜론을 붙이지 않아도 괜찮습니다. 엄격 모드 'use strict'는 스크립트 최상단이나 함수 본문 최상단에 있어야 합니다. 'use strict'가 없어도 코드는 정상적으로 동작합니다. 다만, 모던한 방식이 아닌 옛날 방식으로 동작하죠. '하위 호환성’을 지키면서 말이죠. 될 수 있으면 모던한 방식을 사용하는 걸 추천해 드립니다. 변수 변수는 아래와 같은 키워드를 이용해 선언할 수 있습니다. let const – 한 번 값을 할당하면 더는 값을 바꿀 수 없는 상수를 정의할 때 쓰입니다. var – 과거에 쓰이던 키워드로 자세한 내용은 추후에 다룰 예정..

함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이 있습니다. 바로 화살표 함수(arrow function)를 사용하는 것입니다. let func = (arg1, arg2, ...argN) => expression let func = function(arg1, arg2, ...argN) { return expression; }; let sum = (a, b) => a + b; /* 위 화살표 함수는 아래 함수의 축약 버전입니다. let sum = function(a, b) { return a + b; }; */ alert( sum(1, 2) ); // 3 화살표 함수는 함수 표현식과 같은 방법으로 사용할 수 있습니다. 아래 예시와 같이 함수를 동적으로 만들 수 있습니다. let age ..

자바스크립트는 함수를 특별한 종류의 값으로 취급합니다. 다른 언어에서처럼 "특별한 동작을 하는 구조"로 취급되지 않습니다. let sayHi = function() { alert( "Hello" ); }; 함수를 생성하고 변수에 값을 할당하는 것처럼 함수가 변수에 할당되었습니다. 함수가 어떤 방식으로 만들어졌는지에 관계없이 함수는 값이고, 따라서 변수에 할당할 수 있습니다. 위 예시에선 함수가 변수 sayHi에 저장된 값이 되었습니다. 위 예시를 간단한 말로 풀면 다음과 같습니다: “함수를 만들고 그 함수를 변수 sayHi에 할당하기” 함수는 값이기 때문에 alert를 이용하여 함수 코드를 출력할 수도 있습니다. function sayHi() { alert( "Hello" ); } *alert( sayH..

스크립트를 작성하다 보면 유사한 동작을 하는 코드가 여러 곳에서 필요할 때가 많습니다. 함수는 프로그램을 구성하는 주요 '구성 요소(building block)'입니다. 함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러 번 호출할 수 있습니다. 함수 선언 함수 선언 방식은 함수 선언문이라고 부르기도 합니다 function showMessage() { alert( '안녕하세요!' ); } showMessage(); showMessage(); function키워드, 함수 이름, 괄호로 둘러싼 매개변수를 차례로 써주면 함수를 선언할 수 있습니다. 새롭게 정의한 함수는 함수 이름 옆에 괄호를 붙여 호출할 수 있습니다. showMessage()같이 말이죠. 지역 변수 함수 내에서 선언한 변수인 지역 변수..

복수의 if 조건문은 switch문으로 바꿀 수 있습니다. switch문을 사용한 비교법은 특정 변수를 다양한 상황에서 비교할 수 있게 해줍니다. 코드 자체가 비교 상황을 잘 설명한다는 장점도 있습니다. let a = 2 + 2; switch (a) { case 3: alert( '비교하려는 값보다 작습니다.' ); break; case 4: alert( '비교하려는 값과 일치합니다.' ); break; case 5: alert( '비교하려는 값보다 큽니다.' ); break; default: alert( "어떤 값인지 파악이 되지 않습니다." ); } case문 안에 break문이 없으면 조건에 부합하는지 여부를 따지지 않고 이어지는 case문을 실행합니다. 여러 개의 “case”문 묶기 let a =..

while 반복문 condition(조건)이 truthy 이면 반복문 본문의 코드가 실행됩니다. 아래 반복문은 조건 i < 3을 만족할 동안 i를 출력해줍니다. let i = 0; while (i < 3) { // 0, 1, 2가 출력됩니다. alert( i ); i++; } do…while 반복문 do..while 문법을 사용하면 condition을 반복문 본문 아래로 옮길 수 있습니다. let i = 0; do { alert( i ); i++; } while (i < 3); 본문을 최소한 한번이라도 실행하고 싶을 때만 사용 for 반복문 for (begin; condition; step) { // ... 반복문 본문 ... } 구성 요소 생략하기 let i = 0; // i를 선언하고 값도 할당하였습..

nullish 병합 연산자(nullish coalescing operator) ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 ‘확정되어있는’ 변수를 찾을 수 있습니다. a ?? b의 평가 결과는 다음과 같습니다. a가 null도 아니고 undefined도 아니면 a 그 외의 경우는 b nullish 병합 연산자 ??없이 x = a ?? b와 동일한 동작을 하는 코드를 작성하면 다음과 같습니다. x = (a !== null && a !== undefined) ? a : b; let firstName = null; let lastName = null; let nickName = "바이올렛"; // null이나 undefined가 아닌 첫 번째 피연산자 alert(firstName ?? lastNa..

||(OR) alert( true || true ); // true alert( false || true ); // true alert( true || false ); // true alert( false || false ); // false 연산 과정에서 숫자 1은 true로, 숫자 0은 false로 바뀌죠. alert( 1 || 0 ); // 1 (1은 truthy임) alert( null || 1 ); // 1 (1은 truthy임) alert( null || 0 || 1 ); // 1 (1은 truthy임) alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을 반환함) 단락평가 OR||은 왼쪽부터 시작해서 오른쪽으로 평가를 진행하는데, truth..