What I studied

자바스크립트에서 객체란 { }를 사용하며 key와 value로 구성된 프로퍼티가 들어간다. 각각의 프로퍼티는 쉼표로 구분하는데 객체를 만들어 접근하고 추가하고 삭제하는 것 모두 가능하다. 객체 만들기 객체는 아래와 같이 키와 밸류 값으로 작성하는데 중괄호를 이용해 만들면 된다. 아래 teacher이라는 객체를 만들었다. // 객체의 생성 const teacher = { name: 'Emaily', // key : name , value : Emaily age: 35, // key : age , value : 35 } // 함수로 생성하기 function makeObject(name, age) { return { name, age, hobby: 'exercising' }; } const teacher = ..

자바스크립트 코드는 위에서부터 아래로 한줄씩 실행되는데 함수 선언문을 먼저 살펴보고 이에 이어서 함수 표현식과 화살표 함수에 대해서 정리해보고자한다. 함수 선언문 함수 선언문은 아래와 같은 형식으로 작성하는데 함수와 함수명, 매개변수(필요하다면 작성)를 작성한다. 예제 1에서 사용하는 변수 msg는 지역변수이기 때문에 함수 내에서만 사용이 가능하다. // 1 function hello(name) { let msg = `안녕하세요 ${name}님!` console.log(msg) } hello('Lia') // 안녕하세요 Lia님! hello('Mike') // 안녕하세요 Mike님! hello('Emaily') // 안녕하세요 Emaily님! // 2 function error() { alert('에러가..

오늘은 자바스크립트에서 활용하는 반복문에 대해서 다시 돌아봤는데 평소에는 for문만 사용했었고 while과 do while이라는 것이 있는지는 처음 알았다. 자바스크립트에는 for문만 있는줄 알았던 것이다. 그래서 3가지의 차이에 대해서 조금 더 살펴보고자 한다. for 반복문 for문은 세미콜론(;)으로 구분하며 처음 쓰는 것은 초기값, 두번째는 조건, 세번째는 코드 실행 후 작업을 의미한다. 그렇기 때문에 초기값부터 조건의 값이 false가 될 때까지 반복 실행하며 원하는 값을 찍을 수 있는 것이다. 아래의 코드를 보면 i가 0부터 시작해서 5보다 작다면 계속해서 반복문을 실행하게 된다. 그래서 아래와 같이 0부터 4까지의 값을 얻을 수 있다. for(let i = 0; i < 5; i++) { co..

자바스크립트 기본 연산자와 비교 연산자에 이어서 논리 연산자를 알아보려고하는데 자바스크립트에는 3가지의 논리연산자가 있다. 이 역시 코딩을 하다보면 많이 쓰게 되는 것들이니 하나씩 살펴보려고 한다. || (OR) 연산자와 && (AND) 연산자 or 연산자는 여러개 중 하나라도 true 이면 true를 반환하고 모든 값이 false일 때만 false를 반환한다. and 연산자는 모든 값이 true일때만 true를 반환하고 하나라도 false이면 false를 반환한다. const name = 'Jun'; const age = 22; if(name === 'Jun' || age === 20) { console.log('통과') } else { console.log('불통') } // 통과 if(name ==..

비교연산자는 주로 조건문에서 많이 사용하는데 비교연산자에 대해서 처음 공부하는 것이라면 헷갈릴 수 있는 부분도 존재하니 반드시 체크해두어야 나중에 문제가 생길일이 없을 것 같다. 비교연산자 식은 true, false 값을 반환 기본적으로 console에 비교연산자를 활용한 식을 적어보면 true 또는 false 값을 반환한다. console.log(8 > 4) // true console.log(8 == 4) // false console.log(8 != 4) // true 여기서 한가지 주의해야할 것 중 하나는 == 연산자인데 기본적을 =은 할당을 의미하기에 우리가 평소 알고 있는 것처럼 같다를 의미하지 않는다. 그래서 같다를 의미하는 연산자로 ==를 사용하는데 ==과 ===의 차이를 알아두는 것이 좋..

자바스크립트 기본연산자에 대해 다시한번 알아보고 추가적으로 비교연산자, 논리연산자 등에 대해서 알아보려고 한다. 기본 연산자 자바스크립트 기본 연산자에는 +, -, *, /, % 등이 있는데, %는 나머지 연산자이다. 이 연산자는 주로 홀수, 짝수를 구분하는데 사용하며 나머지 값이 1인지 0인지에 따라 홀수와 짝수로 구분할 수 있다. 홀수 : X % 2 = 1 짝수 : Y % 2 = 0 또한 거듭제곱의 경우에는 * 연산자를 두번 사용하면 된다. const result = 2**4; console.log(result) // 16 기본 연산자의 경우 우선순위를 갖는데 우리가 알고 있는 것처럼 더하기, 빼기 보다 곱하기, 나누기가 우선순위가 되는 것이다. 기본 연산자 줄여쓰기 연산자의 경우에는 줄여서 쓰는 것..

자바스크립트에서의 형변환은 두가지로 나뉠 수 있다고 한다. 자동 형변환과 명시적 형변환이 있는데 자동 형변환의 경우 자바스크립트 엔진이 자동으로 데이터 타입을 변환시키는 것이고, 명시적 형변환은 개발자가 의도를 가지고 데이터타입을 변환시키는 것이라고 할 수 있다. 그래서 이를 좀 더 자세히 살펴보고자 한다. 자동 형변환(암시적 형변환) 자바스크립트 엔진이 자동으로 데이터 타입을 변환시키는 것. 즉, 필요에 따라 알아서 변환되는 것을 의미한다. 예시를 하나 살펴보면 앞서 공부한 prompt를 통해 수학점수와 영어점수를 입력받아 합산한 결과에서 /2를 해줄 것이다. const mathScore = prompt('수학 점수를 입력해주세요'); // 100 const englishScore = prompt('영..

리액트를 사용하면 사용할 수록 자바스크립트에 대한 공부는 다시 해야겠다는 생각이 들어 ES6관련 문법과 기본적인 것들을 정리해보려고 한다. 평소에 리액트를 사용하면서도 alert 이외의 것은 사용해본 적이 없었는데 이번에 alert, propmpt, confirm 세가지의 차이를 확실하게 알게 되었다. 입력값을 받는 prompt prompt의 경우에는 이렇게 원하는 값을 입력받을 수 있다. 여기서 promt로 입력받은 입력값은 무조건 문자열! const name = prompt('이름을 입력하세요'); 그뿐만 아니라 default 값을 설정해줄 수도 있는데 아래와 같이 두개의 인자를 넘겨줄 수 있기 때문이다. const date = prompt('예약일을 입력해주세요', '2022-08-'); 확인창을 ..

더보기 자바스크립트 - 함수 자바스크립트 - 조건문 자바스크립트 - 반복문 1. 자바스크립트 - 함수 자바스크립트 기본함수 (나눗셈의 나머지를 구할 때, 특정 문자열 기준으로 문자열을 나누고 싶을 때) 함수의 기본 생김새 함수 사용의 예시(두 숫자를 입력 받아 곱한 값을 알려주는 함수) 2. 자바스크립트 - 조건문 20보다 작으면 작다고, 크면 크다고 알려주는 함수 if, else if, else 3. 자바스크립트 - 반복문 반복문은 주로 리스트와 함께 쓰이는데 let fruits = ['사과', '바나나', '수박', '딸기', '참외']와 함께 쓰이는 경우는 이렇게 표현할 수 있다. 또한 딕셔너리가 들어간 리스트와 반복문, 조건문을 함께 사용할 경우, 이렇게 표현할 수 있다. 자바스크립트 기초문법 -..

더보기 목차 자바스크립트 - 변수 자바스크립트 - 리스트와 딕셔너리 1. 자바스크립트 - 변수 1. 변수와 기본 연산 알아보기 변수 대입에 있어서 a = 3의 의미는 3이라는 것을 a라는 변수에 넣는다는 의미이다. * 변수 명과 같은 경우에는 first_name 또는 firstName 등처럼 알아보기 쉽게 쓰는 것이 중요하다. 2. 자바스크립트 - 리스트와 딕셔너리 리스트는 순서를 지켜서 가지고 있는 형태라고 할 수 있다. 딕셔너리는 키와 밸류 값의 묶음이라고 할 수 있다.