티스토리

공부

검색하기

블로그 홈

공부

codingstudy95.tistory.com/m

김검정 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

자바스크립트에서의 this 졸업하기 처음 회사에 갔을때 this에 대해 잘 몰라서 로직을 파악하기 너무 힘들었던 기억이 난다.. 그 이후 this 에 대해서 찾아보기도 많이 찾아보고 잘 알고 있다고 생각했지만 설명하라고 해보면 하기가 막막한것 같아서 this에 관해 확실히 정리하고 넘어가면 좋을것 같아서 이 글을 작성한다. 자바스크립트의 this 란?생각해보면 우리 모두 자기 자신을 "나"라고 부른다. 자바스크립트도 비슷하다. 함수나 객체 안에서 this는 "내가 누구인가?"를 알려주는 역할을 한다. 즉 "내 자신" 또는 "내가 속한 주체"를 가리키는 특별한 키워드이다. this를 왜 사용할까? 코드를 작성할 때 객체의 내부 함수에서 매번 객체의 이름을 쓰는 대신 this를 사용하면 코드가 더 깔끔해지고, 객체의 이름이 바뀌어도 수정이 .. 공감수 1 댓글수 1 2025. 3. 14.
원시 값과 객체의 비교 자바스크립트가 제공하는 7가지 데이터 타입(숫자, 문자열, 불리언, null, undefine, 심벌, 객체 타입)은 크게 원시 타입(primitive type)과 객체 타입(object/reference type)으로 구분할 수 있다.그렇다면 데이터 타입을 원시 타입과 객체 타입으로 구분하는 이유는 무엇일까?원시 타입과 객체 타입은 크게 세 가지 측면에서 다르다.원시 타입의 값, 즉 원시 값은 변경 불가능한 값(immutable value)이다. 이에 비해 객체(참조) 타입의 값, 즉 객체는 변경 가능한 값(mutable value)이다.원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 이에 비해 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장된다.원시.. 공감수 0 댓글수 1 2024. 7. 24.
함수(2) #함수 생성 시점과 함수 호이스팅// 함수 참조console.dir(add); // f add(x, y)console.dir(sub); // undefined// 함수 호출console.log(add(2, 5)) // 7console.log(sub(2, 5)) // TypeError : sub is not a function// 함수 선언문function add(x, y) { return x + y;}// 함수 표현식var sub = funtion (x, y) { return x - y;};위와 같이 함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출할 수 있다. 그러나 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출할 수 없다. 이는 함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수.. 공감수 0 댓글수 0 2024. 7. 21.
반응형 웹(9) - 모듈화 디자인 반응형 웹 개발의 대세는 '페이지 만들기'에서 '컴포넌트 만들기'로 이동했다고 봐도 무방하다. 웹 개발(또는 프로그래밍)에 있어 컴포넌트(Component)란 독립적이고 재사용이 가능한 모듈을 뜻한다.컴포넌트 기반으로 웹을 제작하면 마치 블록 장난감을 조립하듯 각각의 컴포넌트 간 조합을 이용해 화면을 구성할 수 있다. 모듈화된 디자인은 작업 효율에 많은 도움이 된다. 여러 개의 페이지는 각각의 다양한 레이아웃을 가지지만, 페이지를 구성하는 컴포넌트의 형태는 비슷한 경우가 많기 때문에 컴포넌트에 초점을 맞추어 웹을 만들면 일이 줄게 된다. 모듈화란 ? 개별 컴포넌트를 하나의 조립 부품(모듈)으로 보고 작업하는 것 모듈화가 주는 이점반응형 컴포넌트를 만들고, 그것들을 조립해 하나의 페이지를 만들면 페이지.. 공감수 0 댓글수 0 2024. 7. 19.
반응형 웹(7) - 가변 이미지 이미지 요소에도 상대 단위 em, vw, % 등을 얼마든지 사용할 수 있다. 이때 주의할 점은 브라우저가 대개 이미지의 비율을 유지한다는 점, 그리고 이미지가 무작정 커지는 것을 경계해야 한다는 점입니다. max-widthCSS의 max-width 속성은 너비의 최대값을 지정하여 요소의 너비가 크 이상 커지지 않게 한다.img{ max-width: 200px;}/* 부모 요소의 크기에 따라 변하지만 부모 요소의 크기보다는 커질 수 없다. */img{ max-width: 100%;} pictureHTML의 picture 요소를 이용하면 뷰포트의 너비 등 브라우저의 특정 조건에 따라 이미지를 반응형으로 불러 올 수 있다. 정리 공감수 0 댓글수 1 2024. 7. 18.
반응형 웹(6) - 미디어 쿼리 미디어 쿼리(media query)는 미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 장치(기능)입니다. 모든 미디어 쿼리는 다음 두 가지 구성 요소를 지니고 있다미디어 타입조건에 대한 물음(쿼리)@media 미디어_타입 and (조건에_대한_물음) { /* 미디어 타입과 조건을 모두 만족할 때 덮어씌울 스타일 선언문 */} 구체적인 사용 예시@media screen and (max-width: 768px){ // 768px 이하 /* 화면(screen)의 너비가 768px 이하일 경우에 여기에 정의된 스타일 선언문을 추가 적용할 것이다. */}@media screen and (min-wid.. 공감수 0 댓글수 0 2024. 7. 17.
반응형 웹(5) - calc() CSS의 속성값을 기정할 때도 함수 개념을 적용할 수 있다. CSS의 함수는 괄화 안에 인수를 전달하면, 인수에 따른 결과값을 속성에 적용하는 방식으로 작동한다. CSS 함수의 대표선수 calc()CSS 함수의 calc()를 이용하면 계산식의 결과를 속성값으로 지정할 수 있다. calc() 함수는 괄호 안에 표현식 하나를 받고, 표현식의 결과가 최종 값이 된다. 표현식은 단순 계산이면 무엇이든 가능하다. 예를 들어, width: calc(30px - 20px) 이런 식이다. 전송 위 코드를 브라우저에서 확인해보면 브라우저의 크기가 커질수록 전송 버튼의 크기가 늘어나게 된다. 전송 버튼의 크기를 고정해보자. 전송 전송 .. 공감수 0 댓글수 0 2024. 7. 15.
반응형 웹(4) - 가변형 레이아웃 em을 이용해 상대적인 크기의 폰트를 적용할 때처럼, 레이아웃에도 비율에 기반한 개념을 적용할 수 있다. 부모 요소의 크기에 비례해 자식 요소의 크기가 변하는 방식은 가변 레이아웃을 만들 때 흔히 사용되는 방식이다. 그럴 때 사용되는 상대적이고 비례적인 단위는 바로 % (퍼센트) 이다. % % 단위는 백분율 값을 나타낸다. 보통 부모 요소와의 상대적 크기를 지정할때 사용한다. 너비와 높이, 여백 뿐 아니라 글자 크기에도 사용할 수 있다./* 부모 요소의 글자 크기가 100% */font-size: 50%;/* 부모 요소의 높이가 100% */height: 50%;/* 부모 요소의 너비가 100% */width: 50%;margin: 50%;padding: 10%; 아래의 코드로 연습을 해보자 .. 공감수 0 댓글수 2 2024. 7. 14.
반응형 웹(3) - 다양한 상대 단위 앞에서 살펴본 em과 rem은 주변 상황에 따라 그 크기를 달리할 수 있는 가변성을 지니고 있지만, 브라우저나 기기 화면에 크기에 따라 크기가 달라지는 단위는 아니다. 따라서 진정한 반응형 단위라고 할 수 는 없다. 반응하는 단위들 아래 몇 가지 단위들은 뷰포트 크기를 기반으로 값을 계산하여 크기를 결정하는 가변 단위이다.font-size: 1vw; /* 뷰포트 너비의 100분의 1 */font-size: 1vh; /* 뷰포트 높이의 100분의 1 *//* 뷰포트 높이와 너비 중 작은 쪽의 100분의 1 */font-size: 1vmin;/* 뷰포트 높이와 너비 중 큰 쪽의 100분의 1 */font-size: 1vmax; 사용해보자 왕왕 위 소스를 확인해보면 브라우저의 크기에 따라 글씨의 크기.. 공감수 0 댓글수 0 2024. 7. 13.
반응형 웹(2) em & rem 절대 길이 단위 px입문 레벨에서 가장 많이 사용하는 단위인 px(픽셀)은 절대 길이 단위이다. px은 어떤 상황에서도 동일한 값을 유지하므로 가변성이 없다. em과 remem과 rem은 박스에서 텍스트 크기를 조정할 때 사용하는 상대 단위이다. em은 부모 요소의 글꼴 크기를, rem은 루트 요소의 글꼴 크기를 의미한다. 자식 요소의 1em은 20px! 자식 요소의 2em은 40px! 루트 요소는 요소를 말하는 것이며 루트 요소 글자 크기 기본값은 16px이다. em으로 내, 외부 여백 크기를 정할 때는 자기 자신의 글자 크기를 기준으로 한다. 다음예시를 보자 고양이 해당 html 문서를 확인해 보면 '고양이'는 16px로 표시되는 것을 확인할 수 있다. 그렇.. 공감수 0 댓글수 0 2024. 7. 9.
반응형 웹(1) 오늘날 우리는 다양한 기기와 해상도를 통해 웹문서를 열람하고 있다. 따라서 웹문서를 만드는 사람이라면 누구나 특정 기기나 브라우어제 국한되지 않고 다양한 환경에서 동일한 경험을 제공할 수 있는 웹 문서를 만들어야 한다는 요구를 피해갈 수 없게 되었다. 이것을 '반응형 웹' 이라고 부르기로 했다. 반응형 웹이 무엇인지 알아보자. 반응형 웹반응형 웹이란, 다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해가며 반응하는 웹문서 또는 이를 위해 사용하는 기법을 뜻한다. 스마트 모바일 기기의 등장으로, 데스크톱 화면을 위해 존재했던 웹문서의 설계에도 변화가 요구되기 시작했다. 변화의 초기에는 모바일 전용 URL을 제공하는 방법이 주로 사용되었다. 모바일 환경과의 격리가 성공적으로 정착한 사례도 있지만, .. 공감수 0 댓글수 0 2024. 7. 8.
함수(1) # 함수란? 함수는 자바스크립트에서 가장 중요한 핵심 개념이다. 자바스크립트의 핵심 개념인 스코프, 실핸 컨텍스트, 클로저, 생성자 함수에 의한 객체 생성, 메서드, this, 프로토타입, 모듈화 등이 모두 함수와 깊은 관련이 있다.함수는 자바스크립트를 정확하게 이해하고 사용하기 위한 핵심중의 핵심이다.수학의 함수는 "입력(input)을 받아 출력(output)"을 내보내는 일련의 과정이다.예를 들어, f(x, y) = x + y 라는 함수를 정의하고 이 함수에 두 개의 입력 2, 5를 전달하면 함수는 정의된 일련의 과정, 즉 x + y를 실행하여 7을 출력한다. 함수는 마치 재료를 투입받아 제품을 생산하는 기계와 같다. 프로그래밍 언어의 함수도 수학의 함수와 같은 개념이다. 예제)// f(x, y) .. 공감수 0 댓글수 1 2024. 6. 18.
함수 표현식 자바스크립트의 함수는 객체 타입의 값이다. 자바스크립트의 함수는 값처럼 변수에 할당할 수도 있고 프로퍼티 값이 될 수도 있으며 배열의 요소가 될 수도 있다. 이처럼 값의 성질을 갖는 객체를 일급 객체라 한다. 자바스크립트의 함수는 일급 객체다 함수가 일급 객체라는 것은 함수를 값처럼 자유롭게 사용할 수 있다는 의미다.함수는 일급 객체이므로 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다. 이러한 함수 정의 방식을 함수 표현식(function expression)이라 한다. // 함수 표현식var add = function(x, y) { return x + y;}; # 함수 생성 시점과 함수 호이스팅// 함수 참조console.dir(add); // f add(x, y)console.dir(sub.. 공감수 0 댓글수 0 2024. 6. 17.
스코프 스코프(scope 유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다. 스코프는 변수 그리고 함수와 깊은 관련이 있다. 변수는 자신이 선언된 위치에 의해 자신이 유요한 번위, 즉 다른 코드가 변수 자신을 참조할 수 있는 번위가 결정된다. 변수뿐만 아니라 모든 식별자가 그렇다. 다시 말해, 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라 한다. 즉 스코프는 식별자가 유요한 범위를 의미한다. 다음 코드가 어떻게 동작할지 생각해 보자var x = 'global';function foo() { var x = 'local'; console.log(x); //.. 공감수 0 댓글수 3 2024. 6. 14.
전역변수 변수의 생명주기# 지역 변수의 생명주기 변수는 선언에 의해 생성되고 할당을 통해 값을 얻는다. 생성되고 소멸되는 생명주기(life cycle)가 있다.function foo() { var x = 'local'; console.log(x); // local return x;}foo();console.log(x); // ReferenceError : x is not defined; 지역 변수 x는 foo 함수가 호출되기 이전까지는 생성되지 않는다. foo 함수를 호출하지 않으면 함수 내부의 변수 선언문이 실행되지 않기 때문이다.변수 선언은 선언문이 어디에 있든 상관없이 가장 먼저 실행된다. 런타임 이전 단계에서 자바스크립트 엔진에 의해 먼저 실행된다. 하지만 위의 말은 전역 변수에 한정된 것이다.. 공감수 0 댓글수 1 2024. 6. 13.
Promise / async / await Promise란? promise는 비동기 함수가 반환하는 객체이다. 함수의 성공 또는 실패 상태를 알려준다. 콜백은 직접 호출하는 방법 대신, Promise로 콜백을 부를 수 있다. 이런 특징 때문에 Promise를 사용하면 비동기 처리 시점, 비동기 함수의 결과를 쉽게 확인할 수 있고 에러도 어디서 일어났는지 파악하기 편리하다. Promise를 생성하는 방법 function requestPayment(paymentData) { //... return new Promise((resolve, reject) {//Pending 상태 if(isSuccess) { resolve(data)// 성공 상태 } else { reject(error)// 실패 상태 } }) } 위와 같은 코드가 있다고 했을때 리턴 값으.. 공감수 0 댓글수 1 2024. 4. 3.
React 기본 1. Component - Reac의 가장 큰 특징이자 장점은 Component-based, 컴포넌트 기반이라는 것이다. 컴포넌트란 하나의 의미를 가진 독립적인 단위의 모듈로 나만의 HTML이라고 생각할 수 있다. UI의 일부를 제어하는 재사용 가능한 코드이다. 또 JavaScript에서 함수의 역할을 React에게서 담당하는 것과 같다. 함수형 컴포넌트 클래스 컴포넌트 1-1 함수형 컴포넌트 function Welcome(props) { return Hello, {props.name} ; } 위 예시에서 Welcome은 함수형 컴포넌트로, props를 인수로 받아 React 요소를 반환한다. 1-2 클래스 컴포넌트 class Welcome extends React.Component { render() .. 공감수 0 댓글수 0 2024. 3. 14.
모던 자바스크립트 Deep Dive - this 자바스크립트에서 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합접인 자료구조다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 이를 위해 자바스크립트는 this라는 특수한 식별자를 제공한다. this 는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)다. this 를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, .. 공감수 0 댓글수 0 2023. 10. 27.
모던자바스크립트 Deep Dive - 빌트인 객체 자바스크립트 객체는 다음과 같이 크게 3개의 객체로 분류할 수 있다. 표준 빌트인 객체(standard built-in objects/native objects/global objects) : 표준 빌트인 객체는 ECMAScript 사양에 정의된 객체를 말하며, 애플리케이션 전역의 공통 기능을 제공한다. 실행 환경과 관계없이 언제나 사용할 수 있다. 또 전역 객체의 프로퍼티로서 제공된다. 따라서 별도의 선언 없이 전역 변수처럼 언제나 참조할 수 있다. 호스트 객체 (host objects) : 호스트 객체는 ECMAScript 사양에 정의되어 있지 않지만 자바스크립트 실행 환경에서 추가로 제공하는 객체를 말한다. 사용자 정의 객체(user-defined objects) : 사용자 정의 객체는 표준 빌트인.. 공감수 0 댓글수 1 2023. 10. 10.
모던 자바스크립트 Deep Dive - 함수와 일급 객체 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다 변수나 자료구조(객체, 배열 등)에 저장할 수 있다 함수의 매개변수에 전달할 수 있다 함수의 반환값으로 사용할 수 있다 위의 조건을 만족하는 객체를 일급 객체라 한다. 자바스크립트의 함수는 위의 조건을 모두 만족하기 때문에 일급 객체다. // 함수는 무명의 리터럴로 생성할 수 있다. // 함수는 변수에 저장할 수 있다. // 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다. const increase = function (num) { return ++num; }; const decrease = funtion(num) { return --num; }; // 함수는 객체에 저장할 수 있다 const predic.. 공감수 0 댓글수 0 2023. 9. 23.
모던 자바스크립트 Deep Dive - 생성자 함수에 의한 객체 생성(2) 내부 메서드 [[Call]] 과 [[Construct]] 함수 선언문 또는 함수 표현식으로 정의한 함수는 일반적인 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있다. // 함수는 객체다 function foo() {} // 함수는 객체이므로 프로퍼티를 소요할 수 있다. foo.prop = 10; // 함수는 객체이므로 메서드를 소유할 수 있다. foo.method = function() { console.log(this.prop); }; foo.method(); // 10 함수는 객체이지만 일반 객체와는 다르다. 일반 객체는 호출할 수 없지만 함수는 호출할 수 있다. 함수가 일반 함수로서 호출되면 함수 객체의 내무 메서드 [[Call]]이 호출되고 new 연산자와 함께 생성자 함수로서 .. 공감수 0 댓글수 0 2023. 9. 11.
모던 자바스크립트 Deep Dive - 생성자 함수에 의한 객체 생성 Object 생성자 함수 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다. 생성자 함수(constructor)란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다. 생성자 함수에 의해 생성된 객체를 인스턴스(instance)라 한다. // 빈 객체의 생성 const person = new Object(); // 프로퍼티 추가 person.name = 'Lee'; person.sayHello = function() { console.log('Hi' + this.name); }; console.log(person); // {name: 'Lee', sayHello: f} .. 공감수 0 댓글수 1 2023. 9. 9.
모던 자바스크립트 Deep Dive - 프로퍼티 어트리뷰트 데이터 프로퍼티와 접근자 프로퍼티 프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 구분할 수 있다. 데이터 프로퍼티 : 키와 값으로 구성된 일반적인 프로퍼티다 접근자 프로퍼티 : 자체적으로는 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출되는 접근자 함수로 구성된 프로퍼티다 데이터 프로퍼티 데이터 프로퍼티는 다음과 같은 프로퍼티 어트리뷰트를 갖는다. 프로퍼타 어트리뷰트는 자바스크립트 엔진이 프로퍼티를 생성할 때 기본값으로 자동 생성된다. const person = { name : 'Lee' }; // 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크럽터 객체를 취득한다. console.log(Object.getOwnPropertyDescriptor(person, 'name')); //.. 공감수 0 댓글수 0 2023. 9. 2.
모던 자바스크립트 Deep Dive - let, const, 블록 레벨 스코프 var 키워드로 변수를 선언하면 다양한 문제점이 발생할 수 있다. 1. 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언이 가능하다. 2. 함수 레벨 스코프 var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 따라서 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다. var x = 1; if(true) { // x는 전역 변수다. 이미 선언된 전역 변수 x가 있으므로 x 변수는 중복 선언된다. // 이는 의도치 않게 변수값이 변경되는 부작용을 발생시킨다. var x = 10; } console.log(x); // 10 2. 변수 호이스팅 var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있다. 단, 할당문.. 공감수 0 댓글수 0 2023. 9. 1.
모던 자바스크립트 Deep Dive - 전역변수 전역번수의 부분별한 사용은 위험하다. 그 이유에 대해서 알아보자 변수의 생명주기 변수는 선언에 의해 생성되고 할당을 통해 값을 갖는다. 생물과 비슷하게 생성되고 소멸되는 생명주기가 있다. 만약 생명주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 메모리 공간을 점유하고 있을 것이다. 변수는 자신이 선언된 위치에서 생성되고 소멸한다. 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다. 하지만 함수 내부에 선언된 지역 변수는 함수가 호출되고 함수가 종료하면 소멸한다. function foo() { var x = 'local'; console.log(x); // local return x; } foo(); console.log(x); // ReferenceError : x is not de.. 공감수 0 댓글수 0 2023. 8. 31.
모던 자바스크립트 Deep Dive - 스코프 스코프? 스코프(scope = 유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다. var var1 = 1; // 코드의 가장 바깥 영역에서 선언한 변수 if(true) { var var2 = 2; // 코드 블록 내에서 선언한 변수 if(true) { var var3 = 3; // 중첩된 코드 블록 내에서 선언한 변수 } } function foo() { var var4 = 4; // 함수 내에서 선언한 변수 function bar() { var var5 = 5; // 중첩된 함수 내에서 선언한 변수 } } console.log(var1); // 1 console.log(var2); // 2 console.log(var3); // 3 console.log(var4); /.. 공감수 0 댓글수 0 2023. 8. 24.
모던 자바스크립트 Deep Dive - 함수(2) 함수 호출 // 함수 선언문 function add(x, y) { return x + y; } // 함수 호출 // 인수 1과 2가 매개변수 x와 y에 순서대로 할당되고 함수 몸체의 문들이 실행된다. var result = add(1, 2); 인수는 함수를 호출할 때 지정하며, 개수와 타입에 제한이 없다. 매개변수는 함수를 정의할 때 선언하며, 함수 몸체 내부에서 변수와 동일하게 취급된다. 일반 변수와 마찬가지로 undefined 로 초기화 된 이후 인수가 순서대로 할당된다. 매개변수는 함수 몸체 내부에서만 참조 가능하고 몸체 외부에서는 참조 불가능하다. 함수는 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않는다. 인수가 할당되지 않은 매개변수의 값은 undefined이다. function add.. 공감수 0 댓글수 0 2023. 8. 23.
모던 자바스크립트 Deep Dive - 함수(1) 함수? 함수는 자바스크립트에서 가장 중요한 핵심개념이다. 수학의 함수는 "입력"을 받아 "출력"을 내보내는 일련의 과정을 정의한 것이다. 프로그래밍 언어의 함수도 수학의 함수와 같은 개념이다. 함수 f(x, y) = x + y를 자바스크립트의 함수로 표현하면 다음과 같다. function add(x, y) { return x + y; } add(2,5); // 7 프로그래밍 언어의 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 프로그래밍 언어의 함수도 입력을 받아 출력을 내보낸다. 이때 함수 내부로 입력을 전달받는 변수를 매개변수, 입력을 인수, 출력을 반환값이라 한다. 함수는 값이며, 여러 개 존재할 수 있으므로 특정 함수를 구분하기 위해 식별자인 함수 .. 공감수 0 댓글수 0 2023. 8. 22.
모던 자바스크립트 Deep Dive - 원시 값과 객체의 비교 원시 타입과 객체 타입은 크게 3가지 측면에서 다르다 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이다. 이에 비해 객체(참조) 타입의 값, 즉 객체는 변경 가능한 값이다. 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 이에 비해 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장된다. 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다. 이를 값에 의한 전달이라 한다. 이에 비해 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달이라 한다. 원시값 변경 불가능한 값 원시 타입(primitive type)의 값, 즉 원시 값은 변경 불가능한 값(immutable valu.. 공감수 0 댓글수 2 2023. 8. 18.
모던 자바스크립트 Deep Dive - 타입 변환과 단축 평가 자바스크립트의 모든 값은 타입이 있다. 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다. 이때 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환(explicit coercion) 또는 타입 캐스팅(type casting) 이라 한다. var x = 10; // 명시적 타입 변환 숫자 -> 문자열 var str = x.toString(); console.log(typeof str, str); // string 10 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다. 이를 암묵적 타입 변환(implict coercion) 또는 타입 강제 변환(type coercion)이라 한다. var x = 10; // 암묵적.. 공감수 0 댓글수 1 2023. 8. 17.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.