기록하며 성장하기

이제까지 배웠던 자료형은 각각 다른 데이터 타입을 가지고 있었다. 그리고 그 타입에 따라 변수 할당,수정,복사 등의 작업을 하는 과정에서 다른 결과가 나올 수 있다. 👀 Primitive data type 기본형 데이터 타입 문자, 숫자, 불리언 등 자료 자체가 변수에 저장되는 타입으로 아래와 같은 단순 변수들을 말한다. let name = 'Jessie'; let age = 20; 기본형 데이터 타입의 변수를 복사 한 후 값을 변경하면 어떻게 될까? let name1 = 'Jessie'; // output : Tony let name2 = name1; // output : Jessie name1 = 'Tony'; 위 코드에서 name1에 Jessie가 직접 저장되었고, name2는 name1의 값을 공..

👀 Spread operator 기본 사용법 ES6 에서 추가된 Spread operator는 ... 기호를 붙여서 배열이나 객체의 값을 펼쳐주는 연산자이다. 배열과 객체 이름 앞에 ... 을 사용해주면, 배열에서 괄호를 제거해 내부의 값만 빼서 펼쳐준다. 데이터의 연결, 복사 등으로 유용하게 활용할 수 있다. 괄호를 제거해 주는 연산자 이므로 소괄호 / 중괄호 / 대괄호 내부에서만 사용할 수 있다. const words = ['hello', 'world']; const number = {a: 1, b: 2, c: 3} console.log(words); // output: ['hello', 'world'] console.log(...words); // output: hello world console..

자바스크립트 ES6에서 문자열을 다루기 쉽도록 템플릿 리터럴(Template literals) 이라는 새로운 표기법이 생겼다. 기존에 '' 혹은 "" 안에 넣던 문자열을, esc키 밑에 있는 백틱 기호(``) 안에 넣어서 표기한다. 📌 Template literals 사용의 장점 1. 문자열을 변수와 함께 호출할때, 문자열을 ''로 각각 분리하지 않고 사용할 수 있다. 양 옆에 + 기호도 챙겨줄 필요가 없다. const name = 'Jessie'; console.log('Hello, I am ' + name + '.'); console.log(`Hello, I am ${name}.`); // 둘 다 콘솔에 Hello, I am Jessie. 출력됨 2. 문자열 안에서 따옴표를 사용하고 싶거나, 줄바꿈을..

자바스크립트 ES6 문법에서 변수 공부 중 전에는 어려워서 접근 못하던 TDZ에 대해 좀 더 정리를 해볼 수 있을 것 같아 포스팅해본다. >> 변수 기본개념 포스팅 2021.12.27 - [Javascript] - [JS] const, let, var 개념정리 (feat. hoisting, scope) 👀 Hoisting? 변수의 선언은 선언 / 초기화 / 할당의 단계로 나누어 진행된다. 선언 단계 : var name 등의 방식으로 변수를 정의한다. 초기화 단계 : 선언단계의 변수를 위한 메모리를 만들고, undefined로 값을 초기화 한다. 할당 단계 : 초기화된 메모리에 다른 값을 할당한다. hoisting 이라는 단어는 끌어올린다는 뜻이다. 호이스팅은 선언하는 단계의 코드가 유효범위의 최상단으로 ..

자기자신을 뜻하는 this는 쓰여진 위치에 따라 해석이 달라진다. this는 함수 안에서 사용할 수 있는 변수이면서, 그 변수 안에 담겨있는 의미는 함수를 어떻게 호출하냐에 따라 달라진다. 1. this의 단독 호출, 일반 함수에서의 호출 전역 공간에서 this를 호출하는 경우 this는 전역객체 ( = global object )를 의미한다. TEST 1 function abc() { console.log(this); } abc(); // output = window 일반함수에서 this를 사용했으므로 this는 전역객체를 의미한다. 브라우저에서 전역객체는 window 이다. TEST 2 const name = 'Jessie'; function callName() { console.log(this.na..

계속 이고잉님 강의 듣는 중 https://opentutorials.org/module/532/6570 생성자와 new - JavaScript 객체 객체란 서로 연관된 변수와 함수를 그룹핑한 그릇이라고 할 수 있다. 객체 내의 변수를 프로퍼티(property) 함수를 메소드(method)라고 부른다. 객체를 만들어보자. var person = {} person.name = 'egoing' opentutorials.org 👀 여기 같은 기능을 하는 객체가 반복되고 있다. const sayHello1 = { name : 'Jessie', introduce : function() { return 'My name is' + this.name; } } const sayHello2 = { name : 'Tony',..

강의 커리큘럼대로 가다보니 뭔가 순서가 꼬인듯 하다. this를 먼저 공부하다가, new 생성자 함수 안에서 this의 역할에 대해 어려운 부분이 있었고 그것을 이해하려다보니 객체지향이 뭔데? 하게 되었다. 일단 객체지향 프로그래밍의 개념부터 잡아보자. https://opentutorials.org/module/532/6584 객체지향 - JavaScript 객체지향 프로그래밍은 크고 견고한 프로그램을 만들기 위한 노력의 산물이다. 객체지향이라는 큰 흐름은 현대적 프로그래밍 언어들을 지배하고 있는 가장 중요한 맥락이라고 할 수 있다. 하지 opentutorials.org 그리고 이것은 역시나 교과서... 아직 머릿속에 명확하게 정리된 내용은 아니지만 이고잉님 강의를 듣고 이해한대로 정리해 적어본다. 썼던..

코딩애플 자바스크립트 강의 막바지 듣는 중, 애플 갬성으로 스크롤 애니메이션 만드는 강의가 있었다. 쌤이 주신 예제 자료는 이것 (지금은 사이트 레이아웃이 바뀌어서.. 강의 자료를 가져왔..) 👀 opacity 가변값 구하기 현재 창의 scrollTop 값을 콘솔에 찍어보고, 애니메이션의 시작점과 끝점의 스크롤값을 찾는다. 그러면 이런 그래프를 그릴 수 있었다. 저 그래프의 기울기값을 구하면 opacity의 가변값을 구할 수 있다며 중학생때 배웠다는 함수를 알려주셨는데 머리가 하얗게 되었다 ㅎㅎ 수학은 잊고 살아도 너무 잊고 살았다.. 이런것도 못알아 듣겠는 나를 자책하면서 혹시 다른 코드로 해결할 수는 없나 구글링 해봤는데, 라이브러리만 잔뜩.. 그래서 주변인을 괴롭혀 중등 수학강의를 들었고 가까스로 ..

sort(), reduce(), map(), filter() ES6 문법으로, Array 내 모든 요소를 반복해서 가공시키는 메소드이다. 📌 sort() Array의 요소들을 sort 함수 내용대로 재정렬하여 반환한다. 기본 sort() const fruits = ['Banana', 'Apple', 'Grape', 'Cherry'] fruits.sort(); //output : ['Apple', 'Banana', 'Cherry', 'Grape']​ sort()의 파라미터 값에 아무것도 넣지 않으면 문자열로 취급되어 유니코드 값 순서대로 아이템을 정렬한다. const number = [1, 8, 100, 33, 5] number.sort(); //output : [1, 100, 33, 5, 8] 그래서 숫..

탭 메뉴를 만드는 두가지 방법에 대한 강의 내용 정리하기. 처음에는 흐름대로 코드를 짜고 반복문을 활용해서 리팩토링한다음 이벤트버블링 개념을 활용해 이벤트리스너를 줄여 최적화하는 법을 배웠다. 📌 탭메뉴 만들기 const tabButton = $('.tab-button'); const tabContent = $('.tab-Content'); tabButton.eq(0).click(function(){ tabButton.removeClass('active'); tabContent.removeClass('show'); tabButton.eq(0).addClass('active'); tabContent.eq(0).addClass('show'); }); 이렇게 코드를 만들면, .eq(0) 자리에 각 버튼 순서에..