JavaScript에서 함수를 정의합니다. 생성자와 새로운
함수는 작업을 수행하거나 값을 반환하는 코드 블록입니다. 함수는 재사용할 수 있는 사용자 정의 코드입니다. 따라서 기능 덕분에 프로그램은 모듈화되고 생산성이 향상됩니다.
이 튜토리얼에서는 JavaScript에서 함수를 정의 및 호출하고 함수 매개변수를 사용하는 여러 가지 방법을 제공합니다.
기능 정의
함수는 function 키워드를 사용하여 정의하거나 선언합니다. JavaScript의 함수 구문은 다음과 같습니다.
함수 이름OfFunction()(
//실행할 코드
}
함수 선언은 function 키워드로 시작하고 그 뒤에 함수 이름이 옵니다. 함수 이름은 변수 이름과 동일한 규칙을 따릅니다. 즉, 문자, 숫자, 밑줄 및 달러 기호를 포함할 수 있으며 낙타 표기법으로 작성되는 경우가 많습니다. 이름 뒤에는 선택적 매개변수에 사용할 수 있는 괄호 세트가 옵니다. 함수 코드는 for 또는 if 문과 같이 중괄호 안에 포함됩니다.
눈치채셨겠지만, name 매개변수의 값은 코드에 할당되지 않습니다. 이는 함수가 호출될 때 수행됩니다. 함수를 호출하면 사용자 이름이 인수로 전달됩니다. 인수는 함수에 전달되는 실제 값입니다(이 경우 사용자 이름, 예: 8host).
// "8host"를 인수로 사용하여 Greeting 함수를 호출합니다.
Greeting("8호스트");
8host 값은 name 매개변수를 통해 함수에 전달됩니다. 이제 name 매개변수는 이 함수에서 이 값을 나타냅니다. GreetingUser.js 파일의 코드는 다음과 같습니다.
// 맞춤 인사말 기능 초기화
함수 Greeting(이름) (
console.log(`안녕하세요, $(name)!`);
}
// "8host"를 인수로 사용하여 Greeting 함수를 호출합니다.
Greeting("8호스트");
이 프로그램을 실행하면 다음과 같은 결과가 출력됩니다.
이제 함수를 재사용하는 방법을 알았습니다.
매개변수 외에도 함수 내에서 변수를 선언할 수 있습니다. 이러한 변수를 로컬이라고 하며 해당 기능 블록 내에서만 존재합니다. 변수 범위는 변수의 가용성을 결정합니다. 함수 내부에 정의된 변수는 함수 외부에서 접근이 불가능하지만, 해당 변수가 속한 함수가 프로그램에서 사용되는 횟수만큼 사용할 수 있습니다.
반환 값
함수에서 둘 이상의 매개변수를 사용할 수 있습니다. 여러 값을 함수에 전달하고 값을 반환할 수 있습니다. 예를 들어, sum.js 파일을 만들고 x와 y라는 두 값의 합을 찾는 함수를 선언합니다.
// 추가 함수 초기화
함수 추가(x, y) (
x + y를 반환합니다.
}
추가(9, 7);
이 코드는 매개변수 x와 y를 사용하여 함수를 정의합니다. 그런 다음 함수는 값 9와 7을 가져옵니다. 프로그램을 실행합니다.
프로그램은 결과 값 9와 7을 더하고 결과 16을 반환합니다.
언제 사용하나요? 예어반환하면 함수 실행이 중지되고 표현식의 값이 반환됩니다. 이 경우 브라우저는 콘솔에 값을 표시하지만 이는 console.log()를 사용하여 콘솔에 출력하는 것과는 다릅니다. 함수가 호출되면 함수가 호출된 위치에 값을 출력합니다. 이 값은 변수에 사용되거나 배치될 수 있습니다.
함수 표현식
이전 섹션에서는 두 숫자를 더하고 결과 값을 반환하는 함수를 선언했습니다. 변수에 함수를 할당하여 함수 표현식을 생성할 수도 있습니다.
이전 함수를 사용하여 결과 값을 합계 변수에 적용합니다.
// 합계 상수에 추가 기능을 할당합니다.
const sum = 함수 add(x, y) (
x + y를 반환합니다.
}
// 합계를 구하는 함수 호출
합계(20, 5);
25
이제 상수합은 함수입니다. 이 표현식은 익명 함수로 변환하여 단축할 수 있습니다(이것은 이름 매개변수가 없는 함수를 호출하는 것입니다). 현재 이 함수는 add라고 불리지만, 함수 표현식에서는 이름이 일반적으로 생략됩니다.
// 합계 상수에 함수 할당
const 합계 = 함수(x, y) (
x + y를 반환합니다.
}
// 합계를 구하는 함수 호출
합계(100, 3);
103
이제 함수에는 더 이상 이름이 없으며 익명이 되었습니다.
명명된 함수 표현식을 디버깅에 사용할 수 있습니다.
화살표 기능
지금까지 함수는 function 키워드를 사용하여 정의되었습니다. 그러나 함수를 정의하는 더 새롭고 간결한 방법인 ECMAScript 6 화살표 함수가 있습니다. 화살표 함수는 등호 뒤에 보다 큼 기호(=>)가 오는 방식으로 표시됩니다.
화살표 함수는 항상 익명이며 함수 표현식의 한 유형입니다. 두 숫자의 합을 구하는 기본 화살표 함수를 만들어 보세요.
// 곱셈 함수 정의
const 곱하기 = (x, y) => (
x * y를 반환합니다.
}
곱하기(30, 4);
120
함수를 작성하는 대신 간단히 => 기호를 사용할 수 있습니다.
함수에 매개변수가 하나만 있는 경우 괄호를 생략할 수 있습니다. 다음 예에서 함수는 x를 제곱하므로 인수로 하나의 숫자만 필요합니다.
// 제곱 함수 정의
const 정사각형 = x => (
x * x를 반환합니다;
}
// 제품을 찾는 함수 호출
정사각형(8);
64
메모: 화살표 함수에 매개변수가 없으면 빈 괄호()를 추가해야 합니다.
return 문으로만 구성된 화살표 함수는 단축될 수 있습니다. 함수가 하나의 반환 줄로만 구성된 경우 아래 예와 같이 중괄호와 return 문을 생략할 수 있습니다.
// 제곱 함수 정의
const 정사각형 = x => x * x;
// 제품을 찾는 함수 호출
정사각형(10);
100
결론
이 튜토리얼에서는 함수 선언, 함수 표현식 및 화살표 기능, 값을 반환하고 함수 값을 변수에 할당합니다.
함수는 값을 반환하거나 작업을 수행하는 코드 블록입니다.
태그:JavaScript의 변수와 상수. 변수를 선언하고 값을 할당합니다. 전역 변수와 지역 변수. 상수 사용
JavaScript에서 변수 선언
JavaScript의 변수 이름은 문자, 숫자, $ 기호, _ 기호로 구성될 수 있으며 변수 이름은 숫자로 시작할 수 없습니다. JavaScript는 대소문자를 구분하며 변수 a1과 A1은 서로 다른 변수라는 점을 명심하세요. 가능하더라도 키릴 문자를 사용하는 것은 권장되지 않습니다.
JavaScript의 변수는 var 키워드로 선언됩니다.
바르 페레멘나야_1 바르 페레멘나야_2
선언 없이 JavaScript에서 변수를 사용하는 것은 권장되지 않습니다. 이는 가능하지만 오류가 발생할 수 있습니다.
변수에 값 할당
JavaScript에서 선언된 변수에 값 할당:
Peremennaya_1 = 25 Peremennaya_2 = "할당된 텍스트는 곧은 따옴표로 묶여 있습니다."
선언 즉시 변수에 값을 할당할 수 있습니다.
Var Peremennaya_1 = 25 var Peremennaya_2 = "할당된 텍스트는 곧은 따옴표로 묶여 있습니다."
JavaScript의 변수 값은 프로그램 실행 중에 변경될 수 있습니다. 변수에 텍스트를 쓸 때는 곧은 따옴표로 묶어야 합니다.
지역 및 전역 변수
함수 내에서 변수가 선언되면 현지의이 기능 내에서만 사용 가능(표시)됩니다. 함수가 종료되면 JavaScript의 지역 변수는 소멸되므로 다른 함수에서 동일한 이름을 가진 변수를 사용할 수 있습니다.
변수가 함수 외부에서 선언된 경우 글로벌페이지 내의 모든 기능에서 사용 가능(표시)됩니다. 전역 변수는 페이지가 닫힐 때 JavaScript에서 삭제됩니다.
JavaScript의 상수
상수중복된 값이나 표현식을 사용해야 할 때 코드 작업을 더 쉽게 할 수 있도록 설계되었습니다. 상수의 값을 한 번만 설정하면 충분하며 이를 프로그램 코드에 삽입하여 원하는 만큼 사용할 수 있습니다. JavaScript에는 상수를 선언하는 키워드가 없으며 상수 대신 일반 변수가 사용됩니다. 상수와 변수를 구별하기 위해 일반적으로 다음과 같이 표시됩니다. 대문자로, 필요한 경우 밑줄을 사용합니다.
Var DRUG_CHELOVEKA = "개"
주어진 상수의 예는 "Dog"라는 단어가 이미 기억하기 쉽고 필요한 곳에 삽입되기 때문에 완전히 완전하지는 않습니다. JavaScript의 상수를 사용하면 기억하기 어려운 코드, 문자 집합, 긴 텍스트, 웹 주소, 주소 등 더 복잡한 값을 기록하고 삽입할 수 있습니다. 이메일, 전화 번호, 다양한 계수.
JavaScript에서는 상수를 변수로 다시 작성할 수 있지만 이렇게 하면 상수의 의미가 손실됩니다.
이 기사에서는 결정하는 방법을 배웁니다. const 키워드를 사용하는 JavaScript의 상수.
ES6키워드를 사용하여 상수를 선언하는 새로운 방법을 제공합니다. const. 예어 const읽기 전용 값에 대한 참조를 만듭니다.
상수 VARIABLE_NAME = 값;
합의에 의해, JavaScript 상수 식별자는 대문자입니다..
예어 const열쇠처럼 생겼어 하자라는 단어블록 범위 변수를 생성하지만 다음과 같이 선언된 값은 const, 변경할 수 없음.
키워드로 선언된 변수 허락하다~이다 변하기 쉬운. 이는 다음 예와 같이 언제든지 해당 값을 변경할 수 있음을 의미합니다.
v = 10이라고 가정합니다.
v = 20;
v = v + 5;
console.log(v); // 35
그러나 키워드로 생성된 변수는 const, 변경할 수 없습니다. 즉, 다른 값에 다시 할당할 수 없습니다. 상수 변수를 재할당하려고 하면 유형 오류가 발생합니다. 유형오류 .
상수 세금 = 0.1;
세금 = 0.2 ; //형식 오류
또한 키워드를 사용하여 선언된 변수 불변,값으로 즉시 초기화되어야 합니다. 다음 예제에서는 호출합니다. 구문오류(구문 오류) 상수 변수 선언에 초기화 프로그램이 없기 때문입니다.
Const RED; // 구문 오류
앞서 언급한 것처럼 키워드로 선언된 변수와 마찬가지로 허락하다, 키워드로 선언된 변수 불변,블록 범위가 있습니다.
그게 다입니다. 다음 기사에서는 키워드 사용에 대해 이야기하겠습니다. const객체 리터럴 포함 자바스크립트.
프로그램이 나중에 사용하기 위해 값을 저장해야 하는 경우 해당 값이 변수에 할당됩니다. 변수는 단순히 이름으로 값을 가져오는 기능을 제공하는 값에 대한 기호 이름입니다. 즉, 프로그램이 변수 이름을 지정할 때 값이 해당 변수를 대체합니다.
변수는 프로그램 실행 중에 값이 변경될 수 있다는 사실 때문에 이름이 붙여졌습니다.
상수
상수는 단순히 값에 대한 기호 이름입니다. 상수를 사용하면 이름으로 값을 참조할 수 있습니다. 즉, 프로그램에서 상수 이름을 지정할 때 해당 값이 대신 대체됩니다. 상수는 프로그램 실행 중에 변경되어서는 안 되는 데이터를 저장하는 데 사용됩니다.
상수를 사용하려면 먼저 선언해야 합니다. 상수는 const 키워드와 상수 이름을 사용하여 선언됩니다. 프로그램 코드에서 상수와 변수를 구별하기 위해 상수 이름을 대문자로 작성하기로 합의했습니다.
상수 MAX = 10;
상수가 생성된 후 이를 변수에 재정의하거나 기존 상수에 값을 할당하려고 하면 오류가 발생합니다.
변수와 상수가 필요한 이유는 무엇입니까?
변수와 상수는 이를 수행하는 데 도움이 됩니다. 프로그램 코드더 명확해졌습니다. 작은 예를 살펴보겠습니다.
총 가격 = 2.42 + 4.33; // 총 가격
여기에 있는 숫자는 무엇이든 의미할 수 있습니다. 여기서 요약되는 내용을 명확하게 하기 위해 값 2.42를 변수(또는 상수) CandyPrice(사탕 가격)에 할당하고 4.33을 변수(또는 상수) oilPrice(유가)에 할당할 수 있습니다.
TotalPrice = 캔디 가격 + 오일 가격;
이제 이러한 값이 무엇을 의미하는지 기억하는 대신 스크립트가 버터 가격에 사탕 가격을 더하는 것을 볼 수 있습니다.
또한 변수와 상수는 스크립트 디버깅 시 시간을 절약하는 데 도움이 됩니다. 어디에서나 동일한 리터럴을 사용하는 대신 스크립트 시작 부분에서 이를 변수(또는 상수)에 할당한 다음 나머지 스크립트 코드 전체에서 리터럴 대신 변수(또는 상수)를 사용할 수 있습니다. 나중에 값을 변경하기로 결정한 경우 코드를 여러 위치에서 변경하는 것이 아니라 값이 변수(또는 상수)에 할당된 한 위치에서만 변경해야 합니다.
상수의 범위
let 키워드로 선언된 변수와 마찬가지로 상수에도 동일한 규칙이 적용됩니다.
상수 MAX = 5; // 전역 상수( const MAX = 10; // 블록 상수 console.log(MAX); // 10 ) console.log(MAX); // 5 foo(); // 15 console.log(MAX); // 5 함수 foo() ( const MAX = 15; // 지역 상수 console.log(MAX); )
상수 및 참조 유형
상수에 참조 유형의 값이 할당되면 값에 대한 참조는 변경할 수 없게 되며 값 자체는 변경 가능한 상태로 유지됩니다.
Const obj = (a: 5); obj.a = 10; console.log(obj.a); // 10
저자로부터:아마도 이것은 놀라운 일이겠지만, JavaScript는 오랫동안 상수에 대한 지원이 부족했습니다. 전체 스크립트 실행 중에 변경되지 않는 등록된 값입니다. 대안이 없는 경우 대부분의 상수는 변수를 사용하여 선언되었습니다.
변수를 사용하여 상수를 선언하는 예:
var DAYSINWEEK = 7;
var DAYSINWEEK = 7; |
이는 스크립트에서 DAYSINWEEK 변수의 값을 언제든지 변경할 수 있기 때문에 위험하고 비실용적입니다. 개발자들은 변수 이름을 대문자로만 지정하는 것(모범 사례)부터 나중에 설명할 솔루션에 이르기까지 표면상 상수인 변수를 JavaScript의 일반 변수와 구별하는 다양한 방법을 생각해냈습니다. 다행히도 최신 버전 ECMAScript(표준 사양)에는 다음 상수가 도입되었습니다.
자바스크립트. 빠른 시작
const DAYSINWEEK = 7;
const DAYSINWEEK = 7; |
이제 DAYSINWEEK를 변수로 액세스할 수 있지만 해당 값은 변경할 수 없습니다.
console.log(DAYSINWEEK); > 7일/주 = 8; > 오류
콘솔. 로그(DAYSINWEEK); DAYSINWEEK = 8 ; > 오류 |
상수가 선언되면(상수는 const 키워드로 초기화되어야 하며 그 뒤에 변수 명명 규칙을 따르는 상수 이름이 와야 함) 해당 이름은 예약됩니다. 더 이상 변수 이름을 DAYSINWEEK로 지정할 수 없으며 동일한 이름의 상수를 가질 수 있습니다. , 혹은 그 반대로도.
const 키워드에는 좋은 지원최신 브라우저: IE11 및 Spartan, Firefox 31+, Opera 12+, Safari 5.1.7+, iOS 7 이상, Chrome 36+. 그러나 몇 가지 중요한 주의 사항이 있습니다.
Chrome은 상수 덮어쓰기를 시도할 때 오류 표시를 지원하지 않습니다. 상수의 값은 어떠한 경우에도 변경되지 않으나, 경험이 없는 개발자라면 에러가 출력되지 않아 새로운 값이 적용되었다고 생각할 수도 있습니다.
자바스크립트. 빠른 시작
웹 애플리케이션을 만드는 방법에 대한 실습 예제를 통해 JavaScript의 기본 사항을 알아보세요.
상수가 생성되지 않습니다. 새로운 지역 Webkit의 가시성. 저것들. 상수는 현재 범위 외부에서 볼 수 있습니다.
Firefox 35 이하에서는 const 값을 즉시 변경할 수 있습니다. 이 문제는 Firefox 36+에서 수정되었습니다.
또한 Webkit의 문제는 엄격 모드가 사용되지 않는 경우에만 발생한다는 점에 유의해야 합니다(이에 대해서는 향후 기사에서 논의할 예정입니다).
이제 실제 프로젝트에서 const 키워드를 사용할 수 있나요?
코드에서 const 키워드를 사용할지 여부는 여러 요인에 따라 선택됩니다. 가장 중요한 것은 사이트 방문자가 사용하는 브라우저 버전입니다. 왜냐하면 const 키워드를 사용하면 IE10과 같은 브라우저에서 오류로 간주되기 때문입니다. . 개발 중에 const 키워드를 사용하고 싶지만 실제 프로젝트에서 사용할 준비가 되지 않은 경우 다음과 같은 몇 가지 옵션이 있습니다.
옵션 1: 트랜스파일러(“트랜스파일러”) 사용
이름에서 알 수 있듯이 트랜스파일러는 컴파일 타임에 코드를 다른 언어로 변환합니다. 이 경우 ES6 사양 버전(const 키워드 도입)에서 ES5로 변환합니다. 이를 통해 더 많은 코드를 작성할 수 있습니다. 새로운 버전하지만 실제 프로젝트에서는 더 넓은 범위의 브라우저와 호환되는 버전을 사용하게 됩니다. 에디 오스마니 작곡
