Javascript203

• 

  [JavaScript]프로토타입 체인(Prototype Chain) 프로토타입 체인(Prototype Chain) JavaScript에서 변수를 객체(배열, 객체, 함수 등)로 선언하면 상위 객체의 프로퍼티를 호출할 수 있는데, 여기서 말하는 상위 객체를 프로토타입이라고 말합니다. var arr = []; // 배열을 할당했으므로 프로토타입은 Array var obj = {}; // 객체를 할당했으므로 프로토타입은 Object console.dir(arr); console.dir(obj); [실행 결과] 그리고 상위 객체의 프로퍼티를 호출할 수 있도록 해주는 메커니즘을 프로토타입 체인(Prototype Chain)이라고 말합니다. var arr = []; var obj = {}; arr.push(1); // Array는 push() 함수를 사용할 수 있음 obj.push.. JavaScript/함수 2022. 7. 5.

• 

  [JavaScript]함수와 this(Function and this) 전역 객체 JavaScript 함수 내부에서 this를 사용한 경우 this는 전역 객체에 바인딩되며, Chrome과 같은 브라우저에서 JavaScript 코드를 실행하는 경우 전역 객체는 window 객체입니다. 다음 예제를 Chrome 개발자 도구 콘솔 창에서 실행 후 함수 내부의 this가 어떻게 바인딩되는지 확인해봅시다. function show() { console.log(window === this); } show(); [실행 결과] Chrome과 같은 브라우저에서 전역 객체는 window 객체라고 설명했으며, 함수 내부의 this는 전역 객체에 바인딩된다고 언급했습니다. 즉, 브라우저에서 함수 내부의 this는 window 객체입니다. 다음은 함수가 아닌 변수를 선언하는 경우에 대해 알아봅시.. JavaScript/함수 2022. 7. 4.

• 

  [JavaScript]생성자 함수와 this(Constructor Function and this) 생성자 함수 JavaScript에서 객체를 생성하는 방법은 객체 리터럴 방식과 생성자 함수를 이용하는 두 가지 방법이 존재합니다. 생성자 함수에 대한 내용은 아래 포스팅에서 자세하게 설명합니다. [JavaScript]생성자 함수(Constructor Function) 생성자 함수(Constructor Function)란? 생성자 함수는 JavaScript에서 객체를 생성하기 위해 사용되는 특수한 함수입니다. 생성자 함수로 객체를 생성하기 위해서는 new 연산자를 호출합니다. 다음 예제는 developer-talk.tistory.com [객체 리터럴 방식] const person = { name: '둘리', age: 20 } [생성자 함수] function Person(name, age) { this.na.. JavaScript/함수 2022. 7. 4.

• 

  [JavaScript]메서드와 this(Method and this) JavaScript에서 객체의 프로퍼티가 함수인 경우에는 해당 프로퍼티를 메서드라고 말합니다. 이번 포스팅은 메서드에서 this가 어떻게 동작하는지 설명합니다. this 바인딩 메서드에 사용된 this는 메서드를 호출한 객체로 바인딩됩니다. 즉, 현재 객체를 나타냅니다. 다음 예제를 살펴봅시다. let obj = { strValue: 'Hello', normalFunc: function() { console.log(this.strValue) } } obj.normalFunc(); // Hello 메서드의 this는 현재 객체를 나타내므로 this는 obj를 가리킵니다. 따라서, obj 객체의 strValue 프로퍼티의 값이 콘솔에 출력되었습니다. 다른 객체에 할당 다음 예제는 객체에 메서드를 동적으로 추.. JavaScript/함수 2022. 7. 4.

• 

  [JavaScript]배열 그룹화하는 방법 이번 포스팅은 객체로 구성된 배열을 그룹화하는 방법을 소개합니다. 샘플 데이터 다음은 이번 포스팅에서 예제로 사용될 샘플 데이터입니다. const fruits = [ { name: 'banana', date: '2021', price: 10000 }, { name: 'banana', date: '2022', price: 20000 }, { name: 'apple', date: '2021', price: 15000 }, { name: 'apple', date: '2022', price: 25000 }, { name: 'orange', date: '2020', price: 40000 }, { name: 'grape', date: '2020', price: 25000 } ]; fruits라는 배열에는 과일의 .. JavaScript/배열 2022. 7. 4.

• 

  [JavaScript]변수가 정의되었는지 확인하는 방법 변수의 상태 변수가 정의되었는지 확인하는 방법을 소개하기 전에 변수의 상태에 대해 알아봅시다. 변수는 "정의되거나 정의되지 않음" 또는 "값이 초기화되었거나 초기화되지 않음"이라는 상태를 가집니다. 다음은 변수의 정의와 초기화에 대해 설명합니다. 변수 정의 변수가 유효한 범위에서 선언된 경우 변수는 정의되었다고 말합니다. 다음 예제는 변수를 선언하는 일반적인 방법을 보여줍니다. const str = 'hello'; let num = 100; 반대로 유효한 범위에서 선언되지 않은 변수를 사용하는 경우 변수가 정의되지 않았다고 말할 수 있습니다. 다음 예제는 선언되지 않은 변수를 사용하는 경우입니다. str; // 에러 발생 num; // 에러 발생 if(false) { obj; } [에러 내용] str과 .. JavaScript/Tip 2022. 7. 3.

• 

  [JavaScript]함수와 메서드(Function and Method) C#, Java와 같은 객체 지향 프로그래밍(OOP;Object-oriented programming) 언어를 사용하다가 JavaScript를 사용하면 함수(Function)와 메서드(Method)에 대해 혼동될 수 있습니다. JavaScript에서 함수와 메서드는 비슷해 보이지만 다른 개념입니다. 함수와 메서드의 차이를 알고 있다고 코드를 작성하는 실력이 향상되지는 않지만, 모르면 곤란한 상황이 발생할 수 있습니다. 따라서, 이번 포스팅에서는 JavaScript에서 함수와 메서드의 차이를 알아봅시다. 함수와 메서드 함수와 메서드의 차이점은 호출 방식에 따라 다릅니다. 함수를 호출하는 객체가 있는 경우 메서드라고 말하며, 함수를 호출하는 객체가 없는 경우 함수라고 말합니다. 다음 예제를 통해 알아봅시다... JavaScript/함수 2022. 7. 3.

• 

  [JavaScript]함수의 리턴값 return문이 없는 함수 JavaScript는 함수에 return문을 작성하지 않아도 값이 반환됩니다. Chrome 개발자 도구의 콘솔에서는 JavaScript 코드를 작성할 수 있는데, 다음 예제처럼 즉시 실행 함수를 사용하면 Hello와 undefined가 출력되는 것을 확인할 수 있습니다. Chrome 개발자 도구는 코드를 실행 후 함수의 반환 값을 출력합니다. 따라서, undefined는 즉시 실행 함수의 반환 값을 의미합니다. 이러한 동작은 함수 표현식에서도 동일하게 발생합니다. 그렇다면, ES6에 도입된 화살표 함수는 어떻게 동작할까요? 마찬가지로, undefined가 반환됩니다. 다음은 함수에 return문을 작성 후 함수를 호출합니다. 이번에는 undefined를 출력하지 않고 Hi라는 .. JavaScript/함수 2022. 7. 1.

• 

  [JavaScript]유사 배열 객체(Array-like Objects) 배열의 length 프로퍼티 유사 배열 객체를 설명하기 전에 배열의 length 프로퍼티에 대해 살펴봅시다. length 프로퍼티는 배열의 길이를 제공하지만, 몇 가지 트릭이 존재합니다. 다음 예제를 통해 length 프로퍼티가 어떻게 계산되는지 살펴봅시다. let arr = []; console.log('arr.length: ' + arr.length); arr[0] = 0; arr[1] = 1; console.log('arr.length: ' + arr.length); arr[10] = 10; console.log('arr.length: ' + arr.length); 실행 결과 배열의 length 프로퍼티는 배열 요소의 개수가 아닌 맨 마지막 인덱스에 1을 더한 값을 반환합니다. 2~9번째 인덱스를 .. JavaScript/객체 2022. 6. 29.

• 

  [JavaScript]함수의 length, name 프로퍼티 함수는 특별한 객체 JavaScript에서 함수는 객체입니다. 객체와 마찬가지로 함수에는 프로퍼티와 함수가 존재하며, 함수를 변수, 배열, 객체에 할당하거나 다른 함수에 인수로 전달할 수 있습니다. 다음 예제는 typeof와 instance 연산자를 사용하여 Add() 함수가 객체 인스턴스인지 확인합니다. function Add(a, b) { return a + b; } console.log(typeof Add); // function console.log(add instanceof Object); // true console.log(add instanceof Function); // false typeof 연산자는 object가 아닌 function을 반환했는데, 이러한 이유는 함수는 일반 객체보다 특.. JavaScript/함수 2022. 6. 28.

• 

  [JavaScript]익명 함수(Anonymous Functions) 익명 함수 JavaScript의 익명 함수는 이름이 없는 함수입니다. 함수 표현식으로 익명 함수를 변수에 할당하지 않거나 또는 익명 함수를 소괄호로 감싸지 않으면 다음과 같이 함수 이름이 필요하다는 구문 오류가 발생합니다. function() { console.log('Hello'); }; 에러 내용 구문 오류를 해결하기 위해 익명 함수를 변수에 할당하거나 익명 함수를 소괄호로 감쌉니다. 다음 예제는 익명 함수를 소괄호로 감싸며, 함수 표현식이 반환되는 것을 확인할 수 있습니다. (function() { console.log('Hello'); }); 실행 결과 다음 예제는 익명 함수를 변수에 할당 후 함수를 호출합니다. let hello = function() { console.log('Hello'); .. JavaScript/함수 2022. 6. 28.

• 

  [JavaScript]함수 생성 방법 JavaScript에서 함수 생성 방법 JavaScript에서 함수를 생성하는 방법은 네 가지가 있습니다. - 함수 선언문(function statement) - 함수 표현식(function expression) - 화살표 함수(arrow function) - Function 생성자(Function constructor) 네 가지 방법들은 함수를 생성한다는 점은 동일하지만, 미묘한 차이점이 존재합니다. 함수 선언문 다음 예제처럼 함수 선언문 방식으로 함수를 생성할 수 있습니다. function Add(a, b) { return a + b; } console.log(Add(10, 20)); // 30 함수 선언문은 function 키워드로 시작하며, function 키워드 뒤에 함수명, 매개변수 리스트, .. JavaScript/함수 2022. 6. 27.