재안 IT 공부 일기장

Spread Spread는 반복가능한 객체(Iterables)에서 요소들을 바로 Key-Value의 형태로 만들어서 사용하게 해주는 문법이다. Iterable의 요소들을에 대한 접근이 훤씬 용이하다. 위의 출력문은 배열의 형태로, 아래의 출력문은 값이 바로 출력된 것을 알 수 있다. ...arr 이 짧은 코드가 arr의 요소들을 Key-Value의 형태로 바꾸어서 요소들에 바로 접근한 것이다. 원래 배열의 요소에 접근하려면 인덱스를 사용해야하지만 인덱스를 사용하지 않고도 바로 접근할 수 있는 것이다. 배열(반복 가능 객체)의 모든 요소들에 대한 Key-Value의 쌍을 만드니 배열을 모든 요소를 배열에서 꺼낸것과 같이 사용할 수 있다. 요소에 대한 직접적인(?) 접근이 가능하니 활용할 수 있는 방법이 많..

Destructuring Object Destructuring, Array Destructuring, Function Destructuring에 대해 알아보기 전에 정리해야하는 개념이 하나 있다. 여기서 Desturcturing의 의미는 Desturctive와 조금 다르게 이해해야한다는 것이다. Destructurize(분해)와 Desturctive(파괴)의 차이점을 알고 공부하는 것이 좋겠다. Object를 파괴하는 것이 아니라 Object를 복사해서 분해하는 것이다. 이렇게 접근하면 훨씬 이해가 쉽다. Destructuring은 여러가지 데이터 집합에서 (object, array) 어떠한 부분만 가져오는 것이 목적이다. 물론 다른 목적들도 있지만 다른 목적들은 잠시후에서 알아보겠다. 가장 간단한 예제..

자바스크립트에 백틱이라는 기능이있는데 이는 파이썬의 f-string과도 비슷하다. 파이썬의 f-stirng에도 { 중괄호 }를 통해 해당 문자열에 값을 바로 삽입 할 수 있었던 것처럼 자바스크립트에도 문자열 내부에 값을 바로 삽입 할 수 있다. 자바스크립스에서는 아래와 같은 문법을 사용한다. 백틱 백틱 사이에 ${ }를 사용해서 expression을 넣는다. 이때 ${ }는 place holder 라고 한다. 이것 외에도 백틱만 가능한 기능도 있다. 백틱을 사용하면 이렇게 입력시 엔터를 사용할 수 있다. 매우 편리하다. single quote와 double quote는 안된다. 이는 아래 예제에서 활용된다. 이처럼 실제 HTML을 작성하는 것 처럼 할 수 있다. 그리고 또 신기한 기능이 하나 더 있다. ..

함수 함수의 개념 자체는 다른 언어의 함수와 같다. 자바스크립트에서 함수는 아래와 같이 생겼다. 전체적인 틀에선 매개변수와 리턴값이 존재한다. 보통 함수를 정의하는 것처럼 함수명, 매개변수, 리턴값, 실행문, 범위로 구성된다. 또한 함수의 매개변수에 기본 값을 정해줄 수도 있다. 아래는 익명함수라는 것인데 말그대로 이름이 없는 함수이다. 이때 noName은 변수명이지 함수명이 아니다. 함수 리터럴을 만들고 함수 리터럴의 주소 값을 변수에 저장하여 사용하는 방법이다. 추가적으로 익명함수에는 기본 값을 설정 할 수 없다. 함수 정의와 익명함수는 호이스팅에서 갈린다. 함수 정의는 자바스크립트 실행 시 최상단으로 끌여올리지는데 익명함수는 그렇지 못한다. 두 함수 모두 정의되기 전에 호출을 했는데 console...

자바 스크립트에서도 다른 프로그래밍 언어와 같이 반복문을 사용하여 특정한 명령의 실행을 반복시킬 수 있다. for, while과 같은 키워드를 사용하는 것은 동일하다. for문부터 바로 예제를 통해 알아보겠다. 기존에 알고있던 for문과 특히 다를 것이 없다. 변수(i)에 대한 조건식으로 반복횟수를 정하는 방법이다. 자바스크립트에선 다른 형태의 for문도 있다. for in for of 다음으로 for in 문에 대해 알아보겠다. for in문은 하나의 변수를 통해서 객체를 순회(iterate)한다. 임의의 변수와 순회할 객체(enumerable)를 인자로 받는다. 아래의 예제를 통해 설명하겠다. 분명 for in은 객체를 순회한다고 했다. 코드의 의도는 array의 각 요소들의 출력이였다. 그런데 콘솔..

이번엔 자바스크립트의 프로그램 흐름 제어에 대해 알아볼 것이다. 종료로는 아래와 같이 있다. block statement conditional statements exception handling statements 모두 프로그램의 전체적인 틀을 짤 때 중요한 개념이다. block statement에 대해 먼저 알아보겠다. 쉽게 말하면 한 쌍의 중괄호로 감싸 범위를 표현하는 것을 뜻한다. 자바에서는 if, for, while과 같이 사용되지만 자바스크립트에서는 독립적을 존재할 수 있다. 중괄호로 둘러 쌓여 있다는 것 말고는 특별한게 없다. 내부 -> 외부 접근이 가능한 것은 자바와도 같다. 마찬가지로 외부 -> 내부 접근은 안된다. 이제 conditional statements에 대해 알아보겠다. 쉽게말..

자바스크립트에서 변수를 선언하는 방법은 총 3개이다. var let const 모두 변수를 선언하는 키워드이며 가장 큰 차이점으로 버전의 차이가 있다. var - ES6 이전 방식 (구식) let - ES6의 문법 (최신) const - ES6의 문법 (최신) 사실 const와 let은 var를 대체하기 위해 만들어진 것이다. 그러니 var사용을 지양해야한다. 바로 변수를 선언해 보겠다. 3 키워드 모두 잘 작동한다. 그런데 여기서 var 사용을 왜 지양해야하는지 알려주겠다. 실행은 잘 되긴한다. variable의 값이 바뀌었구나로 생각할 수 있다. 하지만 동일 변수 선언이라고 생각해보자. 위의 코드는 아래의 코드와 같은 형태를 띈다. int num=1; // num 초기화1 int num=2; // n..

우선 Javascript란 웹프로그래밍 언어의 종류로 웹페이지를 더 재미있게 만들어준다. html : structing css : details javacript : interactive 자바스크립트는 웹 사용자의 행동(event)에 따라 추가적으로 기능을 추가하고 기능을 사용자의 행동(event)에 따라 실행 시킬지 말지 설정할 수 있게 만드는 것이다. 많은 웹페이지들은 움직이는거처럼 보여지는데 이는 모두 자바스크립트를 사용한 것이다. 자바스크립트를 이용해면 웹페이지를 더 재미있게 만들 수 있다. 그리고 자바스크립트 코딩을 할 때 Visual Studio Code를 사용할 것이다. 자바스크립트 코드는 js 파일을 통해 저장된다. js파일 혼자 독단적으로 사용할 수는 없고 html 파일과 연동하여 사용한..