[JavaScript] ChatGPT 활용한 자바스크립트 개념 잡기

liinyeye·2024년 4월 22일

[TIL]

목록 보기
5/10

현재 상황

자바스크립트를 공부하던 중에 계속 정리가 되지 않고 헷갈리는 개념들이 있어, 구글링을 하다가 좀 더 효율적인 방법을 찾고자 챗지피티를 활용하게 됐다. 지금 작은 개념들은 어느 정도 이해가 가는데, 큰 그림이 그려지지 않아 계속 개념이 머릿속에 잡히지 않는 상황이었다. 그래서 헷갈리는 부분들만 골라서 질문을 해보기로 했다. 챗지피티가 어느 정도 수준의 답을 줄지도 궁금해서 사용해볼 좋은 기회라고 생각했다.


알게 된 개념 정리

유사배열객체는 무엇인가?

유사 배열 객체(Similar Array Object)는 배열과 비슷하게 동작하는 객체를 가리킵니다. 이러한 객체는 배열처럼 인덱스를 사용하여 요소에 접근할 수 있지만, 일부 배열 메서드와 속성을 직접적으로 사용할 수는 없습니다.

예를 들어, 함수 내에서 arguments 객체는 유사 배열 객체입니다. arguments 객체는 함수 내에서 사용되며 함수에 전달된 인수들을 포함하고 있습니다. 이 객체는 배열처럼 각 인수에 인덱스를 통해 접근할 수 있지만, 배열 메서드인 forEach(), map(), filter() 등과 같은 메서드를 직접 사용할 수는 없습니다.

유사 배열 객체를 배열로 변환하려면 일반적으로 배열의 슬라이스나 배열의 from() 메서드를 사용합니다. 이렇게 하면 배열 메서드를 사용할 수 있게 됩니다.


유사 배열 객체의 예시로는 JavaScript의 arguments 객체가 있습니다. 함수 내에서 사용되는 arguments 객체는 함수에 전달된 모든 인수를 포함하고 있으며, 배열과 유사한 방식으로 사용할 수 있습니다.

다음은 arguments 객체의 간단한 예시입니다

function exampleFunction() {
    console.log(arguments); // arguments 객체 출력
    console.log(arguments.length); // 전달된 인수의 개수 출력

    // arguments 객체를 순회하며 인수 출력
    for (var i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
}

// 함수 호출
exampleFunction('arg1', 'arg2', 'arg3');

이 코드에서는 exampleFunction 함수가 선언되고, 함수 내에서 arguments 객체를 사용하여 전달된 인수를 출력합니다. arguments 객체는 배열과 유사하게 인덱스를 사용하여 각 인수에 접근할 수 있습니다. 그러나 arguments 객체는 배열이 아니므로 배열의 메서드를 직접 사용할 수는 없습니다.

배열의 메서드를 직접 사용하는 경우는?

배열의 메서드를 직접 사용하는 경우는 배열 객체에 속한 메서드를 호출할 때를 말합니다. JavaScript에서 배열 객체는 다양한 메서드를 가지고 있으며, 이 메서드들은 배열의 요소를 조작하고 검색하는 데 사용됩니다. 예를 들어, 배열 메서드로는 forEach(), map(), filter(), reduce() 등이 있습니다. 이러한 메서드들은 배열 객체의 프로토타입에 정의되어 있으므로 배열 객체에 속한 메서드를 직접 호출할 수 있습니다.

반면에 유사 배열 객체는 배열처럼 인덱스를 사용하여 요소에 접근할 수 있지만, 배열 객체의 메서드를 직접 호출할 수는 없습니다. 따라서 유사 배열 객체를 배열로 변환한 후에야 배열의 메서드를 사용할 수 있습니다. 배열로의 변환은 배열의 슬라이스(slice)나 배열의 from() 메서드 등을 사용하여 수행할 수 있습니다.


배열 메서드를 직접 사용하는 예시

// 배열 생성
var numbers = [1, 2, 3, 4, 5];

// 배열 메서드 직접 호출
var doubledNumbers = numbers.map(function(num) {
    return num * 2;
});

console.log(doubledNumbers); // 출력: [2, 4, 6, 8, 10]

여기 배열 메서드를 직접 사용하는 간단한 예시가 있습니다:

// 배열 생성
var numbers = [1, 2, 3, 4, 5];

// 배열 메서드 직접 호출
var doubledNumbers = numbers.map(function(num) {
    return num * 2;
});

console.log(doubledNumbers); // 출력: [2, 4, 6, 8, 10]

이 예시에서는 배열을 생성하고, map() 메서드를 사용하여 배열의 각 요소를 두 배로 만든 새로운 배열을 생성합니다. 이때 map() 메서드는 배열 객체의 메서드이므로 배열(numbers)에 직접 호출됩니다. 결과로 새로운 배열 doubledNumbers가 반환되어 출력됩니다.

이처럼 배열 객체의 메서드를 직접 호출하여 배열을 조작하거나 검색할 수 있습니다.


함수랑 메서드 차이?

함수와 메서드는 모두 JavaScript에서 코드를 조직화하고 재사용하기 위해 사용되는 코드 조각입니다. 그러나 둘 사이에는 몇 가지 중요한 차이가 있습니다.

  1. 정의와 사용 방법:

    • 함수: 함수는 독립적으로 정의되며, 전역 범위나 다른 함수 내에서 정의될 수 있습니다. 함수는 함수명을 사용하여 호출됩니다.
    • 메서드: 메서드는 객체에 속한 함수로서, 해당 객체의 프로퍼티로 정의됩니다. 메서드는 객체를 통해 호출됩니다.

  2. 호출 시의 this 값:

    • 함수: 일반적인 함수 호출 시 this 값은 전역 객체를 가리킵니다. 엄격 모드(strict mode)에서는 this 값이 undefined가 됩니다.
    • 메서드: 메서드 내부에서 this는 해당 메서드를 호출한 객체를 가리킵니다.

  3. 호출 방법:

    • 함수: 함수는 함수명을 사용하여 호출됩니다.
    • 메서드: 메서드는 해당 객체를 통해 호출됩니다.

간단한 예시로 이를 설명하겠습니다:

// 함수 정의
function greet() {
    console.log('Hello');
}

// 함수 호출
greet(); // 출력: 'Hello'

// 객체 정의
var obj = {
    name: 'John',
    greet: function() {
        console.log('Hello, ' + this.name);
    }
};

// 메서드 호출
obj.greet(); // 출력: 'Hello, John'

위의 코드에서 greet 함수는 독립적으로 정의되어 있고, 함수명을 통해 호출됩니다. 반면에 greet 메서드는 obj 객체에 속해 있으며, 해당 객체를 통해 호출됩니다. 메서드 내부에서 this는 해당 객체를 가리키므로, this.name은 obj 객체의 name 프로퍼티를 참조합니다.

그럼 this란 무엇인지?

JavaScript에서 this는 현재 실행 중인 코드의 컨텍스트를 나타내는 특수한 키워드입니다. this가 가리키는 값은 실행 중인 코드의 문맥에 따라 달라집니다.

일반적으로 다음과 같은 경우에 this의 값이 결정됩니다:

  1. 전역 컨텍스트: 전역 코드에서 this는 전역 객체를 가리킵니다. 브라우저 환경에서는 전역 객체가 window입니다.

  2. 함수 내부: 함수 내부에서 this는 호출 방법에 따라 다르게 동작합니다.

    • 일반 함수 호출: 함수 내부에서 this는 전역 객체를 가리킵니다. 브라우저 환경에서는 window 객체가 됩니다.
    • 메서드 호출: 객체의 메서드로서 함수가 호출되면, this는 해당 메서드가 속한 객체를 가리킵니다.
    • 생성자 함수: 생성자 함수로서 호출된 함수 내부에서 this는 새로 생성된 인스턴스를 가리킵니다.

  3. 이벤트 핸들러: 이벤트 핸들러 내부에서 this는 이벤트가 발생한 요소를 가리킵니다.

  4. 화살표 함수: 화살표 함수 내부에서 this는 자신이 생성될 때의 외부 환경에서의 this 값을 유지합니다. 화살표 함수 내부에서 this를 변경할 수 없습니다.

this는 코드 실행 중에 동적으로 결정되기 때문에 주의해서 사용해야 합니다. 함수나 메서드가 어떻게 호출되느냐에 따라 this가 가리키는 대상이 달라질 수 있습니다.


생성자 함수란?

생성자 함수는 객체를 생성하는 데 사용되는 함수입니다. 생성자 함수는 new 키워드와 함께 호출되며, 새로운 객체를 생성하여 반환합니다. 여기에 간단한 생성자 함수의 예시가 있습니다:

// 생성자 함수 정의
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 생성자 함수를 사용하여 객체 생성
var person1 = new Person('John', 30);
var person2 = new Person('Jane', 25);

// 객체 확인
console.log(person1); // 출력: Person { name: 'John', age: 30 }
console.log(person2); // 출력: Person { name: 'Jane', age: 25 }

위 예시에서 Person이라는 생성자 함수가 정의되어 있습니다. 이 함수는 name과 age라는 두 개의 매개변수를 받아서 새로운 객체를 생성합니다. 이후 new 키워드를 사용하여 Person 생성자 함수를 호출하고 새로운 객체를 생성합니다. this 키워드를 사용하여 생성된 객체의 프로퍼티를 설정합니다.

그런 다음, 생성된 객체를 person1과 person2 변수에 할당하여 확인합니다. person1과 person2는 각각 Person 생성자 함수를 사용하여 생성된 두 개의 다른 객체입니다.

this를 사용하지 않고 함수 안에서 객체 프로퍼티를 설정하는 방법은?

함수 안에서 객체 프로퍼티를 설정하는 또 다른 방법은 함수가 객체를 반환하는 것입니다. 이를 통해 함수가 호출될 때 반환된 객체에 직접 프로퍼티를 설정할 수 있습니다. 이것은 일반적으로 "팩토리 함수" 패턴이라고 알려져 있습니다. 예를 들어:

// 팩토리 함수 정의
function createPerson(name, age) {
    var person = {}; // 빈 객체 생성
    person.name = name; // 프로퍼티 설정
    person.age = age; // 프로퍼티 설정
    return person; // 객체 반환
}

// 팩토리 함수를 사용하여 객체 생성
var person1 = createPerson('John', 30);
var person2 = createPerson('Jane', 25);

// 객체 확인
console.log(person1); // 출력: { name: 'John', age: 30 }
console.log(person2); // 출력: { name: 'Jane', age: 25 }

이 예시에서는 createPerson이라는 팩토리 함수를 정의하고, 이 함수는 이름과 나이를 받아서 새로운 객체를 생성하여 반환합니다. 함수가 호출될 때 새로운 빈 객체를 생성하고, 프로퍼티를 설정한 후 해당 객체를 반환합니다. 이 방법을 통해 this를 사용하지 않고도 객체를 생성하고 프로퍼티를 설정할 수 있습니다.

엄격 모드란?

엄격 모드(Strict Mode)는 JavaScript의 더 엄격한 버전을 나타내며, 코드를 더 안전하고 실수를 줄이기 위한 목적으로 도입되었습니다. 엄격 모드를 사용하면 일부 JavaScript의 기능이 변경되고 몇 가지 제한이 추가됩니다.

주요 특징과 제한사항은 다음과 같습니다:

  1. 기능 변경:

    • 변수 선언의 누락: var, let, const 키워드를 사용하지 않고 변수를 선언하면 에러가 발생합니다.
    • 의도하지 않은 전역 변수의 생성: 변수를 선언하지 않고 값을 할당하면 전역 변수가 아닌 지역 변수로 간주합니다.

  2. 보안 향상:

    • eval() 사용 제한: eval() 함수의 사용이 제한됩니다. 엄격 모드에서는 eval() 함수가 호출된 컨텍스트의 지역 변수를 공유하지 않습니다.
    • with 문 사용 금지: with 문이 사용되지 않도록 제한됩니다.

  3. 문법 엄격화:

    • 함수의 매개변수 중복 허용 금지: 함수의 매개변수 이름이 중복되면 문법 에러가 발생합니다.
    • delete 연산자의 사용 제한: 일부 속성을 삭제할 수 없도록 제한됩니다.
    • this의 암시적인 바인딩 제한: 전역 객체를 가리키지 않고, 엄격 모드 내에서는 함수 호출 시 this가 undefined가 됩니다.

엄격 모드는 "use strict"; 라는 문자열을 스크립트 파일이나 함수의 맨 위에 추가하여 활성화할 수 있습니다. 이를 사용하면 해당 스크립트나 함수 내에서만 엄격 모드가 적용됩니다. 엄격 모드는 코드의 안전성과 가독성을 높이는 데 도움이 되므로, 가능한 경우에는 사용하는 것이 좋습니다.

전역 변수와 지역 변수 차이?

전역 변수(Global variable)와 지역 변수(Local variable)는 변수가 선언된 위치와 그 변수의 범위에 따라 구분됩니다.

  1. 전역 변수 (Global variable):

    • 전역 변수는 프로그램의 어느 곳에서나 접근할 수 있는 변수입니다.
    • 전역 변수는 코드의 모든 부분에서 사용할 수 있으며, 전역 범위(global scope)에 속합니다.
    • 전역 변수는 보통 전역 객체(global object)에 속하게 됩니다. 브라우저 환경에서는 전역 객체가 window입니다.

  2. 지역 변수 (Local variable):

    • 지역 변수는 특정한 블록(scope) 안에서만 접근할 수 있는 변수입니다. 보통 함수 내에서 선언됩니다.
    • 지역 변수는 해당 함수의 범위 내에서만 사용할 수 있으며, 함수의 외부에서는 접근할 수 없습니다.
    • 지역 변수는 해당 함수가 호출될 때마다 새로 생성되고, 함수 실행이 종료되면 소멸됩니다.

간단한 예시를 통해 설명하면:

var globalVariable = 'I am a global variable'; // 전역 변수

function exampleFunction() {
    var localVariable = 'I am a local variable'; // 지역 변수

    console.log(globalVariable); // 전역 변수 접근 가능
    console.log(localVariable); // 지역 변수 접근 가능
}

exampleFunction(); // 함수 호출

console.log(globalVariable); // 전역 변수 접근 가능
console.log(localVariable); // Error: localVariable is not defined (지역 변수는 함수 외부에서 접근 불가)

위 예시에서 globalVariable은 전역 변수이므로 함수 내부와 외부에서 모두 접근할 수 있습니다. 반면에 localVariable은 함수 내부에서만 접근할 수 있으며, 함수 외부에서는 접근할 수 없습니다.


느낀점

챗지피티에서 꼬리질문을 통해서 헷갈렸던 개념에 대해서 효율적으로 잘 알 수 있었다. 앞으로 개념은 계속 반복해서 익혀야겠지만, 모르는 부분이 나올 때마다 잘 활용해서 자유롭게 사용해야겠다는 생각이 들었다. 구글링해서 직접 찾는 것도 중요하지만, 챗지피티를 잘 활용하는 것도 구글링의 일종이라고 느꼈고 앞으로는 어떻게 더 질문을 구체적으로 잘 할 수 있을지 고민해야겠다는 생각이 든다.

profile
liinyeye
웹 프론트엔드 UXUI
이전 포스트

[git] github의 파일/폴더 삭제하기

다음 포스트

[JavaScript] 자바스크립트 ES6 문법 공부 (1)

0개의 댓글