[JavaScript] 심볼(Symbol)

심볼이란자바스크립트에서 심볼은 유일한 식별자를 만들기 위한 원시형입니다. 객체의 프로퍼티 키로 사용할 때, 일반 문자열과 달리 다른 코드나 라이브러리와 접근 및 재정의를 효과적으로 제어할 수 있습니다.동일한 설명을 가진 심볼을 여러 개 생성하더라도 각 심볼은 서로 다릅니다.// 새로운 심볼 생성const symA = Symbol("identifier");const symB = Symbol("identifier");console.log(symA === symB); // false 서로 다른 심볼입니다.심볼의 특징암묵적 형변환 방지심볼은 자동으로 문자열이나 숫자 등 다른 원시형으로 형변환되지 않습니다.const sym = Symbol("id");// alert(sym); // TypeError: Cannot..

• format_list_bulleted JavaScript
• · 2025. 2. 12.
• textsms

[JavaScript] 옵셔널 체이닝(?.)

옵셔널 체이닝(?.)이란자바스크립트에서 중첩된 객체나 DOM 요소 등에 접근할 때, 특정 단계의 값이 null 또는 undefined일 경우 AND 연산자를 사용하여 체크를 수행하는 것은 가독성이 떨어지는 문제가 있습니다.옵셔널 체이닝을 사용하면 좌측 평가 대상이 null 또는 undefined이면 바로 undefined를 반환하고 그렇지 않으면 이어지는 프로퍼티나 메서드 호출을 진행하여 에러 없이 중첩 객체에 안전하게 접근할 수 있습니다.옵셔널 체이닝 예제에러가 나오는 경우let user = {}; // 프로필 정보가 없는 사용자// 사용자의 프로필에서 이름을 가져오려고 시도alert(user.profile.name); // TypeError: Cannot read property 'name' of u..

• format_list_bulleted JavaScript
• · 2025. 2. 12.
• textsms

[JavaScript] new 연산자와 생성자 함수

생성자 함수와 new 연산자 개요자바스크립트에서 객체 리터널을 사용하면 간편하게 하나의 객체를 만들 수 있습니다. 하지만 여러 유사 객체를 반복해서 생성해야 할 때는 생성자 함수와 new 연산자를 사용하면 효율적입니다.생성자 함수 관례함수 이름의 첫 글자는 대문자로 시작합니다.반드시 new 연산자와 함께 호출하여 내부에서 암시적으로 새로운 객체를 생성 및 초기화 과정을 수행합니다.new 연산자 절차빈 객체 생성을 생성합니다.생성된 빈 객체는 생성자 함수 내부의 this로 바인딩 됩니다.생성자 함수의 본문 코드가 실행됩니다. this에 프로퍼티와 메서드가 추가됩니다.생성자 함수가 명시적으로 객체를 반환하지 않는 경우, new 연산자는 마지막에 this가 암묵적으로 반환됩니다. 기본 생성자 함수 예제// 생..

• format_list_bulleted JavaScript
• · 2025. 2. 11.
• textsms

[JavaScript] 메서드 호출 시 this 바인딩 규칙

메서드란객체는 데이터와 기능을 함께 담기 위해 사용됩니다. 객체의 프로퍼티 중 함수를 할당한 것을 메서드라 부르며, 이를 통해 객체가 자신만의 동작을 수행할 수 있습니다.메서드 생성하기함수 표현식 메서드 생성let person = { name: "Alice", age: 25};person.sayHello = function() { console.log("안녕하세요!");};person.sayHello(); // 출력: 안녕하세요!메서드 축약 구문let person = { name: "Alice", age: 25, sayHello() { console.log("안녕하세요!"); }};person.sayHello(); // 출력: 안녕하세요!this와 메서드 내부에서의 객체 참조메서드를 작..

• format_list_bulleted JavaScript
• · 2025. 2. 11.
• textsms

[JavaScript] 객체 복사하기

원시형과 객체의 복사 차이원시형문자열, 숫자, 불린 등은 변수에 값 자체가 저장됩니다.let message1 = "Hello";let message2 = message1// meesage1과 message2는 각각 별도의 메모리 공간에 Hello라는 값을 담고 잇습니다.객체형객체는 변수에 실제 데이터가 아닌, 메모리 상의 주소(참조값)가 저장됩니다. 따라서 같은 객체를 가리키는 여러 변수가 있을 수 있으며, 한 변수에서 객체를 변경하면 다른 변수에서도 그 변경이 반영됩니다.let car = { brand: "Toyota" };let vehicle = car; // car의 참조값이 vehicle에 복사됨vehicle.brand = "Honda"; // vehicle을 통해 객체의 brand 프로퍼티를 수..

• format_list_bulleted JavaScript
• · 2025. 2. 11.
• textsms

[JavaScript] 객체 : 데이터 구조

객체란객체는 여러 데이터를 키-값 쌍으로 구성된 프로퍼티의 집합입니다. 원시형과 달리 객체는 복합적인 정보를 저장할 수 있으므로, 데이터 구조를 표현할 때 유용합니다.객체 생성 방법객체 생성자 사용let user = new Object();user.name = "Lee";user.age = 25;객체 리터널 사용let user = { name: "Lee", age: 25};프로퍼티 접근과 수정프로퍼티 접근점 표기법user.name = "Lee";console.log(user.name); // 출력: Lee대괄호 표기법user["name"] = "Lee";console.log(user["name"]); // 출력: Lee대괄호 표기법은 키가 공백이나 특수 문자를 포함할 때, 또는 동적으로 키를 사용할 ..

• format_list_bulleted JavaScript
• · 2025. 2. 11.
• textsms