스니펫 및 제어 구조. 10개의 블로그 게시물에서 초급에서 고급까지의 파트 4 JavaScript 과정
게시 됨: 2021-10-28이것은 초급에서 고급으로 안내하는 JavaScript 블로그 게시물 시리즈의 4부입니다. 이 시리즈가 끝나면 JavaScript로 코딩을 시작하기 위해 알아야 할 모든 기본 사항을 알게 될 것입니다. 더 이상 고민하지 않고 네 번째 자습서를 시작하겠습니다.
스니펫 및 제어 구조 – 목차:
- 코드 설정을 스니펫으로 업그레이드
- 제어 구조
이 블로그 게시물에서 우리는 세 번째 블로그 게시물에서 떠난 곳에서 계속할 것입니다. 이 단계에서 Google Chrome 브라우저가 열려 있어야 하며 더 구체적으로는 JavaScript 콘솔이 열려 있어야 합니다. 어떤 이유로 닫았다면 다시 여는 것이 좋습니다.
Mac을 사용하는 경우 콘솔을 여는 키보드 단축키는 Chrome을 연 후 "Option + Command + J"를 누르는 것입니다. Windows 장치를 사용하는 경우 "Control + Shift + J"의 키보드 단축키를 사용하여 Chrome을 연 후 JavaScript 콘솔을 열 수 있습니다. 또는 상단 메뉴로 이동하여 보기 -> 개발자 -> JavaScript 콘솔로 이동할 수도 있습니다.
코드 설정을 스니펫으로 업그레이드
이 시점까지는 모든 것을 한 줄씩 작성하고 한 줄씩 실행할 수 있었습니다. 그것은 일을 실행하는 가장 편리한 방법은 아니지만 그럼에도 불구하고 작동합니다. 이 튜토리얼을 시작으로 완전한 명령어 세트를 생성하기 위해 여러 줄의 코드를 사용하는 코드를 작성할 것입니다. 이를 달성하기 위해 Google 크롬에서 "스니펫"이라는 것을 사용할 것입니다. 더 이상 고민하지 않고 설정을 JavaScript 콘솔에서 Chrome 스니펫으로 업그레이드해 보겠습니다.
현재 콘솔이 열려 있어야 하며 이전 자습서를 따랐다면 다음과 같은 화면이 표시되어야 합니다.
이 화면이나 해당 문제에 대한 화면을 볼 때 어두운 영역의 상단 표시줄에 요소, 콘솔, 소스, 네트워크, 성능, 메모리, 응용 프로그램 등이 나란히 표시되어야 합니다. 더 밝은 색상으로 보면 완전히 괜찮습니다. 이는 낮 시간의 기본 모드가 될 수 있는 조명 모드를 사용하고 있음을 의미합니다. 내가 보여주는 화면은 현재 Chrome 콘솔 설정의 다크 모드에 대한 색 구성표를 사용합니다. 요소, 콘솔, 소스, 네트워크 등이 어느 색 구성표에서든 표시되는 것을 본다면 잘 진행한 것입니다.
콘솔의 상단 바를 자세히 보면 "Console"이라고 쓰여진 글자가 약간 다른 색으로 보이는 것을 알 수 있습니다. 바로 옆에 있는 "소스"를 클릭하세요.
소스를 클릭하면 다음과 같은 화면이 표시되어야 합니다.
내가 이전에 만든 것처럼 "notes.js" 파일이 표시되지 않을 경우 예상할 수 있는 한 가지 차이점이 있습니다. 그 외에는 이것과 꽤 비슷하게 보일 것입니다. 새 파일을 만들려면 "+ 새 조각"을 클릭하십시오. 클릭하면 새 JavaScript 파일이 생성되며 원하는 대로 이름을 지정할 수 있습니다. 이 튜토리얼에서는 첫 번째 또는 기본 파일의 이름을 "index.js"로 지정하는 것이 일반적이므로 "index.js"로 이름을 지정합니다.
이 튜토리얼을 따라하고 싶다면 "+ New Snippet"을 클릭한 후 "index.js"라는 이름을 입력하고 키보드의 Enter 키를 누르십시오. 이제 열린 주요 영역에서 열린 파일 내부를 클릭하여 JavaScript 코딩을 시작할 수 있습니다.
이미 효과가 있는 것으로 알고 있는 것부터 시작하겠습니다. 그리고 그것은:
alert("Hello, World!");
추가 연습을 위해 직접 작성하거나 코드 부분을 복사하여 생성한 파일에 붙여넣을 수 있습니다. 많은 경우에 배우는 방법이므로 직접 입력하는 것이 좋습니다. 입력 후 엔터 키를 치면 코드가 실행되지 않는 것을 볼 수 있습니다. 대신 커서는 다른 텍스트 편집 영역과 마찬가지로 다음 줄로 이동합니다. 코드를 실행할 수 있는 두 가지 주요 방법이 있습니다. 첫 번째는 오른쪽 하단에 있는 재생 버튼을 클릭하는 것입니다.
재생 버튼을 클릭하면 코드가 실행되고 결과가 표시됩니다.
"확인"을 클릭하면 다른 주요 방법을 사용하여 코드를 실행해 보겠습니다. 코드를 실행하거나 스니펫을 실행하는 두 번째 주요 방법은 바로 가기 키를 사용하는 것입니다. 보시다시피 실행 버튼을 클릭하면 이미 바로 가기가 표시됩니다. 바로 가기 키가 "Command + Enter"입니다. 그렇게 하려면 Command 키를 누른 다음 Enter 키를 누르면 됩니다. 그렇게 하면 코드도 실행되고 재생 버튼을 클릭하는 것과 같은 결과를 얻을 수 있습니다.
이제 Chrome 스니펫에서 JavaScript 코드를 실행하는 두 가지 방법을 알게 되었습니다.
JavaScript에 대한 메모를 작성하거나 JavaScript 코드를 연습하기 위해 새 파일을 만들려면 "+ 새 조각"을 클릭하여 언제든지 새 파일을 만들고 원하는 대로 파일 이름을 지정할 수 있습니다. 이제 새 코딩 설정이 준비되었으므로 JavaScript를 더 살펴보겠습니다.
제어 구조
코드를 작성할 때 사용자가 취할 수 있는 많은 시나리오와 작업을 고려해야 합니다. 다양한 시나리오에 대한 이러한 준비는 코드가 실행되는 장치, 표시할 화면 크기, 사용자가 가질 수 있는 다양한 유형의 브라우저 등과 같은 다양한 소스에서 올 수 있습니다. 하지만 다양한 시나리오에 대비할 수 있는 방법은 무엇입니까? 다른 코드를 차례로 작성한다면 모두 실행하는 것이 사용자에게 의미가 있을까요? 이 모든 것에 답하기 위해 우리는 제어 구조를 사용할 것입니다.
제어 구조를 통해 코드 실행을 안내할 수 있으므로 코드가 다양한 조건에 적응할 수 있습니다. 제어 구조에 사용되는 여러 공통 요소가 있습니다. 이 자습서에서는 가장 간단한 것부터 시작하여 이동합니다. 우리가 보게 될 첫 번째 것은 If, else, else if 문을 사용하여 코드 실행을 제어합니다.
만약, else 그리고 else if
이것은 시작하기에 가장 간단한 제어 구조입니다. 이를 통해 우리가 할 수 있는 것은 특정 조건이 참이면 일부 코드를 실행하고 다른 조건이 참이면 다른 코드를 실행하는 것입니다. 예를 들어 살펴보겠습니다. 밖에 비가 오면 우산을 가지고 간다고 가정해 봅시다. 그렇지 않으면 우산을 가져 가지 않을 것입니다. 정확한 논리와 추론을 다음과 같이 코드로 변환할 수 있습니다.
(이 코드를 작성하기 전에 파일 앞에 두 개의 슬래시를 배치하여 파일에 있는 이전 코드의 코드를 주석 처리하므로 실행되지 않지만 여전히 복사본이 있습니다. 슬래시를 추가한 후 다음과 같아야 합니다. :)
// alert("Hello, World!");
let rainy = true;
if (rainy){
alert("Take an umbrella");
} else {
alert("No need for an umbrella");
}
이 코드를 실행하면 다음과 같은 결과를 얻을 수 있습니다.
// alert("Hello, World!");
let rainy = false;
if (rainy){
alert("Take an umbrella");
} else {
alert("No need for an umbrella");
}
비가 오지 않는다고 말하는 이 버전의 코드를 실행하면 다음과 같은 결과를 얻을 수 있습니다.
코드 파일을 변경하기 위해 코드를 입력할 때 파일 이름을 자세히 살펴보면 파일 이름 앞에 별표가 있는 것을 볼 수 있습니다. 이것은 우리가 작성한 코드 파일이 완전히 저장되지 않았음을 의미합니다. 항상 작성할 수 있는 몇 줄의 코드만 작성하는 경우에는 큰 차이가 없을 수 있지만 나중에 재사용하거나 검토할 수 있도록 코드를 저장하려는 경우가 더 많습니다. 다른 파일을 저장하는 것과 같은 방식으로 이 코드 파일을 저장할 수 있습니다. 따라서 Mac에서는 "Command + S", Windows에서는 "Control + S"가 됩니다.
우리의 경우 코드를 작성한 직후 실행하기 때문에 코드를 실행할 때 자동으로 파일을 저장합니다. 따라서 일부 코드를 작성하고 몇 시간 동안 그대로 두면 중요한 진행 상황을 잃지 않도록 때때로 코드를 저장하는 것이 좋습니다.
If 및 else 문을 사용하여 이진 조건에 코드를 적용할 수 있다는 것은 좋은 일이지만 고려해야 할 사항이 여러 가지 있는데, 이는 실제 상황일 가능성이 가장 큽니다. 예를 들어, 날씨가 추워서 추울 때 후드티를 입어야 한다면 어떨까요? 우리가 할 수 있는 한 가지 방법은 "else if" 문이고 다음과 같이 할 수 있습니다.
// alert("Hello, World!");
let rainy = false;
let cold = true;
if (rainy){
alert("Take an umbrella");
} else if (cold) {
alert("Get a hoodie with you, not an umbrella");
} else {
alert("No need for an umbrella");
}
이 코드의 출력은 다음과 같습니다.
따라서 특정 조건이 true이면 괄호 사이에 있는 첫 번째 코드가 실행됩니다. 우리의 경우 첫 번째 조건이 비를 확인하므로 사용자에게 우산을 가져와야 한다고 경고합니다. 그 조건이 거짓이면, 즉 비가 오지 않는다는 것을 의미하며 "else if" 문을 사용하여 다른 조건을 계속 확인합니다. "else if" 문과 크게 다른 한 가지는 else if 문으로 원하는 만큼 많은 조건을 확인할 수 있다는 것입니다.
여기서 기억해야 할 중요한 점은 코드의 정확성 또는 진실성을 위에서 아래로 검사한다는 것입니다. 즉, 현재 코드로 날씨가 비가 오거나 추운 경우 첫 번째 설명이 정확하기 때문에 추운 날씨를 인식하지 못합니다. 우리는 또한 우천과 추운 조건을 모두 갖도록 코드를 변경하여 이를 확인할 수 있습니다.
// alert("Hello, World!");
let rainy = true;
let cold = true;
if (rainy){
alert("Take an umbrella");
} else if (cold) {
alert("Get a hoodie with you, not an umbrella");
} else {
alert("No need for an umbrella");
}
이제 이 문제를 어떻게 해결할 수 있는지 궁금할 수 있습니다. 날씨가 춥거나 비가 오는 중 어느 것이 더 중요합니까? 하나의 조건을 선택하고 다른 조건을 희생해야 합니까? 그런 선택을 해야 합니까? 글쎄,별로. 이것은 매우 일반적인 문제이며 매우 일반적이고 비교적 간단한 해결책을 가지고 있습니다. "and" 표현식을 사용하여 여러 시나리오를 다룰 수 있습니다. JavaScript에 "and"를 사용하여 프로그래밍 논리를 연결하고 싶다고 알리기 위해 "&" 기호 중 두 개를 사용합니다. 그리고 우리 코드는 위에서 아래로 검사되기 때문에 첫 번째 if 문에 가장 포괄적인 옵션을 사용합니다. 업데이트된 코드는 다음과 같습니다.
// alert("Hello, World!");
let rainy = true;
let cold = true;
if (rainy && cold) {
alert("Wear a hoodie and take an umbrella with you.")
} else if (rainy){
alert("Take an umbrella");
} else if (cold) {
alert("Get a hoodie with you, not an umbrella");
} else {
alert("No need for an umbrella");
}
이 코드를 실행하면 다음과 같은 경고가 표시됩니다.
훨씬 낫다. 이제 이러한 시나리오의 다양한 조합을 포함하여 다양한 시나리오를 결합할 수 있습니다. 그러나 춥지 않고 비가 오는 시나리오를 고려하고 싶다면 어떨까요? 그리고 사용자에게 특별히 후드티를 사지 말고 우산만 가져오라고 말하고 싶다고 가정합니다. 그렇게 하기 위해 논리적 "not"을 사용할 수 있습니다. 코드에서 지정하려는 조건 앞에 느낌표와 함께 사용할 수 있습니다. 이 조건을 코드에 추가하여 더 완벽하게 만들어 보겠습니다.
// alert("Hello, World!");
let rainy = true;
let cold = true;
if (rainy && cold) {
alert("Wear a hoodie and take an umbrella with you.")
} else if (rainy && !cold){
alert("Take an umbrella, but not a hoodie.");
} else if (rainy){
alert("Take an umbrella");
} else if (cold) {
alert("Get a hoodie with you, not an umbrella");
} else {
alert("No need for an umbrella");
}
if else 트리에 새로운 조건을 추가할 때, 그것이 더 포괄적인 조건이라면 우리는 그것을 최상단 어딘가에 배치할 수 있습니다. 이렇게 하면 반대 접근 방식에 비해 오류 가능성이 훨씬 적습니다. 기존 코드에 새 코드를 삽입하는 한 가지 부작용은 일부 코드가 중복되거나 가장 효율적인 방식으로 작동하지 않을 수 있다는 것입니다. 우리는 효율성 부분에 크게 초점을 맞추지 않을 것이지만, 지금은 비가 오는 날씨에 대해 추운 조건과 춥지 않은 조건을 모두 포함하는 것을 볼 수 있으므로 "비" 조건만 확인하는 조건을 선택적으로 제거할 수 있습니다. 이 코드 조정을 수행하는 것을 "코드 리팩토링"이라고도 합니다. 리팩토링 프로세스에서 요점은 코드를 점진적으로 더 깨끗하고 효율적으로 만드는 것입니다.
// alert("Hello, World!");
let rainy = true;
let cold = true;
if (rainy && cold) {
alert("Wear a hoodie and take an umbrella with you.")
} else if (rainy && !cold){
alert("Take an umbrella, but not a hoodie.");
} else if (cold) {
alert("Get a hoodie with you, not an umbrella");
} else {
alert("No need for an umbrella");
}
두 조건 중 하나가 참인지 확인하려면 키보드에서 두 번 사용되는 파이프 기호인 "||"처럼 보이는 "또는" 연산자를 사용할 수 있습니다.
다른 예와 함께 이에 대한 예를 살펴보겠습니다. 새 명령을 방해하지 않고 동일한 파일에 더 많은 예제를 추가하려면 이전 코드를 이전에 본 기호 안에 래핑하여 사용했던 이전 코드를 주석 처리할 수 있습니다.
/* */
주석 처리된 부분을 닫는 것과 반대 순서로 슬래시와 같은 기호가 있는 별표입니다. 새로운 코드를 방해하지 않도록 이러한 기호 안에 현재 코드를 래핑합시다. 이제 코드 파일은 다음과 같아야 합니다.
// alert("Hello, World!");
/*
let rainy = true;
let cold = true;
if (rainy && cold) {
alert("Wear a hoodie and take an umbrella with you.")
} else if (rainy && !cold){
alert("Take an umbrella, but not a hoodie.");
} else if (cold) {
alert("Get a hoodie with you, not an umbrella");
} else {
alert("No need for an umbrella");
}
*/
이제부터 파일에 추가하는 새 부분에 집중하여 한 번에 하나씩 학습하는 데 집중할 것입니다. 선택적으로 이전 코드를 주석 처리 모드로 유지하고 참조를 위해 새 파일로 이동할 수 있습니다. 더 이상 보고 싶지 않다면 더 깨끗한 파일을 위해 삭제할 수 있습니다.
계속해서 "또는" 사례를 예로 들어 보겠습니다. 배고프거나 갈증을 느낄 때마다 음식과 음료를 위해 냉장고를 방문하는 시나리오를 생각해 보십시오. 코드는 어떻게 작동할까요?
let hungry = true;
let thirsty = false;
if (hungry || thirsty) {
alert("Go to the fridge and check what you have in there.");
}
아마 짐작하셨겠지만 이 코드를 실행하면 다음과 같은 결과를 얻을 수 있습니다.
지금까지 우리가 사용한 예제는 실제 시나리오에 가깝지만 코드에서 숫자를 다루는 경우가 많습니다. 이전에 이 시리즈에서 숫자를 보았지만 우리는 비교 또는 우리가 할 수 있는 작업에 대해 너무 많이 이야기하지 않았습니다. if else 문에 대해 배웠으니 이제 숫자에 대해 좀 더 살펴보겠습니다.
if 및 else if 문을 다룰 때 우리는 그 문이 참인지 확인합니다. 그러나 우리가 가진 것이 숫자뿐이라면 의미 있는 if 문도 만들 수 있습니까? 예를 들어, 비가 올 확률이 50% 이상인 경우 우산을 얻고 싶다면 코드로 이를 달성할 수 있습니까? 예, 우리는 할 수 있으며 다음은 진행 방법입니다.
let chanceOfRain = 70;
if (chanceOfRain >= 50) {
alert("Get an umbrella.");
}
숫자를 다룰 때 if 문이 작동하려면 숫자를 일종의 참 또는 거짓으로 변환하는 방법이 필요합니다. 사용 사례에 따라 이를 달성할 수 있는 여러 가지 방법이 있습니다.
예를 들어 다음과 같이 세 개의 등호를 사용하여 두 숫자가 정확히 같은지 확인할 수 있습니다.
let a = 10;
let b = 10;
if (a === b) {
alert("They are the same.");
}
이렇게 하면 "그들은 동일합니다."라는 경고가 표시됩니다.
다음 코드로 같지 않은지 확인할 수도 있습니다.
let a = 10;
let b = 5;
if (a !== b) {
alert("They are not the same thing!");
}
위의 코드를 실행하면 "그들은 동일하지 않습니다!"라는 경고가 표시됩니다.
우리는 또한 더 크거나 크거나 같다, 더 작거나 같다는 것을 구체적으로 확인할 수 있습니다. 귀하의 편의를 위해 표지판의 요약을 찾을 수 있습니다.
// === checks for equality // !== checks for not equality // > greater than // >= greater than or equal to // < smaller than // <= smaller than or equal to
추가 연습과 코드 노출을 위해 몇 가지 더 살펴보겠습니다. 다음은 if 문 내부에 있는 경고를 모두 표시하는 몇 가지 예제 코드입니다.
보다 큰:
let a = 10;
let b = 5;
if (a > b) {
alert("a is greater than b");
}
크거나 같음:
가 = 10; b = 5라고 하자. if (a >= b) { alert("a는 b보다 크거나 같습니다"); } [/코드]크거나 같음에 대한 또 다른 예:
let a = 10;
let b = 10;
if (a >= b) {
alert("a is greater than or equal to b");
}
보다 작은:
let a = 5;
let b = 10;
if (a < b) {
alert("a is smaller than b");
}
작거나 같음:
let a = 5;
let b = 10;
if (a <= b) {
alert("a is smaller than or equal to b");
}
이하의 또 다른 예:
let a = 10;
let b = 10;
if (a <= b) {
alert("a is smaller than or equal to b");
}
이러한 비교 또는 등호의 조합을 사용하여 다양한 조건에 적응할 수 있는 복잡한 코드를 생성할 수 있습니다.
산술 연산
우리가 숫자를 다룰 때 수행하고자 하는 또 다른 일은 산술 연산입니다. 대부분의 산술 연산은 매우 친숙해야 하지만 덜 친숙할 수 있는 프로그래밍 특정 산술 연산자도 있습니다.
다음은 편의를 위해 의미와 함께 JavaScript에서 사용하는 산술 연산을 요약한 것입니다.
// * multiplication // / division // + addition // - subtraction // % modulo operation, gives us the remainder after division // ** exponentiation
처음 4개는 예상대로 작동합니다.
let a = 12; let b = 5; let c = a * b; // c will be 60 c = a / b; // c will now be 2.4 c = a + b; // c will now be 17 c = a - b; // c will now be 7
모듈로 연산은 첫 번째 숫자를 두 번째 숫자로 나눈 후 나머지를 제공합니다. 이전, b 및 c 코드를 계속 진행하면:
c = a % b; // c will now be 2 c = 18 % 5; // c will now have the value of 3 // because 18 divided by 5 will give us the remainder of 3
지수 연산자는 JavaScript에서 지수를 수행합니다. 두 개의 별표 기호로 표시되며 첫 번째 요소를 두 번째 요소의 거듭제곱으로 가져옵니다.
c = 2 ** 3; // c will now have the value of 8 // because 2 * 2 * 2 equals 8
이것은 비교적 긴 튜토리얼이었고, 당신은 그것을 만들었습니다! 우리는 코딩 설정을 업그레이드했고 이 튜토리얼에서 많은 것을 배웠습니다. 다음 튜토리얼에서는 코드의 흐름을 제어하는 더 많은 방법을 계속 다룰 것입니다!
저자: 로버트 휘트니
IT 부서를 지도하는 JavaScript 전문가이자 강사입니다. 그의 주요 목표는 코딩하는 동안 다른 사람들에게 효과적으로 협력하는 방법을 가르쳐 팀 생산성을 높이는 것입니다.
10개의 블로그 게시물에서 초급에서 고급까지 JavaScript 과정:
- JavaScript에서 코딩을 시작하는 방법은 무엇입니까?
- 자바스크립트 기본
- JavaScript의 변수 및 다양한 데이터 유형
- 스니펫 및 제어 구조
- while 루프와 for 루프
- 자바 배열
- 자바스크립트 함수
- 자바스크립트 객체
- JavaScript 메서드 등
- 자바스크립트 코스 요약