Web

[JS] 모던 자바스크립트 Deep Dive - 12. 함수

함수 일련의 과정을 문(Statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것 수학의 함수와 마찬가지로 입력을 받아서 출력을 내보낸다. 매개 변수(Parameter) : 함수 내부로 입력을 전달받는 변수 인수(Argument) : 입력 반환값(Return Value) : 출력 함수는 값이며, 여러 개 존재할 수 있기 때문에 특정 함수를 구별하기 위해 식별자인 함수 이름을 사용할 수 있다. 함수는 함수 정의(Function Definition)를 통해 아래와 같이 생성한다. // 함수 정의 function add(x, y) { return x + y; } 함수는 정의만으로 실행되지 않으며 함수 호출(Function Call / Invoke)을 통해 함수의 실행시켜야 한다. 함수..

[JS] 모던 자바스크립트 Deep Dive - 11. 원시 값과 객체의 비교

원시 타입과 객체 타입의 차이점 1️⃣ 원시 타입의 값, 즉 원시 값은 변경 불가능한 값(Immutable Value)이다. 반면, 객체(참조) 타입의 값, 즉 객체는 변경 가능한 값(Mutable Value)이다. 2️⃣ 원시값을 변수에 할당하면 실제 값이 저장된다. 반면, 객체를 변수에 할당하면 변수에는 참조 값이 저장된다. 3️⃣ 값에 의한 전달(Pass by Value) - 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다. 참조에 의한 전달(Pass by Reference) - 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조값이 복사되어 전달된다. 원시 값 변경 불가능한 값 원시 값은 변경 불가능한 값이다. 즉, 읽기 전용 값으로 한 번 생성되면 변경할 수..

[JS] 모던 자바스크립트 Deep Dive - 10. 객체 리터럴

객체란? 원시 값을 제외한 나머지 모든 값 (함수, 배열, 정규 표현식 등) 🔥 원시 타입은 단 하나의 값만 나타내고 변경 불가능하다. 🔥 객체 타입은 다양한 타입의 값(원시 값 or 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조이며 변경 가능하다. 객체 (Object) 프로퍼티와 메소드로 구성된 집합체 프로퍼티 : 객체의 상태를 나타내는 값 키(Key)와 값(Value)으로 구성 메소드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior) 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. JS의 함수는 일급 객체이므로 값으로 취급할 수 있다. 즉, 함수도 프로퍼티 값으로 사용할 수 있다. 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드(..

[JS] 모던 자바스크립트 Deep Dive - 09. 타입 변환과 단축 평가

타입 변환이란? 기존 원시 값을 사용하여 다른 타입의 새로운 원시값을 생성하는 것 원시 값은 변경 불가능한 값이므로 기존의 원시값을 직접 변경하는 것은 아니다. ✅ 명시적 타입 변환 (Explicit Coercion) 개발자가 의도적으로 값의 타입을 변환하는 것 타입 캐스팅 (Type Casting)이라고도 한다. 타입을 변경하겠다는 개발자의 의지가 코드에 명백히 드러난다. 명시적으로 타입을 변환하는 방법은 다양하다. 표준 빌트인 생성자 함수 (String, Number, Boolean)를 new 연산자 없이 호출 빌트인 메서드 사용 암묵적 타입 변환 사용 문자열 타입으로 변환 String 생성자 함수를 new 연산자 없이 호출하는 방법 Object.prototype.toString 메서드를 사용하는 방..

[CSS] Flexbox / Grid 속성 이해하기

Flexbox✅ justify-content 아래 값들을 인자로 받아 아이템을 가로선 상에서 정렬flex-start: 아이템을 컨테이너의 왼쪽으로 정렬flex-end: 아이템을 컨테이너의 오른쪽으로 정렬center: 아이템을 컨테이너의 가운데로 정렬space-between: 아이템들 사이에 동일한 간격을 둠space-around: 아이템들 주위에 동일한 간격을 둠✅ align-items아래 값들을 인자로 받아 아이템을 세로선 상에서 정렬flex-start: 아이템을 컨테이너의 상단으로 정렬flex-end: 아이템을 컨테이너의 하단으로 정렬center: 아이템을 컨테이너의 세로선 상의 가운데로 정렬baseline: 아이템을 컨테이너의 시작 위치에 정렬stretch: 아이템을 컨테이너에 맞도록 늘림✅ fle..

[JS] 모던 자바스크립트 Deep Dive - 08. 제어문

제어문 (Control Flow Statement) 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용 일반적으로 코드는 위에서 아래 방향으로 순차적으로 실행된다. 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있다. 그러나 동시에 직관적인 코드의 흐름을 혼란스럽게 만들어 가독성을 해칠 수 있다. 뒤에서 살펴볼 forEach, map, filter, reduce와 같은 고차 함수를 사용한 함수형 프로그래밍 기법에서는 제어문의 사용을 억제하여 복잡성을 해결하려고 노력한다. 블록문 (Block Statement / Compound Statement) 0개 이상의 문을 중괄호로 묶은 것 (코드 블록 또는 블록이라고 부르기도 함) 자바스크립트는 블록문을 하나의 실행 단위로 취..

[JS] 모던 자바스크립트 Deep Dive - 07. 연산자

연산자 (Operator) 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만드는 것 연산의 대상을 피연산자 (operand)라고 한다. 피연산자는 값으로 평가될 수 있는 표현식이어야 한다. 피연산자와 연산자의 조합으로 이루어진 연산자 표현식도 값으로 평가될 수 있는 표현식이다. 산술 연산자 (Arithmetic Operator) 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자값을 만듦 이항 산술 연산자 (Binary) 이항 산술 연산자는 2개의 피연산자를 산술 연산하여 숫자 값을 만든다. 모든 이항 산술 연산자는 피연산자의 값을 변경하는 부수 효과가 없다. 어떤 산술 연산을 해도 피연산자의 값이 바뀌는 경우는 없고 언제나 새로운 값을 만든다. ..

[JS] 모던 자바스크립트 Deep Dive - 06. 데이터 타입

데이터 타입 (Data Type) 값의 종류 (자료형) 자바스크립트의 모든 값은 데이터 타입을 갖는다. 자바스크립트 (ES6)는 7개의 데이터타입을 제공하는데, 이는 원시 타입(primitive type)과 객체 타입(object/reference type)으로 분류할 수 있다. 숫자 타입 (Number) C나 java의 경우, 정수와 실수를 구분해서 int, long, float, double 등과 같은 다양한 숫자 타입을 제공한다. 자바스크립트는 모든 수를 실수로 처리하며, 정수를 표현하기 위한 데이터 타입이 별도로 존재하지 않는다. ECMAScript 사양에 따르면 숫자 타입의 값은 배정밀도 64비트 부동소수점 형식을 따른다. 모든 수를 실수로 처리하기 때문에 정수로 표시되는 수끼리 나누더라도 실수..

[JS] 모던 자바스크립트 Deep Dive - 05. 표현식과 문

값 (Value) 표현식(expression)이 평가(evaluate)되어 생성된 결과 평가: 식을 해석해서 값을 생성하거나 참조하는 것 모든 값은 데이터 타입을 가지며 메모리에 비트의 나열(2진수)로 저장된다. 데이터 타입에 관련된 설명은 다음 글에서 살펴볼 수 있다. https://billyboo.tistory.com/15 // 변수에는 10 + 20이 평가되어 생성된 숫자 값 30이 할당된다. var sum = 10 + 20; 값은 위의 코드처럼 식으로 생성할 수도 있지만 가장 기본적인 방법은 리터럴을 사용하는 것이다. 리터럴 (Literal) 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법(notation) // 아래 숫자 3은 단순한 아라비아 숫자가 아니라 "숫자 리..

[JS] 모던 자바스크립트 Deep Dive - 04. 변수

변수 (Variable) 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘 메모리 공간에 저장된 값을 다시 읽어 들여 재사용할 수 있도록 값이 저장된 메모리 공간에 상징적인 이름을 붙인 것 ✨ 변수명: 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름 ✨ 변수값: 변수에 저장된 값 ✨ 할당: 변수에 값을 저장하는 것 (a.k.a 대입, 저장) ✨ 참조: 변수에 저장된 값을 읽어 들이는 것 식별자 (Identifier) 어떤 값을 구별해서 식별할 수 있는 고유한 이름 식별자는 값이 아닌 메모리 주소를 기억한다. 즉, 메모리 주소에 붙인 이름이다. 변수, 함수, 클래스 등의 이름은 모두 식별자이다. 메..