Frontend/Javascript

[TIL] JavaScript 형변환

Javascript는 느슨한 언어이므로 변수 선언시 타입을 지정하지 않기 때문에 개발자가 명시적으로 타입을 지정해주기도 하고, 자바스크립트 엔진 내에서 암시적으로 타입을 변한하기도 한다. 명시적 타입 변환이나 암시적 타입 변환이나 기존 원시값을 직접 변경하는 것은 아니다. 원시값은 변경 불가능한 값이므로 변경할 수 없다. 타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것이다. 자바스크립트가 느슨한 언어이기에 정확한 코드를 작성하기 위해서는 형변환의 원리를 꼭 알고 가야되겠구나 생각했다. (1) 명시적 형변환(explicit coercion) 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라고 한다. 명시적 형변환(explicit coerc..

[TIL] 느슨한 타입의 동적 언어, 자바스크립트

C나 자바같은 정적타입 언어는 변수를 선언할 때 변수에 할당할 수 있는 값의 종류, 즉 데이터 타입을 사전에 선언해야 한다. 이를 명시적 타입 언어(explicit type declaration)라고 한다. 정적 타입 언어는 변수의 타입을 변경할 수 없으며 변수에 선언한 타입에 맞는 값만 할당할 수 있다. 정적 타입 언어는 컴파일 시점에 타입 체크(선언한 데이터 타입에 맞는 값을 할당했는지 검사하는 처리)를 수행한다. 만약 타입 체크를 통과하지 못했다면 에러를 발생시키고, 프로그램의 실행 자체를 막는다. 이를 통해 타입의 일관성을 강제함으로써 더욱 안정적인 코드의 구현을 통해 런타임에 발생하는 에러를 줄인다. 1. 느슨한 타입(loosely typed)의 동적(dynamic) 언어 Javascript의 ..

[TIL] 전역변수와 지역변수

함수는 유효 범위에 따라 전역변수(Global Variable)와 지역 변수(Local Variable)로 나뉜다. 전역변수 : 함수 외부에서 선언된 변수로, 프로그램 전체에서 접근할 수 있는 변수다. 지역변수 : 함수 내부에서 선언된 변수로, 함수가 실행되면 만들어지고, 함수가 종료되면 소멸한다. 함수 외부에서는 접근할 수 없다. // 전역 변수와 지역 변수 // 전역변수 let name = "JS" let msg = "Welcome!"; function hello(name){ // 지역변수 let msg = "Hello!" console.log(name + " " + msg); } // 전역변수 출력 console.log(name + " " + msg) // JS Welcome! // 지역변수 출력 ..

[TIL] 객체 리터럴

1. 객체 리터럴 (Object literal) : 배열이나 함수가 아닌 객체로, 여러 개의 변수를 하나의 변수로 묶을 때 사용한다. 객체 리터럴 내의 name, age와 같은 정보를 속성이라고 한다. 2. 속성(Property) : 속성은 속성 이름(key)과 속성 값(value)으로 이루어져 있다. 3. 배열과 객체 리터럴의 차이점 왜 배열 대신에 객체 리터럴을 사용하는 것일까? 객체 리터럴은 값에 이름이 붙어 있기 때문이다. 4. 객체 리터럴에 접근하기 .(점)또는[ ](대괄호) 로 객체와 객체 속성에 접근할 수 있다. 일반적인 속성은 '객체.속성이름' 으로 접근하고, 위의 코드처럼 '2ca'나 'c a'같은 속성이름은 [](대괄호)로 접근한다. [ ] (대괄호)를 쓸 때는 항상 ' '(따옴표)를 ..

[TIL] 함수 기본

1. 함수 - 함수란 특정한 작업을 하나의 단위로 묶어놓은 것을 의미한다. - 함수를 사용하면 불필요한 소스코드의 반복을 줄일 수 있다는 장점이 있다. 2. 함수의 종류 기본적으로 제공하는 내장 함수와 개발자가 정의하여 사용할 수 있는 사용자 정의 함수가 존재한다. 1) function함수 : function 예약어 2) 화살표 함수 : => (화살표) 기호를 사용 화살표 함수는 return , {} 생략이 가능하다. 3. 함수 정의하기 • 프로그램에는 똑같은 코드가 반복적으로 사용되어야 할 때가 많다. • 함수를 사용하면 소스코드의 길이를 줄일 수 있다. function 함수명(매개변수){ 실행할 소스코드 return 반환값 }​ 매개변수 : 함수 내부에서 사용할 변수 반환 값 : 함수에서 처리된 결과..

[TIL] 배열

1. 객체 객체는 자료형의 일종으로 다양한 값을 모아둔 또다른 값이다. 객체의 종류는 크게 배열, 함수, 함수가 아닌 객체로 나눌 수 있다. 2. 배열 다양한 자료형을 하나로 묶어 놓은 것이다. 같은 타입의 데이터를 연속된 공간에 저장하는 자바에서의 배열과는 다르게 현재 배열 안에 있는 값은 모두 문자열이지만, 값의 자료형이 모두 같아야 할 필요는 없다. 배열 안에 다른 배열이나 변수를 넣을 수 있다. const fruits = ['사과', '오렌지', '배', '딸기']; console.log(fruits[0]); console.log(fruits[1]); console.log(fruits[2]); console.log(fruits[3]); console.log(fruits[4]); 3. 배열의 Ind..

[TIL] 반복문 while, for, do while문

반복문 컴퓨터를 사용하는 이유는 반복작업을 하기 위해서이다. 사람은 반복작업할 때 실수하기도 하는데, 이러한 작업을 컴퓨터한테 시키면 효율적이다. 반복문은 어떤 작업(코드)들이 반복적으로 실행되기 위하여 사용한다. 반복문에는 for, while, do while문이 존재한다. for문을 주로 쓸 때는 반복 횟수를 알고 있을 때 쓰고, while문을 쓸 때는 조건식에 따라서 반복해야 하는 경우에 사용한다. 1. while 문 조건식이 true일 때에 동작문이 반복적으로 실행된다. 조건식이 false가 되면 반복문은 종료된다. While (조건식) { 동작문 } while문으로 Hello, while! 100번 출력하기 let i = 1; while (i

[TIL] 조건문(if, switch)과 삼항연산자

1. if문 : 주어진 조건식이 참이면 조건문을 실행하고, 거짓이면 실행하지 않는다. 범위는 명확하게 써줘야 한다. {}를 왠만하면 써주도록 한다. 2. switch문 break문 이런 경우가 생기기도 한다. 값이 A일 때만 A만 출력하고 싶은데, 전부 다 실행이 된 것을 볼 수 있다. 어떻게 해결해야 할까? 꼭 break를 써줘야 한다. break문을 사용하면 value가 A일 때 case A만 실행되어 A가 콘솔에 출력 되는 것을 볼 수 있다. 3. 삼항 연산자 (조건 연산자) 삼항으로 이루어져 있고, 조건식이 참이면 : 를 기준으로 왼쪽의 값을 반환하고, 거짓이면 :를 기준으로 오른쪽 값을 반환한다. let value = condition ? 참일 때 실행되는 식 : 거짓일 때 실행되는 식; 아주 ..

[TIL] var, let, const

재선언 재할당 scope var O O 함수 스코프(function -scope) let X O 블록 스코프(block-scope) : 모든 {}(중괄호) 블록 const X X 블록 스코프(block-scope) : 모든 {}(중괄호) 블록 1. 재선언 let, const는 재선언이 불가능하다. 재선언 하면 에러가 난다. 코드를 여러줄 짜다보면 변수를 또 생성할 수 있다. 이러한 실수를 미연에 방지하는 것이 가능하다. 2. 재할당 const는 재할당이 불가능하다. 값을 수정하면 안되는 변수를 만들 때 사용이 가능하다. 값을 변경하는 실수를 방지하는 것이 가능하다. 3. scope let, const는 범위가 더 좁다. 모든 중괄호가 범위이다. function뿐만 아니라 if, for 등 중괄호를 갖고 ..