JavaScript51 [JavaScript/자바스크립트]함수와 객체 함수란? 내가 고등학교때 가장 무서워하던 단어. 그리고 일련의 과정을 문(statement)로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한것. 함수 내부로 입력을 전달 받는 변수를 매개변수(parameter), 입력을 인수(argument), 출력을 반환값(return value)이라 한다. 함수는 값이며, 여러 개 존재할 수 있으므로 특정 함수를 구별하기 위해 식별자는 함수 이름을 사용할 수 있다. /* 따라서 식별자 네이밍 규칙을 준수해야한다. 중복 불가 공백 사용 불가 대소문자 구분 숫자로 시작할 수 없음 특수문자는 _(Under Score), $(Dollar Sign)만 사용 가능 예약어(키워드) 사용 불가 길이 제한 없음 */ 함수는 함수 정의(function definition)을.. 2023. 1. 1. [JavaScript/자바스크립트]스코프, 렉시컬환경, 실행 컨텍스트 스코프(scope) 매개변수를 참조할 수 있는 유효범위.즉, 스코프는 식별자가 유효한 범위. 렉시컬 환경의 환경 레코드. 매개변수의 스코프가 함수 몸체 내부로 한정되기때문에 함수와 밀접한 관련이 있다. 블럭 외부에서는 블럭 내부의 변수를 참조할 수 없다. 변수의 스코프는 좁을수록 좋다. (전역 변수를 반드시 사용할 이유를 찾지 못한다면 지역 변수를 사용해야 한다. 자바스크립트 엔진은 이름이 같은 두 개의 변수 중에서 어떤 변수를 참조해야 할것인지를 결정하는데, 이를 식별자 결정(identifier resolution)이라 한다. 따라서 스코프를 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있다. 변수는 코드의 가장 바깥 영역뿐 아니라 코드 블록이나 함수 몸체 내에서도선언할 수 있다.. 2023. 1. 1. [JavaScript/자바스크립트]null 병합 연산자 ?? 단축평가와 옵셔널체이닝을 모두 거치니 이 null 병합 연산자는 정말 순한 양처럼 보이는 심플한 녀석이다. ES11에서 도입된 null 병합 (nullish coalescing)연산자 ?? 는 좌항의 피연산자가 null 또는 undefined인 경우 우항를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어가는 옵셔널체이닝 연산자랑 헷갈리지 않기!! null 병합 (nullish coalescing)연산자 가 도입되기 이전에는 논리 연산자 ||를 사용한 단축 평가를 통해 변수에 기본값을 설정했다. 변수가 null또는 undefined인지 확인하는것에 유용한 옵셔널 체이.. 2022. 12. 30. [JavaScript/자바스크립트]옵셔널 체이닝 연산자 ?. ES11에서 도입된 옵셔널 체이닝 (optional chaining)연산자 ?. 는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다. (프로퍼티 참조란 변수를 통해 변수값을 참조하듯이 객체의 프로퍼티에 접근해프로퍼티 값을 참조하는 것을 말한다.) 옵셔널 체이닝 연산자 ?. 가 도입되기 이전에는 논리 연산자 &&를 사용한 단축 평가를 통해 변수가 null 또는 undefined인지 확인했다. var elem =null; // elem이 null또는 undefined이면 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다. var value = elem?.value; //elem && elem.. 2022. 12. 30. [JavaScript/자바스크립트]단축 평가 논리곱(&&) 연산자와 논리합(||) 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다. 이를 단축 평가(short-circuit evaluation)라 한다. 단축 평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다. 단축 평가 표현식 평과결과 true || anything true false || anything anything true && anything anything false && anything false //논리합 연산자 console.log('Cat' || 'Dog'); // => Cat console.log(false || 'Dog'); // => Dog console.log('Cat' || false);.. 2022. 12. 26. [JavaScript/자바스크립트]타입변환 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환(explicit coercion)또는 타입 캐스팅(type casting)이라 한다. 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환되는 것은 암묵적 타입변환(implicit coercion)또는 타입 강제 변환(type coercion)이라 한다. 암묵적 타입 변환이 되면 새로운 타입의 값을 만들어 단 한 번 사용하고 버린다. 암묵적 타입 변환!!!!!! + 연산자를 이용해서 문자열 타입으로 변환 수행 이외에도 불리언타입 null 타입 undefined 타입 symbol타입 객체타입 모두 문자열 타입으로 암묵적 타입 변환이 수행된다. ***Symbol타입은 문자열 변환이 불가능하여 TypeError가 뜬다. - * /산술 연산자를.. 2022. 12. 26. [JavaScript/자바스크립트]반복문 조건식의 평가 결과가 참인 경우 코드 블럭을 실행한다. 그 후 조건식을 다시 평가하여 여전히 참인 경우 코드 블록을 다시 실행한다. for 문 조건식이 거짓일 때 까지 반복된다. for (변수 선언문 또는 할당문; 조건식; 증감식){ 조건식이 참인 경우 반복 실행될 문; } for ( var i = 0; i < 2; i++){ console.log(i); } 응용 // 트리만들기 for (var i =1; i 2022. 12. 25. [JavaScript/자바스크립트]조건문 if...else, switch 조건문은 주어진 조건식의 평가 결과에 따라 블록의 실행을 결정한다. if..else 조건식은 불리언 값으로 평가될 수 있는 표현식이다. if ...else 문 if (조건식){ //조건식이 참이면 이 코드 블록이 실행된다. } else { //조건식이 거짓이면 이 코드 블록이 실행된다. } if (조건식){ //조건식이 참이면 이 코드 블록이 실행된다. } else if (조건식2) { //조건식이 거짓이면 이 코드 블록이 실행된다. } else { //조건식 1과 조건식2가 모두 거짓이면 이 코드 블록이 실행된다. } 응용 let num = 3 ; let kind; if (num > 0){ kind = '양수'; } else { kind = '음수'; } console.log(kind); let num.. 2022. 12. 24. [JavaScript/자바스크립트]NaN, 일치비교연산자, Object.is NaN은 Not a Number으로 숫자가 아닌 값을 의미한다. NaN은 자신과 일치하지 않는 유일한 값이다. 따라서 숫자가 NaN인지 조사하려면 빌트인 함수 Number.isNaN을 사용한다. (왜 숫자라고 했냐면 NaN의 타입은 숫자이기 때문에 // typeof NaN ->출력값은 number 출력값으로 숫자가 나왔을때, 이것이 NaN인지 확인하려면 Number.isNaN을 사용해야한다는 의미. 일치 비교 연산자로 비교하면 false의 값이 나온다. 자신과 일치하지 않는 유일한 값이기 때문에) Number.isNaN(NaN); //true Number.isNaN(10); //false Number.isNaN(1 + undefined); //true 일치 비교(===)연산자는 좌항과 우항의 피연산자가 .. 2022. 12. 23. [JavaScript/자바스크립트]삼항 조건 연산자 조건식의 평가결과에 따라 반환할 값을 결정한다. 조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값 var score = 50; var result = score >= 60 ? 'pass' : 'false'; console.log(result); //출력값 false if..else문 처럼 사용할수 있다. 하지만 수행할 문이 하나가 아니라 여러개라면 if...else문의 가독성이 더 좋다. if...else문은 표현식이 아닌 문이기때문에 값처럼 사용할 수 없는 반면에, 삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문이다. 따라서 삼항 조건 연산자 표현식은 값처럼 다른 표현식의 일부가 될 수 있어서 매우 유용하다. 2022. 12. 23. [JavaScript/자바스크립트] 리터럴과 타입 리터럴이란 사람이 이해할 수 있는 문자 또는 미리 약속된 기호로 표기한 코드. 리터럴은 값으로 평가된다. 따라서 리터럴도 표현식. ** 값으로 평가될 수 있는문은 모두 표현식** 리터럴의 종류는 아래와 같음..엄청 많네 정수 리터럴 부동소수점 리터럴 2진수 리터럴 8진수 리터럴 16진수 리터럴 문자열 리터럴 불리언 리터럴 null 리터럴 undefined 리터럴 객체 리터럴 배열 리터럴 함수 리터럴 정규 표현식 리터럴 템플릿 리터럴(ES6) ES6부터 새로 도입된 문자열 표기법 템플릿 리터럴 작은따옴표(' ') 혹은 큰따옴표(" ")같은 일반적인 따옴표 대신 백틱(` `) 을 사용해서 표현한다. ex) 'Template literal` 원시 타입 : 객체가 아니면서 메서드도 가지지 않는 데이터타입 숫자타.. 2022. 12. 23. [JavaScript/자바스크립트] 값과 변수 데이터 타입은 크게 두 가지로 나눌 수 있다. 단일 데이터(원시,primitive)-------값 number String boolean null undefined symbol 복합데이터(객체,object)-----------객체 object function 단일 데이터와 복합데이터의 차이점은? 값을 할당(대입/저장) 하는 메모리 저장소가 다름. 값 -> Stack 영역 //값이 복사되면 값 자체가 복사되어 전달됨 객체 -> Heap 영역 // 객체타입은 참조값 (메모리주소, 레퍼런스)가 복사되어 전달됨 왜 전달되는 구조가 다를까? let tree = { name : 'tree', color : 'green' } //객체는 중괄호로 묶여서 값을 저장하고 있다 여기서 객체 이름인 tree는 실제 메모리 셀.. 2022. 12. 23. [JavaScript]코드에서 모르는 키워드가 나오면?! 이렇게 빌트인 객체를 사용하거나, 사용하는 방법을 검색하려면 ctrl/cmd 키를 누른채로 클릭한다. 그러면 이런 화면이 뜬다! 이걸 참고하면 처음 사용할 시 훨씬 수월하다!! 2022. 12. 20. [JavaScript/자바스크립트] 친하게 지내야하는 사이트들 https://www.ecma-international.org/ Home - Ecma International Ecma International is an industry association dedicated to the standardization of information and communication systems Ecma is driven by industry members to meet their needs, providing a healthy competitive landscape based on differentiation of products a www.ecma-international.org 자바스크립트 공식사이트 아래 두 사이트는 자바스크립트에 대한 정보가 업뎃이 잘 되는데! 그중에.. 2022. 12. 18. [JavaScript/자바스크립트] JSON의 정의 처음에 JSON이라는 용어를 처음보고 제이슨..? 제이손? 하고 엄청 헷갈렸던 기억이 난다 검색해보니 둘 다 많이 부른다고 하던데 나는 주변분들이 부르는데로 자연스레.. 따라해야지 JavaScript Object Notation 자바스크립트에서 객체를표현하는 표현식으로 시작함 데이터를 표현하는 방법이 단순하고 이해하기 쉬워서 웹 API에서 데이터를 전송할 때 표현식으로 주로 사용됨 JSON을 사용하는 이유 웹 API는 기본적으로 데이터를 문자열로 전송하게 됨 어떤 객체를 웹 API를 통해서 문자열로 전달하기 위해 JSON을사용함 *'앨리스코딩 AI/SW 온라인 실무교육'을 듣고 작성 및 발췌 했습니다. 2022. 10. 18. [JavaScript/자바스크립트] 이벤트의 정의 이벤트(Event) 이벤트 타입 : 발생한 이벤트의 종류 (폼, 키보드, 마우스, HTML DOM, Window 객체 등) 이벤트 핸들러 : 이벤트가 발생했을 때 그 처리를 담당하는 함수 지정된 이벤트가 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 핸들러를 실행 *'앨리스코딩 AI/SW 온라인 실무교육'을 듣고 작성 및 발췌 했습니다. 2022. 10. 7. [JavaScript/자바스크립트] Node 객체 노드(Node) 와 노드 트리 HTML DOM에서 정보를 저장하는 계층적 단위 노드 트리는 노드들의 집합으로, 노드 간의 관계를 나타냄 자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있음 노드 간의 관계 : 노드 트리의 모든 노드는 서로 계층적 관계를 맺고 있음 노드의 종류 문서 노드(document node) : HTML 문서 전체를 나타내는 노드 요소 노드(element node) : 모든 HTML 요소는 요소 노드로, 속성 노드를 가질 수 있는 유일한 노드 주석 노드(comment node) : HTML 문서의 모든 주석은 주석 노드 속성 노드(attribute node) : 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가짐 하지만 .. 2022. 10. 7. [JavaScript/자바스크립트] DOM의 활용 DOM 요소의 선택 DOM 요소의 스타일 변경 DOM 요소의 내용 변경 *'앨리스코딩 AI/SW 온라인 실무교육'을 듣고 작성 및 발췌 했습니다. 2022. 10. 7. [JavaScript/자바스크립트] 프로퍼티와 메서드 자바스크립트에서 사용자를 위해 사전에 작성된 편의 기능 *'앨리스코딩 AI/SW 온라인 실무교육'을 듣고 작성 및 발췌 했습니다. 2022. 10. 3. [JavaScript/자바스크립트] 데이터 타입 함수 생성 : function 키워드를 사용하여 생성 함수 호출 : 함수 안에 있는 코드를 실행시키겠다는 의미 var func1 = function() { console.log(“Func1”); } //함수 생성 func1(); //함수 호출 매개변수: 인자로부터 전달받은 값이 들어가는 통로. 상황에 따라 생략 가능 인자: 함수에게 전달하는 데이터 return: 함수 안에 데이터를 저장할 때 사용 var area = function(width, height) { return width * height; } area(10, 20); undefined : 변수 안에 데이터를 입력하지 않은 상태 (데이터가 없는 것) null : 개발자가 임의로 변수 안에 빈 데이터를 삽입한 상태(빈 데이터를 지정한 것) va.. 2022. 10. 3. [JavaScript/자바스크립트] JS의 기초 이미지 슬라이드 효과, 팝업 효과 등의 기능을 포함한 동적인 웹사이트 제작 시 사용되는 프로그래밍 언어 변수 선언 : 데이터를 담을 공간을 생성하는 것 변수 초기화 : 생성된 변수에 데이터를 전달하는 것 var fruit = “apple”; //변수 선언 fruit = “banana”; //변수 초기화 var fruit = “apple”; //변수 선언 및 초기화 변수 안의 데이터 확인 방법 var fruit = “apple”; console.log(fruit); //apple 출력 console.log();는 변수 안에 데이터를 확인할 때 사용하는 명령어 변수 생성 시 주의 사항 변수명은 숫자로 시작할 수 없음 변수명은 최대한 자세하게 작성 의미가 불명확한 단어들의 조합은 피해야 함 자바스크립트 사용 .. 2022. 10. 3. 이전 1 2 다음
