Javascript203

• 

  [JavaScript]rest와 spread 차이 rest 매개변수 rest 매개변수는 모든 요소를 배열로 모은 것이며, 여러 개의 함수 인수를 전달하는 경우 사용됩니다. function printNumber(one, two, ...rest) { console.log(one); console.log(two); console.log(rest); } printNumber(1, 2, 3, 4, 5, 6, 7); 실행 결과 위 예제에서 인수 one은 1을 참조하며 two는 2를 참조하며, 나머지 매개변수인 ...rest는 1과 2 이후에 전달된 모든 인수(3, 4, 5, 6, 7)를 참조합니다. 다음은 rest 매개변수를 구조 분해(destructuring)에 사용하는 예제입니다. let arrNumber = [1, 2, 3, 4, 5]; let [firstN.. JavaScript/JavaScript 문법 2021. 12. 14.

• 

  [JavaScript]pipe 함수와 compose 함수 사용 방법 JavaScript 함수형 프로그래밍에서 유용하게 사용되는 pipe 함수와 compose 함수를 소개합니다. 목차 pipe(), compose() 함수를 사용하지 않는 경우 pipe() 함수 compose() 함수 pipe(), compose() 함수를 사용하지 않는 경우 pipe 함수는 n개의 함수를 결합합니다. pipe 함수는 왼쪽에서 오른쪽으로 진행되며, 최종적으로 마지막 함수를 호출합니다. 다음은 객체의 name 속성을 반환하는 함수입니다. getPersonName = ( person ) => person.name; getPersonName({name: 'Hong Gil Dong'}); // 'Hong Gil Dong' 그리고 문자열을 대문자로 변환하는 함수를 작성합니다. uppercase = (.. JavaScript/함수 2021. 12. 13.

• 

  [JavaScript]생성자 함수(Constructor Function) 생성자 함수(Constructor Function)란? 생성자 함수는 JavaScript에서 객체를 생성하기 위해 사용되는 특수한 함수입니다. 생성자 함수로 객체를 생성하기 위해서는 new 연산자를 호출합니다. 다음 예제는 Date()라는 생성자 함수와 new 연산자를 사용하여 Date 객체를 생성합니다. var date = new Date(); JavaScript는 Date 생성자 이외에도 Array, Boolean, Error, Function, Number 등 다양한 내장 생성자를 제공합니다. 생성자 함수 만들기 개발자가 직접 생성자 함수를 만들어야 하는 경우가 존재합니다. 다음 예제는 UserInfo라는 생성자 함수를 구현합니다. // 생성자 함수 function UserInfo() { this... JavaScript/함수 2021. 12. 13.

• 

  [JavaScript]call, apply, bind 함수 사용 방법 JavaScript에서 객체는 고유한 속성과 함수를 가질 수 있습니다. student 객체는 teacher 객체의 printValue() 함수를 사용할 수 없으며 반대의 경우도 마찬가지입니다. const student = { name: '둘리', age: 20, printValue: function() { return `${this.name} is ${age} years old.`; } }; const teacher = { name: '또치', age: 50, printValue: function() { return `${this.name} is ${age} years old.`; } }; 그러나 call(), apply(), bind() 함수를 사용하면, 함수가 해당 객체에 속한 것처럼 함수를 호출할 .. JavaScript/함수 2021. 12. 8.

• 

  [JavaScript]다양한 반복문(for, forEach, for of, for in) JavaScript의 4가지 for 반복문(for, forEach, for...of, for...in)의 차이점을 소개합니다. 목차 for...in문 for...of문 forEach문 for문 요약 for...in문 for...in문은 객체의 속성을 반복하기 위해서 열거형과 함께 사용되며, EcmaScript6에 도입되었습니다. let userInfo = { name: 'Kang JaeSeong', age: 30, address: 'Busan' }; for (let key in userInfo) { console.log(`${key}: ${userInfo[key]}`); } 실행 결과 배열도 JavaScript에서는 객체이므로 for...in문을 사용할 수 있습니다. let arrNum = [1, 2, .. JavaScript/Tip 2021. 12. 8.

• 

  [JavaScript]객체 속성(writable, enumerable, configurable) 속성의 본질적인 속성 설명자 JavaScript의 객체는 다음과 같이 : 쌍으로 이루어진 존재입니다. const userInfo = { name: 'Kang JaeSeong', age: 30, address: 'Busan' } name이라는 key는 'Kang JaeSeong' value와 매핑되며, age라는 key는 30이라는 value와 매핑됩니다. Object.getOwnPropertyDescriptor() 함수를 사용하면, 객체의 속성에 대한 모든 설명을 확인할 수 있습니다. 다음은 userInfo 객체의 name 속성에 대한 설명자입니다. console.log(Object.getOwnPropertyDescriptor(userInfo, 'name')); 실행 결과 속성 설명자에 value, wr.. JavaScript/객체 2021. 12. 7.

• 

  [JavaScript]객체 변경을 방지하는 방법 JavaScript에서 객체의 속성을 변경하지 못하도록 불변 객체를 만드는 세 가지 방법을 소개합니다. 목차 Object.freeze() 함수 Object.seal() 함수 Object.preventExtensions() 함수 Object.freeze() 함수 Object.freeze() 함수를 사용하여 객체를 동결시켜 수정되는 것을 방지할 수 있습니다. 다음은 Object.freeze() 함수의 기능입니다. 속성 제거 불가능 새로운 속성 추가 불가능 기존 속성 값 변경 불가능 객체의 속성은 delete 키워드로 제거할 수 있습니다. 하지만, Object.freeze() 함수를 사용하여 동결시킨 객체의 속성은 제거되지 않습니다. const userInfo = { name: 'Kang', age: 30 }.. JavaScript/JavaScript 문법 2021. 12. 6.

• 

  [JavaScript]객체(Object)의 freeze(), seal() 함수의 차이점 이번 포스팅에서는 JavaScript의 Object.freeze() 함수와 Object.seal() 함수의 차이점을 소개합니다. 목차 JavaScript의 불변성 Object.freeze() 함수 Object.seal() 함수 JavaScript의 불변성 JavaScritp의 불변성은 더 이상 무언가를 변경할 수 없는 상태입니다. const 키워드로 변수를 선언할 경우 해당 변수는 상수로 정의되며 값을 변경할 수 없습니다. const testValue = 'testValue'; testValue = 'Value Update'; 실행 결과 하지만, 객체는 변수와는 다르게 동작합니다. 객체는 값을 가지지 않으며, 값을 참조합니다. 변수는 Call by value 객체는 Call by reference 값을 .. JavaScript/JavaScript 문법 2021. 12. 6.

• 

  [JavaScript]제너레이터 함수 응용(반복, 비동기, 옵저버) 제너레이터 함수(Generator Function)란? 제너레이터 함수(Generator Function)는 함수가 도중에 중간에 일시 중지한 다음 중지된 위치에서 로직이 실행되는 함수입니다. 자세한 사용 방법은 아래 링크를 클릭하여 게시된 포스팅을 확인해주세요. ☞ 제너레이터 함수(Generator Function) 이해하기 이번 포스팅에서는 제너레이터 함수를 실제로 응용 및 활용하는 방법에 대해 소개합니다. 목차 반복자(Iterables) 구현 비동기 함수 구현 옵저버로 사용 참조 사이트 반복자(Iterables) 구현 제너레이터는 반복 가능한 객체(iterable Object)이므로 반복자(iterator)를 구현할 수 있습니다. 다음은 반복자를 사용한 일반 함수입니다. const iterableO.. JavaScript/함수 2021. 12. 5.

• 

  [JavaScript]제너레이터 함수(Generator Function) 사용 방법 제너레이터 함수(Generator Function)란? 제너레이터 함수(Generator Function)는 함수가 도중에 중간에 일시 중지한 다음 중지된 위치에서 로직이 실행되는 함수입니다. 제너레이터 함수는 function 키워드 뒤에 * 를 추가하여 제너레이터 함수를 정의합니다. 목차 일반 함수 동작 과정 제너레이터 함수 동작 과정 일반 함수 동작 과정 일반 함수는 return문을 만나거나 작업을 완료 하기 전에 동작을 멈출 수 없습니다. 즉, return문을 만나지 않는 이상 일반 함수는 함수 본문의 마지막 줄이 실행됩니다. 다음은 return문이 존재하지 않는 일반 함수입니다. function printConsole() { console.log('일반 함수는'); console.log('retu.. JavaScript/함수 2021. 12. 5.

• 

  [JavaScript]eval 함수의 문제점 eval 함수란? eval() 함수는 전달된 문자열을 JavaScript 코드로 해석하여 해석된 코드를 실행합니다. 자세한 사용 방법은 아래 링크를 클릭하여 게시된 포스팅을 확인해주세요. ☞ eval 함수 사용법 eval() 함수는 전달된 문자열을 코드로 실행하는 강력한 기능이 존재하지만, 강력한 기능에는 위험성이라는 대가가 존재합니다. eval() 함수는 성능, 보안, 디버깅의 문제라는 위험성이 존재합니다. 대부분의 개발자들은 eval() 함수 사용하는 것을 반대하며, eval() 함수를 사용해야 하는 경우 다른 대안 방법이 존재하는지 생각하고 고민합니다. 이번 포스팅에서는 eval 함수의 문제점에 대해 소개합니다. 목차 성능 보안 디버깅의 어려움 성능 eval() 함수에 전달된 문자열은 동적입니다. .. JavaScript/함수 2021. 12. 4.

• 

  [JavaScript]eval 함수 사용법 eval 함수란? eval() 함수는 전달된 문자열을 JavaScript 코드로 해석하여 해석된 코드를 실행합니다. 만약, 해석하지 못하면 SyntaxError가 발생합니다. eval() 함수는 JavaScript의 전역 객체이며, 해석된 코드에서 마지막 표현식 또는 구문 값을 반환합니다. 이때, 값이 존재하지 않으면 undefined를 반환합니다. 목차 eval() 함수 사용 방법 엄격 모드의 eval() 함수 eval() 함수 내부에서 함수를 정의 eval() 함수 사용 방법 다음은 eval() 함수를 사용하여 콘솔에 메시지를 출력하는 코드입니다. eval("console.log('Hello World')"); 실행 결과 eval() 함수는 다음 코드처럼 여러 JavaScript문을 실행할 수 있습니.. JavaScript/함수 2021. 12. 3.