มีการแนะนำคีย์เวิร์ด const อีเอส 6 (2015)
ตัวแปรที่กำหนดด้วย const ไม่สามารถ ประกาศซ้ำ ได้
ตัวแปรที่กำหนดด้วย const ไม่สามารถ กำหนดใหม่ ได้
ตัวแปรที่กำหนดด้วย const มี Block Scope
ไม่สามารถกำหนดตัวแปร const ใหม่ได้:
const PI = 3.141592653589793;
PI = 3.14; // This will give an error
PI = PI + 10; // This will also give an errorลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript const</h2>
<p id="demo"></p>
<script>
try {
const PI = 3.141592653589793;
PI = 3.14;
}
catch (err) {
document.getElementById("demo").innerHTML = err;
}
</script>
</body>
</html>
ตัวแปร JavaScript const จะต้องได้รับการกำหนดค่าเมื่อมีการประกาศ:
const PI = 3.14159265359;const PI;
PI = 3.14159265359;ประกาศตัวแปรด้วย const ทุกครั้งเมื่อคุณทราบ ไม่ควรเปลี่ยนแปลงค่า
ใช้ const เมื่อคุณประกาศ:
อาร์เรย์ใหม่
วัตถุใหม่
ฟังก์ชั่นใหม่
RegExp ใหม่
คำหลัก const ทำให้เข้าใจผิดเล็กน้อย
มันไม่ได้กำหนดค่าคงที่ มันกำหนดการอ้างอิงคงที่ไปยังค่า
ด้วยเหตุนี้คุณจึงไม่สามารถ:
กำหนดค่าคงที่ใหม่
กำหนดอาร์เรย์คงที่ใหม่
กำหนดวัตถุคงที่ใหม่
แต่คุณทำได้:
เปลี่ยนองค์ประกอบของอาร์เรย์คงที่
เปลี่ยนคุณสมบัติของวัตถุคงที่
คุณสามารถเปลี่ยนองค์ประกอบของอาร์เรย์คงที่:
// You can create a constant array:
const cars = ["Saab", "Volvo", "BMW"];
// You can change an element:
cars[0] = "Toyota";
// You can add an element:
cars.push("Audi");ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript const</h2>
<p>Declaring a constant array does NOT make the elements unchangeable:</p>
<p id="demo"></p>
<script>
// Create an Array:
const cars = ["Saab", "Volvo", "BMW"];
// Change an element:
cars[0] = "Toyota";
// Add an element:
cars.push("Audi");
// Display the Array:
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
แต่คุณไม่สามารถกำหนดอาร์เรย์ใหม่ได้:
const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"]; // ERRORลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript const</h2>
<p>You can NOT reassign a constant array:</p>
<p id="demo"></p>
<script>
try {
const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"];
}
catch (err) {
document.getElementById("demo").innerHTML = err;
}
</script>
</body>
</html>
คุณสามารถเปลี่ยนคุณสมบัติของวัตถุคงที่ได้:
// You can create a const object:
const car = {type:"Fiat", model:"500", color:"white"};
// You can change a property:
car.color = "red";
// You can add a property:
car.owner = "Johnson";ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript const</h2>
<p>Declaring a constant object does NOT make the objects properties unchangeable:</p>
<p id="demo"></p>
<script>
// Create an object:
const car = {type:"Fiat", model:"500", color:"white"};
// Change a property:
car.color = "red";
// Add a property:
car.owner = "Johnson";
// Display the property:
document.getElementById("demo").innerHTML = "Car owner is " + car.owner;
</script>
</body>
</html>
แต่คุณไม่สามารถกำหนดวัตถุใหม่ได้:
const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"}; //
ERRORลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript const</h2>
<p>You can NOT reassign a constant object:</p>
<p id="demo"></p>
<script>
try {
const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"};
}
catch (err) {
document.getElementById("demo").innerHTML = err;
}
</script>
</body>
</html>
| Scope | Redeclare | Reassign | Hoisted | Binds this | |
| var | No | Yes | Yes | Yes | Yes |
| let | Yes | No | Yes | No | No |
| const | Yes | No | No | No | No |
ให้ และ const มี ขอบเขตการบล็อก
ให้ และ const ไม่สามารถ ประกาศซ้ำ ได้
ให้ และ const ต้องประกาศก่อนใช้งาน
ให้ และ const ไม่ผูกกับ สิ่งนี้
ให้ และ const ไม่ถูกยกขึ้น
var ไม่จำเป็นต้องประกาศ
var ถูกยกขึ้น
var เชื่อมโยงกับสิ่งนี้
คำหลัก let และ const คือ ไม่รองรับ Internet Explorer 11 หรือรุ่นก่อนหน้า
ตารางต่อไปนี้กำหนดเบราว์เซอร์เวอร์ชันแรกที่รองรับอย่างเต็มที่:
| Chrome 49 | Edge 12 | Firefox 36 | Safari 11 | Opera 36 |
| Mar, 2016 | Jul, 2015 | Jan, 2015 | Sep, 2017 | Mar, 2016 |
การประกาศตัวแปรด้วย const จะคล้ายกับ let เมื่อพูดถึง ขอบเขตการบล็อก
x ที่ประกาศในบล็อก ในตัวอย่างนี้ ไม่เหมือนกับ x ที่ประกาศนอกบล็อก:
const x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScropt const variables has block scope</h2>
<p id="demo"></p>
<script>
const x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
document.getElementById("demo").innerHTML = "x is " + x;
</script>
</body>
</html>
คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับขอบเขตบล็อกได้ในบทขอบเขต JavaScript
อนุญาตให้ประกาศตัวแปร var ของ JavaScript อีกครั้ง ทุกที่ในโปรแกรม:
var x = 2; // Allowed
var x = 3; // Allowed
x = 4; // Allowedการประกาศซ้ำ var หรือ let ที่มีอยู่ ไม่อนุญาตให้ใช้ตัวแปรเป็น const ในขอบเขตเดียวกัน:
var x = 2; // Allowed
const x = 2; // Not allowed
{
let x = 2; // Allowed
const x = 2; // Not allowed
}
{
const x = 2; // Allowed
const x = 2; // Not allowed
}
ไม่อนุญาตให้กำหนดตัวแปร const ที่มีอยู่ในขอบเขตเดียวกันอีกครั้ง:
const x = 2; // Allowed
x = 2; // Not allowed
var x = 2; // Not allowed
let x = 2; // Not allowed
const x = 2; // Not allowed
{ const x = 2; // Allowed
x = 2;
// Not allowed
var x = 2;
// Not allowed
let x = 2;
// Not allowed
const x = 2; // Not allowed
}
อนุญาตให้ประกาศตัวแปรใหม่ด้วย const ในขอบเขตอื่นหรือในบล็อกอื่น:
const x = 2; // Allowed
{ const x = 3; // Allowed
}
{
const x = 4; // Allowed
}ตัวแปรที่กำหนดด้วย var จะถูก ยก ขึ้นไปด้านบน และสามารถเริ่มต้นได้ตลอดเวลา
ความหมาย: คุณสามารถใช้ตัวแปรก่อนที่จะประกาศได้:
นี่เป็นเรื่องปกติ:
carName = "Volvo";
var carName;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Hoisting</h2>
<p>With <b>var</b>, you can use a variable before it is declared:</p>
<p id="demo"></p>
<script>
carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
var carName;
</script>
</body>
</html>
หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการยก โปรดศึกษาบทที่ JavaScript Hoisting <p>ตัวแปรที่กำหนดด้วย const จะถูกยกขึ้นไปด้านบนเช่นกัน แต่ไม่ได้เริ่มต้น
ความหมาย: การใช้ตัวแปร const ก่อนที่จะประกาศจะส่งผลให้ <รหัส class="w3-codespan">ReferenceError:
alert (carName);
const carName = "Volvo";ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Hoisting</h2>
<p>With <b>const</b>, you cannot use a variable before it is declared:</p>
<p id="demo"></p>
<script>
try {
alert(carName);
const carName = "Volvo";
}
catch (err) {
document.getElementById("demo").innerHTML = err;
}
</script>
</body>
</html>