전체 글787

• 

  [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.

• 

  개발 블로그 방향성 개발 또는 코딩을 주제로 블로그를 시작하려면 블로그 방향성부터 잡아야 한다. 자신의 성향과 맞지 않은 플랫폼을 사용했다가 다른 플랫폼으로 이전하거나 방향성이 잘못되어 블로그를 접는 경우가 많기 때문에 블로그 방향성을 잡는다는 것은 상당히 중요하다. 그렇다고 너무 신중하게 고민했다가 시작조차 못하는 분들도 존재한다. 나는 2022년 4월 16일 '개발 블로그를 시작하려는 당신에게'라는 제목의 포스팅에서 개발 블로그에 대해 언급하기는 했으나 자세하게 언급하지 않았다. 개발 블로그를 시작하려는 당신에게 이번 포스팅은 개발 또는 코딩을 주제로 블로그를 시작하려는 분들에게 감히 1년 차 블로거가 블로그를 시작한 계기, 생각, 고민, 현실에 대해 이야기를 전달하고자 한다. 개인적인 생각과 의견 developer-t.. 티스토리/티스토리 가이드 2022. 7. 1.

• 

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

• 

  [티스토리]카테고리 클릭시 접기/펼치기 티스토리의 카테고리 티스토리의 카테고리는 기본적으로 펼쳐져있으며, 관리자 메뉴에서 접기/펼치기 설정하는 기능이 없다. 따라서, 카테고리가 추가될수록 웹사이트 디자인이 상당히 지저분하게 보일 수 있고 카테고리가 너무 많아서 방문자는 원하는 정보를 찾는데 어려움을 겪을 수 있다. 특히 수익형 블로그를 운영하는 사람들에게는 상당히 치명적인데, 카테고리 하단에 광고를 배치하는 경우 카테고리가 너무 길어서 광고가 노출되지 않을 수 있다. 즉, 사이드바에 광고를 배치하는 것은 무의미한 행위라는 것이다. JB 스킨, hELLO 스킨, 미넴 스킨에서는 카테고리 접기/펼치기 기능을 지원한다. 카테고리 접기/펼치기 기능을 원하는 경우 해당 스킨을 사용하면 되고 직접 구현하고 싶은 경우 해당 포스팅 또는 서근님, 제이스토리.. 티스토리/티스토리 스킨 제작 2022. 6. 30.

• 

  [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.