JavaScript - Truthy와 Falsy
·
개발새발개발/JavaScript
Truthy와 Falsy   - Javasciprt에서는 boolean이 아니어도 값을 참 거짓으로 평가함     -  즉, javascript의 모든 값은 Truthy하거나 Falsy 하다- 이를 이용해 조건문을 간결하게 만들 수 있다    Falsy한 값 7가지 - 0n : 아주 큰 값을 의미함(잘 사용 안함)- 빈 문자열은 False  Truthy한 값- 7개의 Falsy값을 제외한 나머지 모든 값 - 빈 배열, 객체, 함수도 True로 봄- 단, 빈 문자열은 False이니 주의    활용 사례   - 이렇게 빈 값이 들어와버리면 오류가 발생하면서 서버가 중단됨- 하지만 이런 오류는 자주 발생함     - 그래서 이렇게 조건문을 이용해 이런 상황을 방지할 수 있음- 하지만 null 값이 들어오면? ..
Javascript - 객체(상수 객체, 메서드)와 배열
·
개발새발개발/JavaScript
객체상수 객체(const)- 상수 객체에 또 다른 객체를 생성해서 할당하면 에러가 발생함    - 하지만 이렇게 추가 수정 삭제는 가능함 - 아예 새로운 값을 할당하는 것은 문제가 되지만- 저장되어있는 객체 값의 프로퍼티를 수정하는건 가능함     메서드 - 값이 함수인 속성을 메서드라고 함- sayHi가 메서드임- 호출할 땐 객체명.메서드명()    - 다른 함수와 똑같이 화살표 함수로도 표현 가능함- 메서드의 경우 우측처럼 화살표도 생략 가능함(이를 메서드 선언이라고 함)   - 메서드 호출법1. 객체명.메서드명()2. 객체명["메서드명"]()  - 메서드는 객체의 동작을 정의할 때 사용됨- 함수가 아닌 프로퍼티가 객체의 정보를 나타낸다면,- 함수 프로퍼티들은 메서드로서 객체의 동작을 정의함     ..
JavaScript - 객체(속성 값 접근, 추가, 수정, 삭제, 존재 유무 확인)
·
개발새발개발/JavaScript
객체    객체 생성과 객체 속성 - {key : value} 형태- key의 개수에는 제한이 없음 단, 문자열과 숫자만 입력 가능함- value의 입력 값에는 제한이 없음(함수, 객체, 불리언 모두 가능)- 띄어쓰기가 포함된 값을 key값으로 사용할 때에는 " " 로 묶어줘야 함(ex) "my hobby"  객체 속성을 다루는 방법특정 속성에 접근 - name에 취소선 그어지는 것은 타입스크립트와 관련된 기능으로 vs코드의 기본 기능임(현재는 신경쓰지 않아도 됨)    3-1. 점 표기법 - 객체명.속성명- 존재하지 않는 값을 꺼내오려고 하면 오류가 발생하진 않고 "undefined"가 콘솔에 출력됨- 이걸 주의해야한다.. 띄어쓰기나 대소문자 오류, 콤마 하나도 다른 걸로 인식하기 때문에 변수명이 길고..
JavaScript - 콜백함수(Callback Function)
·
개발새발개발/JavaScript
콜백함수- 자신이 아닌 다른 함수에 인수로써 전달된 함수  - main의 인수로 sub 함수가 전달됨- 그렇기 때문에 main 내에서 매개변수를 호출하면 인수로 전달된 sub 함수가 호출됨  - 실행 결과 console.log("sub") 이 실행되어 콘솔 창에 sub이 출력된 것을 확인할 수 있음   - 이렇게 다른 함수에 인수로써 전달된 함수를 콜백함수라고 함 - 이전 함수에서 살펴봤던 것과 같이 호출이 아닌 매개변수 자체를 출력하면- 매개 변수 안에 담겨있는 함수가 그대로 출력되는 것을 확인할 수 있음   - 호출하면 sub 함수가 실행되어 콘솔에 "i am sub"이 출력됨  - 콜백함수는 메인함수가 원하는 언제든지 실행시킬 수 있다는 장점이 있어 많이 활용됨  - 이렇게 함수 표현식으로 쓰는 것..
JavaScript - 함수 선언식과 표현식, 화살표 함수
·
개발새발개발/JavaScript
지난번에 이어 인프런 - 한입 크기로 잘라먹는 리액트 강의 공부 내용이다강의를 통해 알려주는 것 외에도 헷갈리는게 많아서이것저것 직접 시도해보면서 정리해보았다   1. 함수 선언식 - 함수 자체를 변수에 담을 수 있음    - ( ) 를 열면 함수가 실행되기 때문에 콘솔에 "funcA 실행"이 출력됨   - varA에 변수를 담으면서 funcA( )가 실행되기 때문에 console에 "funcA 실행" 문구가 출력됨- funcA의 반환값이 없기 때문에 varA에는 값이 저장되지 않고 undefined가 출력됨   - 실행 안한 funcA 함수 자체를 varA에 담았고, varA를 호출'( )' 하면서 console에 "funcA 실행" 문구가 출력됨   - ( ) 즉, 실행하지 않으면 어떤것도 콘솔에 출..
JavaScript - 데이터 타입(원시 자료형)
·
개발새발개발/JavaScript
데이터 타입 1. 원시 자료형(Primitive type)  Number, String, Boolean, null, undefined  변수에 값이 직접 저장되는 자료형  변수에 할당될 때 값이 복사됨  변수간에 서로 영향을 미치지 않음  const a = 'bar' console.log(a) // bar a.toUpperCase() console.log(a) // bar let a = 10 let b = a b = 20 console.log(a) // 10 console.log(b) // 20   2. 참조 자료형 (Reference type)    Objects(object,Array,Function)  객체의 주소가 저장되는 자료형(가변, 주소가 복..
JavaScript - Alert Box 만들기2편(EventListener)
·
개발새발개발/JavaScript
지난번에 이어 JavaScript 복습하기!그 중에서 JavaScript 에서 중요한 EventListener 파트에 대해 공부할 예정이다  Alert 2개 만들기 [1] 각각의 함수 만들기- 어려우면 한글로 먼저 따라써보기- p태그를 어떻게 지정해야할지 몰라 헤맸는데, id를 부여해주면 해결되는 문제였다! Alert 박스 닫기 아이디 비밀번호   [2] 파라미터 활용하기- 개인적으로는 글이 길어지면 파라미터도 길어져 가시성은 좀 아쉬움- 상황에 맞게 활용해야 할 듯 Alert 박스 닫기 아이디 비밀번호   [3] addEventListener 사용하기- Ev..
JavaScript - Alert Box 만들기 1편(요소 선택 및 변경, Alert 1개 만들기)
·
개발새발개발/JavaScript
JavaScript는 이미 배워 친숙한 친구이지만최근 Django를 하느라 소홀하게 대한 부분이 있어오랜만에 복습겸 유튜버 코딩애플님의 AlertBox 만들기를 따라해봤다!  난이도는 매우매우 쉬움!그래도 싸피에서 배웠던거랑 다른 부분도 있어서 신기했다 이번글은 코딩애플님이 알려주신 것 + 내 생각을 정리를 적어볼 예정이다시작!   1. HTML 요소 변경하기document.getElementById('???').???='red'- 이 형식을 활용하여 대부분의 HTML 요소를 수정할 수 있음- 다만, 가능한 종류가 많기 때문에 '???' 부분은 구글 검색으로 찾아보면서 해야함- 검색할 때 '$' 표시 있는 건 jQuery 문법으로 javascript와 다른거임  안녕하세요! 올때메로나 ..