Will's Log

안녕하세요, 윌입니다. 오늘은 타입 가드에 대한 설명과 사용 이유에 대해 파헤쳐 보겠습니다. 타입 가드에 대해 이해하기 위해선 먼저 Interface, 유니온 타입( | 연산자) 등에 대한 선행 학습이 필요합니다. 아래와 같은 2개의 interface가 있습니다. Developer와 Person은 name을 가지지만 각 skill, age를 가진다는 점에서 다릅니다.interface Developer { name: string; skill: string;}interface Person { name: string; age: number;}  tony라는 객체를 만들어보겠습니다. tony는 age, skill을 모두 가지는 객체입니다. 그러나 tony.skill 또는 tony.age로 접근 시 타입에..

안녕하세요, 윌입니다. 이번엔 비교 연산자에 대한 정리입니다. 자바스크립트에서 비교 연산자는 두 값의 관계를 비교하여 결과를 반환하는 연산자입니다. 비교 연산자는 주로 조건문이나 반복문에서 많이 사용됩니다. 자바스크립트에는 여러 가지 비교 연산자가 있으며, 각각의 의미와 용법은 다음과 같습니다:  1. 동등 연산자 (==)두 값이 같은지 비교하며, 필요에 따라 형 변환을 수행합니다. console.log(5 == '5'); // true (숫자와 문자열을 비교하며 형 변환이 발생)console.log(0 == false); // true (숫자 0과 불리언 값을 비교하며 형 변환이 발생)  2. 일치 연산자 (===)두 값이 같은지 비교하며, 형 변환을 수행하지 않습니다. 값과 자료형이 모두 같아야 합니..

안녕하세요, 윌입니다. undefined, null, NaN에 대해 정리해봅니다. 자바스크립트에서 undefined, null, NaN는 각각 고유한 의미와 용도를 가진 특수한 값입니다. 이 값들은 각각의 상황에서 다르게 동작하며, 그 차이점을 이해하는 것이 중요합니다. 1. undefinedundefined는 선언되었지만 값이 할당되지 않은 변수에 자동으로 할당되는 값입니다. 또한, 함수가 명시적으로 값을 반환하지 않을 때도 undefined가 반환됩니다. 특징선언은 되었지만 초기화되지 않은 변수의 기본 값:let a;console.log(a); // undefined객체의 존재하지 않는 프로퍼티에 접근할 때:let obj = {};console.log(obj.property); // undefined..

안녕하세요, 윌입니다. 이번엔 템플릿 리터럴에 대한 정리를 해보려고 합니다. 템플릿 리터럴(Template Literal)은 ES6(ECMAScript 2015)에서 도입된 문자열 리터럴의 한 형태로, 백틱(backtick)(```)으로 감싸여 있으며, 보간(interpolation)과 여러 줄 문자열을 지원하는 것이 특징입니다. 템플릿 리터럴을 사용하면 가독성이 높고 유연한 문자열 처리가 가능합니다. *참고 리터럴이란? https://jsdnl123.tistory.com/31#google_vignette 리터럴(Literal)과 변수(Variable)의 차이는 무엇인가?안녕하세요, 윌입니다. 개발 강의를 듣거나 관련 서적을 접하다보면 꼭 "리터럴"이라는 단어를 볼 수 있습니다. 이 단어는 꼭 "변수"와..

안녕하세요, 윌입니다. 개발 강의를 듣거나 관련 서적을 접하다보면 꼭 "리터럴"이라는 단어를 볼 수 있습니다. 이 단어는 꼭 "변수"와 비교하여 사용이 되는데요,  리터럴과 변수는 모두 프로그래밍에서 값을 다루는 중요한 요소이지만, 둘 사이에는 분명한 차이가 있습니다. 아래에서 리터럴과 변수의 정의, 역할, 차이점을 설명하겠습니다.  리터럴(Literal) 정의: 리터럴은 소스 코드에서 직접 값을 나타내는 표현식입니다. 리터럴 자체가 값을 의미하며, 프로그램 실행 시 그 값이 변하지 않습니다.42 // 숫자 리터럴"Hello" // 문자열 리터럴true // 불리언 리터럴[1, 2, 3] // 배열 리터럴{ name: "Alice", age: 30 } // 객체 리터럴 변수 (V..

*아직 작성 중입니다. '문(statement)'에 대한 내용 추가 예정 자바스크립트를 배우며 맞이하게되는 용어는 자바스크립트만의 것이 아니라 컴퓨터 공학 대부분에서 사용되는 용어다. 용어에 대한 개념 이해는 개발자 간 커뮤니케이션 뿐만 아니라 문서 및 매뉴얼 작성에도 상당한 도움이 된다. 요즘 공부를 하며 용어에 대한 이해가 부족한 듯 싶어 정리하고자 한다. 개념을 이해한다는 것은 용어를 정확히 이해하고 설명할 수 있다는 것이다. 1. 값 값(value)은 식(표현식, expression)이 평가(evaluate)되어 생성된 결과를 말한다. 평가란 식을 해석해서 값을 생성하거나 참조하는 것이다. 아래 예제의 식은 평가되어 수자 값 30을 생성한다. 10+20; // 30 변수는 하나의 값을 저장하기 위..

안녕하세요, Will 입니다. 오늘은 배열(Array)의 forEach를 설명하도록 하겠습니다. 1. forEach 사용법 아래 코드를 보자 1 2 3 4 5 6 var arr = [1,2,3,4,2]; arr.forEach(function(element, index, all){ console.log(`${element}: ${index} :${all}`); console.log(this.ten); },{ten:10}); Colored by Color Scripter cs forEach문은 위와 같이 function을 Parameter로 가지며, 콜백 함수라고 한다. 콜백 함수는 배열의 element 하나 씩 읽어가며 호출된다. 즉 element 수(Length) 만큼 호출된다. 콜백 함수의 Parame..

일급 객체 다음과 같은 조건을 만족하는 객체를 일급 객체라 한다. 1. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 2. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 3. 함수의 매개변수에 전달할 수 있다. 4. 함수의 반환값으로 사용할 수 있다. 함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미. - 즉 함수는 값을 사용할 수 있는 곳(변수 할당문, 객체의 프로퍼티 값, 배열의 요소, 함수 호출의 인수, 함수 반환문) 이라면 어디든지 리터럴로 정의할 수 있음. 런타임에 함수 객체로 평가됨. - 일급 객체로서 함수의 가장 큰 특징은 일반 객체와 같이 함수의 매개변수로 전달 가능하며, 함수의 반환 값으로 사용 가능하는 점임. 이는 함수형 프로그래밍을 가..

continue 문은 반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동시킨다. break 문처럼 반복문을 탈출하지는 않는다. 아래는 string 값을 for문으로 돌며 search 값이 몇 개 있는지 확인해보는 코드이다. 'Hello World' 내 'l'이 3개 있으므로 count는 3이 된다. const string = 'Hello World.' const search = 'l' let count = 0 // 문자열은 유사 배열이므로 for문으로 순회할 수 있다. for(let i=0; i

오늘은 JavaScript Break 문에 대해 작성해보겠다. 앞서 포스팅한 반복문 페이지에서 switch 문과 while 문에서 살펴보았듯이 break 문은 코드 블록을 탈출한다. 좀 더 정확히 표현하자면 코드 블록을 탈출하는 것이 아니라 레이블 문, 반복문(for, for...in, for...of, while, do...while) 또는 switch 문의 코드 블록을 탈출한다. 그 외 break 문 사용 시 SyntaxError(문법 에러)가 발생한다. 아래와 같이 if문에 break를 사용하면 Syntax에러가 발생한다. if(true){ break; // Uncaught SyntaxError: Illegal break statement } 참고로 레이블 문이란 식별자가 붙은 문을 말한다. // ..