본문 바로가기

자바스크립트99

8. if/else 조건문 (if/else Statements) 안녕하세요. 박기린 입니다. 대부분의 프로그래밍 언어에는 조건문이 존재합니다. 조건문을 이용해서 다양한 상황마다 적절히 대응하는 프로그램을 만들 수 있기 때문입니다. 자바스크립트 또한 조건문을 지원합니다. if/else control structure const age = 22; if (age >= 18) { console.log(`Giraffe can start driving license 🚗`); } else { const yearsLeft = 18 - age; console.log(`Giraffe is too young. Wait another ${yearsLeft} years :)`); } // 콘솔창 : Giraffe can start driving license 🚗 if 키워드 다음으로 (괄호.. 2022. 9. 27.
7. 문자열과 템플릿 리터럴 (Strings and Template Literals) 안녕하세요. 박기린입니다. 자바스크립트는 ES6 버전부터 String을 사용할 때 template literal 방식을 도입합니다. 기존의 String 선언 방식 const stringEx = 'String'; 기존에는 작은따옴표(')와 큰따옴표(")를 사용해서 String타입의 변수를 선언했습니다. Template Literal Template Literal 방식은 백틱(backtick, `)을 사용합니다. const firstName = `joseph`; const job = `teacher`; 위의 코드만 봤을 때는 기존의 String 선언 방식과의 차이점을 알 수가 없습니다. 이제부터 그 차이점에 대해 알아가보겠습니다. Template Literal 방식의 특징 - String Interpolat.. 2022. 9. 26.
6. 연산자 우선순위 (Operators Precedence) 안녕하세요. 박기린입니다. 3 * (1+2) 이라는 식을 보면 어떻게 계산을 하시나요? 수학에는 계산을 할 때 순서가 있습니다. 위의 식의 경우에는, 괄호 안의 값을 계산한 후에 3을 곱하는 순서로 이루어져 있습니다. 식이 복잡해질 경우 어떤 계산 기호를 사용하느냐에 따라 계산 우선순위가 달라집니다. 그리고 이는 코딩에서도 마찬가지입니다. Operators Precedence console.log(3 + 10 * 2); // 23 console.log(3 + (10 * 2)); // 23 console.log((3 + 10) * 2); // 26 자바스크립트에서도 연산자 종류에 따라 계산의 우선순위가 정해집니다. 위처럼 (3+10)일 경우 덧셈임에도 불구하고 괄호 안에 있어서 먼저 계산된 것을 확인할 수.. 2022. 9. 25.
5. 연산자 (Basic Operators) JS의 연산자에 대해 알아봅시다. 수학 연산자 + : 더하기(plus) let x = 10 + 5; console.log(x) // 15 const firstName = 'Giraffe'; const lastName = 'Park'; console.log(firstName + ' ' + lastName); // Giraffe Park + 연산자는 String의 결합에도 사용할 수 있습니다. - : 빼기(minus) const now = 2022 const ageGiraffe = now - 2000; const agePark = now - 1991; console.log(ageGiraffe, agePark); // 22, 31 * : 곱하기(times) / : 나누기(divide) ** : 제곱(expon.. 2022. 9. 23.
4. let, const, var의 차이점 let : 변수를 선언합니다. let age = 30; age = 31; const : 상수를 선언합니다. const birthYear = 1991; // birthYear = 1990; // TypeError const job // 'const' declarations must be initialized. const(상수)는 무조건 초기값을 필요로 합니다. let variable; variable = 20; // ok const constant; // error const라고 할지라도 'object의 property'나 'Array의 element'가 추가되거나 변경되는 것은 허용합니다. const myCar = new Object(); myCar.make = "Ford"; myCar.model = ".. 2022. 9. 22.
3. 데이터 타입 - 원시 타입 (Data Types - Primitive) JS의 데이터 타입 유형 JS에서의 모든 데이터는 Object(객체)나 Primitive(원시) 타입으로 이루어져 있습니다. Primitive(원시) 데이터 타입의 종류 Number 타입: 대부분 언어에는 int, float, double타입으로 나눠서 정수형과 실수형을 구분하지만 JS는 그렇지 않습니다.. 그냥 Number 타입에 모든 숫자를 담습니다. String타입: 문자열입니다. 작은따옴표('), 큰따옴표(")로 문자를 묶을 수 있습니다. Boolean타입: 참(true)과 거짓(false) 값을 담습니다. Undefined타입: 아직 정의되지 않은 변수입니다. 선언만 하고 값을 할당하지 않은 변수입니다. 그래서 그 변수의 데이터 타입을 모르는 상황입니다. (위 사진의 예시 참조) Null타입: .. 2022. 9. 21.
2. 값과 변수 (Value and Variable) 변수 선언 법 let firstName = “Park”; let, var을 사용해서 변수를 선언합니다. let과 var은 많은 변수를 선언한다는 점에서 동일하지만, 스코프와 중복 선언 가능 여부에서 차이가 발생합니다. let은 ES6 이후에 등장한 것으로 대부분이 let으로 변수를 선언하며, var는 구시대의 유물로 남겨진 상황입니다. (let, const, var의 구체적인 차이에 대해서는 추후 글을 작성할 예정입니다. - https://arnopark.tistory.com/471?category=1001777) 변수명 선언 규칙(관행) 1. 변수 이름에 lowerCamelCase를 사용합니다. ‘_’도 있지만 JS에서는 camelCase를 표준처럼 사용합니다. 변수 이름을 대문자로 시작하는 것은 오류.. 2022. 9. 20.
1. 자바스크립트에 대한 개요 홈페이지를 구성하는 3요소 HTML: 페이지의 내용을 담당합니다. 텍스트, 이미지, 버튼을 포함한 웹페이지에서 보는 모든 컨텐츠들을 담습니다. CSS: 콘텐츠가 보여지는 방식을 담당합니다. 기본적인 스타일링과 레이아웃을 구성합니다. JS: 동적이고 인터랙티브한 효과를 페이지에 추가합니다. 서버로부터 데이터를 맏아오기도 하고 웹 앱을 제작하기도 합니다. 흔히 말하는 반응형 페이지는 JS로 만들어집니다. 비유적인 표현으로는, HTML은 명사로 해당 요소가 무엇인지 선언하고 CSS는 형용사로 명사를 꾸며주며 JS는 동사로 어떤 동작을 지시합니다. JS 라이브러리 & 프레임워크 JS는 정말 다양한 라이브러리, 프레임워크를가 존재합니다. React와 같은 프레임워크가 대표적입니다. 다만 JS 라이브러리는 업데이트.. 2022. 9. 19.
유데미 자바스크립트 강의노트 시작 강의 링크 : https://www.udemy.com/course/the-complete-javascript-course/ 게임 블로그를 운영 중에 사라졌다가, 개발의 꿈을 품고 다시 돌아온 박기린입니다. 유저들의 평생 친구가 되어줄 수 있는 프로그램을 만들고 싶다는 꿈을 갖고 열심히 공부를 하는 중, 개발 블로그를 운영하면 좋겠다는 생각이 들었습니다. 공부한 내용을 공유하고 피드백을 받고 남들에게 도움도 주고 하면서 활력 넘치는 개발 라이프를 보내면 좋겠더라고요. 대학교에서 열심히 프로그래밍 지식을 쌓고는 있지만, 개인적으로 프론트엔드 부문에 관심이 많이 생겨서 자바스크립트 독학을 해야겠다고 다짐했습니다. 그리고 그 수단으로 유데미 자바스크립트 강의 'The Complete JavaScript Cour.. 2022. 9. 17.

티스토리툴바