자바스크립트 기초

자바스크립트

console.log("Hello, World!");

변수 생성

JavaScript에서 변수는 데이터 값을 저장하는 컨테이너입니다. 이 가이드에서는 주요 규칙 및 개념과 함께 JavaScript에서 변수를 선언, 초기화 및 작업하는 방법을 안내합니다.

변수 선언 및 초기화 구문

선언:
JavaScript의 변수는 var, let 또는 const를 사용하여 선언할 수 있습니다.

var variableName;
let anotherVariable;

초기화:
변수는 선언 당시 또는 그 이후에 값으로 초기화될 수 있습니다.

variableName = value;

var number = 10;
let name = "John";

선언 및 초기화 결합:

var age = 25;
let salary = 50000.0;

상수에 const 사용:
const는 일단 초기화되면 재할당할 수 없는 변수를 선언하는 데 사용됩니다.

const pi = 3.14159;

변수 선언: var, let 및 const

• var: 함수 범위 또는 함수 외부에서 선언된 경우 전역 범위의 변수를 선언합니다. 다시 선언하고 업데이트할 수 있습니다.

  var greeting = "Hello";

• let: 블록 범위 변수를 선언합니다. 즉, 선언된 블록 내에서만 액세스할 수 있습니다. 업데이트할 수는 있지만 동일한 범위에서 다시 선언할 수는 없습니다.

  let count = 5;

• const: 블록 범위의 읽기 전용 변수를 선언합니다. 선언 시 초기화되어야 하며 재할당될 수 없습니다.

  const url = "https://example.com";

변수 이름 규칙

1. 변수 이름은 문자, 밑줄(_) 또는 달러 기호($)로 시작해야 합니다.
2. 다음 문자는 문자, 숫자, 밑줄 또는 달러 기호일 수 있습니다.
3. 변수 이름은 대소문자를 구분합니다(myVar와 myvar는 다름).
4. 변수 이름은 JavaScript에서 예약 키워드로 사용할 수 없습니다(예: let, function, class).

예:

let age;
const $price = 9.99;
var _isLoggedIn = true;
let year2024;

변수의 범위

• 전역 범위: 함수나 블록 외부에서 선언된 변수는 전역 범위를 가지며 코드 어디에서나 액세스할 수 있습니다.

  var globalVar = "I am global";

• 함수 범위: 함수 내부에서 var로 선언된 변수는 함수 범위입니다.

  function myFunction() {
      var functionScopedVar = "I exist only within this function";
  }

• 블록 범위: 블록 {} 내에서 let 또는 const로 선언된 변수는 블록 범위입니다.

  if (true) {
      let blockScopedVar = "I exist only within this block";
  }

게양

JavaScript에서는 변수 선언(초기화 아님)이 해당 범위의 맨 위로 끌어올려집니다. 이는 변수가 선언되기 전에 사용할 수 있음을 의미합니다.

console.log(myVar); // Outputs: undefined
var myVar = 10;

그러나 let과 const는 선언 전에는 액세스를 허용하지 않습니다("시간적 데드존"에 있음).

console.log(myLet); // ReferenceError
let myLet = 10;

상수

JavaScript의 상수는 const를 사용하여 선언됩니다. 초기 값이 설정된 후에는 다시 할당할 수 없습니다.

예:

const DAYS_IN_WEEK = 7;
const PI = 3.14159;

그러나 값이 객체 또는 배열인 경우 해당 속성이나 요소는 계속 수정될 수 있습니다.

const person = { name: "John" };
person.name = "Doe";  // This is allowed

기본값

var, let 또는 const로 선언되었지만 초기화되지 않은 변수는 undefine 값을 갖습니다.

예:

let num;  // default value is undefined
console.log(num);  // Outputs: undefined

여러 변수 선언

단일 문에서 여러 변수를 쉼표로 구분하여 선언할 수 있습니다. 선언시 초기화도 가능합니다.

예:

// Declaring multiple variables without values
let a, b, c;

// Declaring and initializing variables
let x = 10, y = 20, z = 30;

여러 변수에 하나의 값 할당

대입 연산자를 연결하여 여러 변수에 동일한 값을 할당할 수 있습니다.

예:

let m, n, o;
m = n = o = 50;

댓글 작성

댓글은 코드를 설명하고 설명하는 데 도움이 되는 실행 불가능한 명령문입니다. 코드를 더 읽기 쉽고 유지 관리하기 쉽게 만드는 데 유용합니다. JavaScript는 두 가지 유형의 주석을 지원합니다.

1. 한 줄 주석

한 줄 주석은 두 개의 슬래시(//)로 시작됩니다. 해당 줄에서 // 다음에 나오는 모든 내용은 주석으로 간주되며 JavaScript 엔진에서 무시됩니다.

구문:

// This is a single-line comment
let x = 10; // x is initialized to 10

2. 여러 줄 주석

여러 줄 주석은 /*로 시작하고 */로 끝납니다. /*와 */ 사이의 모든 내용은 주석으로 간주되며 여러 줄에 걸쳐 있을 수 있습니다.

구문:

/*
 This is a multi-line comment.
 It can span multiple lines.
*/
let y = 20; /* y is initialized to 20 */

기본 출력

결과를 표시하고 사용자와 상호 작용하는 것은 프로그래밍의 기본입니다. 다음은 JavaScript 환경(예: Node.js)에서 기본 출력 작업을 수행하는 방법에 대한 포괄적인 가이드입니다.

1. Output (Printing to Console)

To display output on the console, use the console.log() method. This method prints the string representation of the given data to the standard output (usually the console) followed by a newline.

Syntax:

console.log("Hello, World!");

Example:

let number = 10;
console.log("The number is: " + number);

2. Formatting Output

JavaScript allows you to format output using template literals or string concatenation.

Using Template Literals:
Template literals enable embedded expressions and multi-line strings. They are enclosed in backticks (`).

Syntax:

let name = "Alice";
let age = 30;
console.log(`Name: ${name}, Age: ${age}`);

Using String Concatenation:
You can also format output using the + operator.

Syntax:

let name = "Alice";
let age = 30;
console.log("Name: " + name + ", Age: " + age);

Data Types

JavaScript is a dynamically-typed language, meaning variables can hold values of any type and can change types during runtime. JavaScript provides several categories of data types:

1. Primitive Data Types

Primitive data types are the most basic types of data in JavaScript. They are immutable and are not objects. There are seven primitive data types:

Number Type:

// Represents both integer and floating-point numbers
let num = 42;
let pi = 3.14159;

BigInt Type:

// Represents integers with arbitrary precision
let largeNumber = 123456789012345678901234567890n;

String Type:

// Represents a sequence of characters
let greeting = "Hello, World!";
let singleChar = 'A';

Boolean Type:

// Represents true or false values
let isValid = true;
let isComplete = false;

Undefined Type:

// Represents a variable that has been declared but not assigned a value
let value;
console.log(value); // Outputs: undefined

Null Type:

// Represents the intentional absence of any object value
let result = null;

Symbol Type:

// Represents a unique and immutable value used as an object property key
let uniqueSymbol = Symbol('description');

2. Object Data Types

Object data types are collections of properties, where each property is a key-value pair. Objects can be used to group related data and functionality.

• Object: The most general type of object in JavaScript. It can hold multiple values as properties.

Syntax:

  let person = {
      name: "Alice",
      age: 30
  };

• Array: A special type of object used to store ordered collections of values. Arrays are indexed starting from 0.

Syntax:

  let numbers = [1, 2, 3, 4, 5];

• Function: Functions are also objects in JavaScript. They can be assigned to variables, passed as arguments, and returned from other functions.

Syntax:

  function greet(name) {
      return "Hello, " + name;
  }

• Date: A built-in object for handling dates and times.

Syntax:

  let today = new Date();

• RegExp: A built-in object for working with regular expressions.

Syntax:

  let pattern = /ab+c/;

Type Conversion

JavaScript performs type conversion automatically (implicit conversion) but also allows explicit conversion.

• Implicit Conversion: Automatically converts types during operations.

  let result = "The number is " + 42; // "The number is 42"

• Explicit Conversion: Manually converting types using functions.

  let str = String(123);  // "123"
  let num = Number("456"); // 456

Strings in JavaScript

String is a built-in object that represents a sequence of characters. It is widely used for manipulating text and is immutable, meaning once a String object is created, its value cannot be changed. Here's a comprehensive guide covering everything you need to know about String:

1. Creating Strings

You can create a String using string literals or by creating instances of the String object.

Using String Literals:

let str1 = "Hello"; // Using double quotes
let str2 = 'World'; // Using single quotes
let str3 = `Hello, ${str2}`; // Using template literals

Using String Constructor:

let str4 = new String(); // Empty string
let str5 = new String("JavaScript"); // Using constructor with initial value

2. String Immutability

String objects are immutable, which means once created, their values cannot be changed.

Example:

let immutableStr = "Hello";
immutableStr = immutableStr + " World"; // Creates a new String object
console.log(immutableStr); // Output: Hello World

3. String Concatenation

You can concatenate strings using the + operator or template literals. You can also concatenate numbers with strings.

Example:

let str1 = "Hello";
let str2 = "World";
let concatStr = str1 + " " + str2; // Using +
let concatStr2 = `${str1} ${str2}`; // Using template literals

let num = 42;
let numConcat = `The answer is ${num}`; // Concatenating number with string
console.log(concatStr); // Output: Hello World
console.log(numConcat); // Output: The answer is 42

4. String Length

You can get the length of a String using the length property.

Example:

let str = "JavaScript";
let length = str.length; // length is 10

5. String Comparison

You can compare strings using the === operator for strict equality and locale-aware comparison methods.

Example:

let str1 = "JavaScript";
let str2 = "javascript";
console.log(str1 === str2); // false
console.log(str1.toLowerCase() === str2.toLowerCase()); // true

6. String Interning

While not explicitly handled like in some other languages, strings created using literals may be optimized for performance by the JavaScript engine.

Example:

let str1 = "JavaScript";
let str2 = "JavaScript";
console.log(str1 === str2); // true (interning by engine)

7. Escape Sequences

JavaScript supports escape sequences within strings, such as \n for newline, \t for tab, and \\ for a backslash.

Example:

let escapeStr = "Hello\tWorld\nJavaScript";
console.log(escapeStr);
// Output:
// Hello   World
// JavaScript

8. String Formatting

You can use template literals for formatting.

Example using Template Literals:

let age = 30;
let formattedStr = `I am ${age} years old.`;
console.log(formattedStr);
// Output: I am 30 years old.

let price = 19.95;
let formattedPrice = `The price is ${price.toFixed(2)} dollars.`;
console.log(formattedPrice);
// Output: The price is 19.95 dollars.

Operators in JavaScript

Operators in JavaScript are symbols used to perform operations on values and variables. They are categorized based on their functionality.

Arithmetic Operators

Arithmetic operators are used for basic mathematical operations.

Operator	Name	Description	Example
+	Addition	Adds two operands	x + y
-	Subtraction	Subtracts the right operand from the left	x - y
*	Multiplication	Multiplies two operands	x * y
/	Division	Divides the left operand by the right operand	x / y
%	Modulus	Returns the remainder of the division	x % y
++	Increment	Increases the value of operand by 1	x++ or ++x
--	Decrement	Decreases the value of operand by 1	x-- or --x

Example:

let a = 10;
let b = 3;
console.log(a + b);   // Output: 13
console.log(a / b);   // Output: 3.3333333333333335
console.log(a % b);   // Output: 1

let x = 5;
x++;
console.log(x);       // Output: 6

let y = 8;
y--;
console.log(y);       // Output: 7

Assignment Operators

Assignment operators are used to assign values to variables and perform operations.

Operator	Name	Description	Example
=	Assignment	Assigns the value on the right to the variable on the left	x = 5
+=	Addition	Adds right operand to the left operand and assigns the result to the left	x += 3
-=	Subtraction	Subtracts right operand from the left operand and assigns the result to the left	x -= 3
*=	Multiplication	Multiplies right operand with the left operand and assigns the result to the left	x *= 3
/=	Division	Divides left operand by right operand and assigns the result to the left	x /= 3
%=	Modulus	Computes modulus of left operand with right operand and assigns the result to the left	x %= 3

Example:

let x = 10;
x += 5;
console.log(x);   // Output: 15

Comparison Operators

Comparison operators evaluate conditions and return Boolean values.

Operator	Name	Description	Example
==	Equal	Checks if two operands are equal	x == y
===	Strict Equal	Checks if two operands are equal and of the same type	x === y
!=	Not Equal	Checks if two operands are not equal	x != y
!==	Strict Not Equal	Checks if two operands are not equal or not of the same type	x !== y
>	Greater Than	Checks if left operand is greater than right	x > y
<	Less Than	Checks if left operand is less than right	x < y
>=	Greater Than or Equal	Checks if left operand is greater than or equal to right	x >= y
<=	Less Than or Equal	Checks if left operand is less than or equal to right	x <= y

Example:

let a = 5;
let b = 10;
console.log(a == b);   // Output: false
console.log(a < b);    // Output: true

Logical Operators

Logical operators combine Boolean expressions and return Boolean values.

Operator	Description	Example
&&	Logical AND	x < 5 && x < 10
||	Logical OR	x < 5 || x < 4
!	Logical NOT	!(x < 5 && x < 10)

Example:

let x = 3;
console.log(x < 5 && x < 10);   // Output: true
console.log(x < 5 || x < 2);    // Output: true

Bitwise Operators

Bitwise operators are used to perform bitwise operations on integers.

Operator	Name	Description	Example
&	AND	Sets each bit to 1 if both bits are 1	x & y
|	OR	Sets each bit to 1 if one of two bits is 1	x | y
^	XOR	Sets each bit to 1 if only one of two bits is 1	x ^ y
~	NOT	Inverts all the bits	~x
<<	Left Shift	Shifts bits to the left	x << 2
>>	Right Shift	Shifts bits to the right	x >> 2
>>>	Unsigned Right Shift	Shifts bits to the right and fills with zeros	x >>> 2

Example:

let x = 5;
let y = 3;
console.log(x & y);   // Output: 1
console.log(x | y);   // Output: 7

Ternary Operator

The ternary operator ? : provides a shorthand for conditional expressions.

Example:

let age = 20;
let status = (age >= 18) ? "Adult" : "Minor";
console.log(status);   // Output: Adult

Conditions

Conditions are used to execute specific blocks of code based on whether a certain expression evaluates to true or false. They control the flow of a program by allowing different code to run depending on the outcome of conditional expressions. In JavaScript, conditional statements such as if, else if, and else help manage decision-making in the code.

If-Else Statements in JavaScript

In JavaScript, if statements are employed to execute code based on the evaluation of a condition. A condition in JavaScript evaluates to either true or false, determining which block of code will execute. The else and else if statements are used to specify alternative code blocks based on different conditions.

Syntax and Usage

The basic syntax of an if statement in JavaScript is:

if (condition) {
    // Executes if the condition is true
    statement(s);
}

If you need to execute an alternative block of code when the condition is false, use else:

if (condition) {
    // Executes if the condition is true
    statement(s);
} else {
    // Executes if the condition is false
    statement(s);
}

For handling multiple conditions, use else if:

if (condition1) {
    // Executes if condition1 is true
    statement(s);
} else if (condition2) {
    // Executes if condition1 is false and condition2 is true
    statement(s);
} else {
    // Executes if both condition1 and condition2 are false
    statement(s);
}

Examples

1. Simple if statement:

let x = 10;

if (x > 5) {
    console.log("x is greater than 5");  // Output: x is greater than 5
}

1. if-else statement:

let x = 3;

if (x % 2 === 0) {
    console.log("x is even");
} else {
    console.log("x is odd");  // Output: x is odd
}

1. if-else if-else statement:

let x = 20;

if (x > 50) {
    console.log("x is greater than 50");
} else if (x > 30) {
    console.log("x is greater than 30 but less than or equal to 50");
} else {
    console.log("x is 30 or less");  // Output: x is 30 or less
}

Note:

In JavaScript, you can use any expression in a condition, and values that are not strictly true or false can still be evaluated. For example, non-zero numbers, non-empty strings, and objects are considered true, while 0, null, undefined, NaN, and empty strings are considered false. This flexibility allows for concise condition checks without explicitly comparing values to true or false.

Loops

Loops in JavaScript are used to execute a block of code repeatedly based on a specified condition. JavaScript supports several types of loops: for, for...in, for...of, while, and do...while. Each loop serves different purposes and choosing the right loop can help streamline your code and improve its readability.

1. For Loop

A for loop is used when the number of iterations is known beforehand. It includes initialization, condition, and update expressions.

Syntax:

for (initialization; condition; update) {
    // Code to be executed
}

Example:

for (let i = 0; i < 5; i++) {
    console.log("Iteration: " + i);
}

2. For...in Loop

The for...in loop iterates over the enumerable properties of an object. It is commonly used to loop through the keys of an object.

Syntax:

for (key in object) {
    // Code to be executed
}

Example:

let person = { name: "Alice", age: 25, city: "New York" };
for (let key in person) {
    console.log(key + ": " + person[key]);
}

3. For...of Loop

The for...of loop iterates over iterable objects like arrays, strings, maps, and sets. It provides a convenient way to loop through elements.

Syntax:

for (element of iterable) {
    // Code to be executed
}

Example:

let numbers = [1, 2, 3, 4, 5];
for (let number of numbers) {
    console.log(number);
}

4. While Loop

A while loop is used when the number of iterations is not known beforehand, and the loop continues until a specified condition is false.

Syntax:

while (condition) {
    // Code to be executed
}

Example:

let i = 0;
while (i < 5) {
    console.log("Iteration: " + i);
    i++;
}

5. Do...While Loop

A do...while loop is similar to a while loop, but it ensures that the code block is executed at least once because the condition is evaluated after the loop body.

Syntax:

do {
    // Code to be executed
} while (condition);

Example:

let i = 0;
do {
    console.log("Iteration: " + i);
    i++;
} while (i < 5);

6. Nested Loops

Loops can be nested within other loops, which is useful for iterating over multi-dimensional arrays or performing more complex iterations.

Example:

for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
        console.log("i: " + i + ", j: " + j);
    }
}

7. Break and Continue

break and continue statements are used to alter the flow of loops:

• break exits the loop immediately.
• continue skips the current iteration and proceeds to the next iteration.

Example of break:

for (let i = 0; i < 5; i++) {
    if (i === 3) {
        break;
    }
    console.log("Iteration: " + i);
}

Example of continue:

for (let i = 0; i < 5; i++) {
    if (i === 3) {
        continue;
    }
    console.log("Iteration: " + i);
}

Functions in JavaScript

Functions in JavaScript are blocks of code designed to perform specific tasks. Functions allow you to write reusable code, making your programs more organized and modular. JavaScript functions can be defined using several syntaxes and can handle parameters and return values. Here's a comprehensive guide to understanding and using functions in JavaScript.

1. Function Definition and Syntax

A function in JavaScript is defined using the function keyword, followed by a name, parameters (optional), and a block of code.

Syntax:

function functionName(parameters) {
    // Code to be executed
}

• functionName: The name of the function.
• parameters: A comma-separated list of input parameters. If there are no parameters, leave the parentheses empty.

Example:

function greet() {
    return "Hello, World!";
}

console.log(greet());  // Output: Hello, World!

2. Calling Functions

To execute a function, you call it by using its name followed by parentheses. Functions can be called from within other functions or from different parts of your code.

Example:

function greet() {
    return "Hello, World!";
}

console.log(greet());  // Output: Hello, World!

3. Function Parameters

Functions can take parameters, which are used to pass values into the function.

Example:

function add(a, b) {
    return a + b;
}

console.log(add(5, 3));  // Output: 8

4. Return Values

A function can return a value using the return statement. The return type of the function must match the type of the value returned.

Example:

function multiply(a, b) {
    return a * b;
}

console.log(multiply(4, 7));  // Output: 28

5. Function Overloading

JavaScript does not support method overloading (having multiple functions with the same name but different parameters) directly. Instead, you can use default parameters or check the number and types of arguments inside the function.

Example with argument checking:

function print(value) {
    if (typeof value === "number") {
        console.log("Number: " + value);
    } else if (typeof value === "string") {
        console.log("String: " + value);
    }
}

print(10);          // Output: Number: 10
print("Hello");     // Output: String: Hello

6. Recursive Functions

A function can call itself, a concept known as recursion. Recursion is useful for solving problems that can be broken down into smaller, repetitive tasks.

Example:

function factorial(n) {
    if (n === 0) {
        return 1;
    } else {
        return n * factorial(n - 1);
    }
}

console.log(factorial(5));  // Output: 120

7. Anonymous Functions

An anonymous function is a function that does not have a name. These functions are often used as arguments to other functions or assigned to variables.

Example:

const greet = function() {
    return "Hello, World!";
};

console.log(greet());  // Output: Hello, World!

8. Arrow Functions

Arrow functions provide a concise syntax for writing functions. They do not have their own this context and are often used for shorter functions.

Syntax:

const functionName = (parameters) => {
    // Code to be executed
};

Example:

const add = (a, b) => a + b;

console.log(add(5, 3));  // Output: 8

9. Immediately Invoked Function Expressions (IIFE)

An IIFE is a function that is executed immediately after its definition. It is often used to create a new scope to avoid polluting the global namespace.

Syntax:

(function() {
    // Code to be executed
})();

Example:

(function() {
    const message = "Hello, World!";
    console.log(message);
})();  // Output: Hello, World!

10. Function Expressions

A function expression involves assigning a function to a variable. Function expressions can be named or anonymous.

Example:

const square = function(x) {
    return x * x;
};

console.log(square(4));  // Output: 16

11. Default Parameters

Functions in JavaScript can have default values for parameters. If a parameter is not provided when the function is called, the default value is used.

Syntax:

function functionName(parameter = defaultValue) {
    // Code to be executed
}

Example:

function greet(name = "Guest") {
    return "Hello, " + name + "!";
}

console.log(greet());        // Output: Hello, Guest!
console.log(greet("Alice")); // Output: Hello, Alice!

12. Rest Parameters

Rest parameters allow you to represent an indefinite number of arguments as an array. They must be the last parameter in the function’s parameter list.

Syntax:

function functionName(...rest) {
    // Code to be executed
}

Example:

function sum(...numbers) {
    return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3, 4, 5));  // Output: 15

13. The arguments Object

In JavaScript, functions have an arguments object that contains all the arguments passed to the function. This object is not available in arrow functions.

Example:

function showArguments() {
    console.log(arguments);
}

showArguments(1, "test", true);  // Output: [1, "test", true]

Note: The arguments object is not available in arrow functions; instead, use rest parameters for similar functionality.

Method Parameters in JavaScript

1. Syntax for Defining Method Parameters

In JavaScript, method parameters are defined within parentheses following the method name. Each parameter is declared with its name, and there is no need to specify its type.

function functionName(parameter1, parameter2, ...) {
    // Code to be executed
}

2. Passing Arguments

When invoking a function, you pass arguments to match the parameters defined in the function signature. JavaScript functions can accept any number of arguments, and extra arguments are ignored if they are not specified in the function definition.

function printDetails(name, age) {
    console.log("Name: " + name + ", Age: " + age);
}

printDetails("John", 30); // Passing arguments "John" and 30

3. Pass by Value

JavaScript passes primitive data types (e.g., numbers, strings) by value. This means a copy of the actual value is passed to the function. Changes made to the parameter inside the function do not affect the original value.

function modifyValue(num) {
    num = num + 10; // Changes made to num inside the function
}

let x = 5;
modifyValue(x);
console.log(x); // Output: 5 (unchanged)

4. Pass by Reference

JavaScript objects and arrays are passed by reference. This means that the reference to the object or array is passed, and changes to the object's properties or array elements will affect the original object or array.

function modifyObject(obj) {
    obj.value = obj.value + 10; // Modifying obj inside the function
}

let myObject = { value: 5 };
modifyObject(myObject);
console.log(myObject.value); // Output: 15 (modified)

위 내용은 자바스크립트 기초의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!