728x90 반응형 인프런37 훈훈한 Javascript (8) 8. 함수 선언의 종류 변수에 함수를 할당해주는 형식 function을 먼저 적어주고 뒤에 함수의 이름(sum)을 적는다. 표현식과 달리 선언문은 키워드가 동반되지 않고, 호이스팅의 영향을 받는다. 호이스팅: 위로 끌어 올려지는 것. 브라우저가 자바스크립트를 해석하는 과정에서, 선언문으로 작성된 함수는 원래 선언된 위치가 아니라, 위쪽으로 이렇게 끌어올려지게 됨. 표현식은 그렇게 되진 않는다. 선언문으로 작성된 함수는 그래서 함수가 아직 정의되지 않았음에도 불구하고 이미 선언된 것 처럼 표현됨. sum() 실행 가능 코드 작성 스타일에 따라 사용 메소드에서 자주 사용 2023. 9. 1. 훈훈한 Javascript (7) 7. 함수의 리턴 모든 함수는 반환이라는 동작을 수행할 수 있음. 반환 명령어: return 함수 내부에서 건내주는 데이터를 함수 밖에서도 받을 수 있게 된다. 함수가 result 라는 변수 데이터를 return 해 준다면, 함수를 실행해주게 되면, result 데이터를 밖에서도 참조(출력/데이터확인)할 수 있게 된다. 함수를 호출 - result 데이터 확인 가능 console.log 안에 입력해서 바로 확인해볼 수도 있음. returnData 라고 하는 특정한 변수에 함수(sum)를 담아주게 되면, 그 변수(returnData)에 return 된 데이터(20) 이 담기게 된다. return 명령어는 데이터를 반환해주는 것 말고도 함수를 종료시켜준다. sum 이라는 함수를 실행할 때 r.. 2023. 8. 31. 훈훈한 Javascript (6) 1. vscode 세팅 3. JS로 기능 만들기 (함수 선언과 호출) 함수가 실행될 때 10+10이 실행됨 이름이 consoleTool인 함수 생성 도구를 만들어줬을 뿐이기에 아무것도 출력되지 않는다. = 함수명() - 도구(함수)를 만들어도 출력이 안되는 이유 - => 사용하지 않고 있기 때문 (호출, 실행 안됨) 함수의 정의와 실행 4. JS로 기능 만들기 (onclick 이벤트 추가) 버튼과 함수를 연결해주기 생성한 함수를 버튼에 명시 onclick 속성 사용 버튼이 클릭되었을 때, 안쪽에 있는 코드가 실행이 된다. onclick 속성에 우리가 만들었던 함수 이름 적어주면 된다. 근데 함수이름에 호출해야하니까 함수이름() 이렇게 적어줘야 함 5. quer.. 2023. 8. 30. 훈훈한 Javascript (5) 3. 객체 순서가 아닌 각 카테고리 별로 데이터를 관리 해주는 객체 데이터 타입 property: 속성 각 프로퍼티가 갖는 것 = 1개의 key, 1개의 value 객체는 userData 라는 변수에 담아져 활용 객체는 여러개의 property 가짐 각 property 는 키:값을 쌍으로 이루고 있음. (2) 1) Dot notation 2) Bracket notation 1) Dot notation 접근하고싶은 property의 키를 dot (.)과 함께 적어줌 아직 존재하지 않는 키를 추가해줄 수도 있음 해당 키에 할당해주고 싶은 값을 할당연산자(=)를 통해 할당해준다. 2) Bracket notation dot 노테이션과 달리 대괄호를 사용해준다. 대괄호.. 2023. 8. 30. 훈훈한 Javascript (4) 1. 배열 순서가 존재하는 여러개의 데이터를 담아두는 창고 순서대로 데이터 할당 ranking 이라는 변수에 데이터 담기 = rangking 이라는 배열 요소 = 배열에 속해있는 하나하나의 데이터 각 배열의 요소는 index 라는 값을 가짐 인덱스 - 해당 요소의 위치값을 의미하는 요소 배열 = 순서가 존재하는 데이터의 창고 jason 접근 방법 각자의 인덱스 값으로 요소에 접근 배열 출력 예시 length 를 사용하면 배열의 길이 확인가능 length 와 index 의 차이 2. 배열 메소드 자바스크립트에 기본적으로 내장돼있는 메소드 들이다 4등을 ranking 이라는 배열에 추가하고싶을 경우 이런식으로 재할당할 수 없음 푸시 메소드 사용 데이터를 추가하는 메소드 = .push() 데이.. 2023. 8. 29. 훈훈한 Javascript (3) 4. string, number 문자열 공백 또한 텍스트 데이터 (문자열) 문자열은 더하기 연산으로 더해진다. 공백 또한 문자열화 문자열은 더하기 연산만 적용 가능 숫자와 문자열의 차이 주의 문자 타입 데이터와의 차이 문자 타입 데이터와 숫자 타입 데이터의 결합 문자열로 변환이 돼서 반환이 된다. 맨 마지막 결과도 문자열 1로 변환돼서 반환된 것 문자열과 숫자의 곱셈 Nat a Naumber Nan 값 산술연산자로 불리는 것들은 숫자로 변환이 가능한지 판단하고, 숫자로 변환 가능하면 연산진행시켜줌 2023. 8. 29. 훈훈한 Javascript (2) 3. 변수선언 키워드 재할당, 재선언이 가능한 키워드들이 있음 재할당: 데이터가 이미 할당되어있는 변수에 다시 할당을 진행해주는 작업 shift + enter 키를 눌러서 console 창에서 한 줄 내려서 더 작성해준다 5로 재할당 해 준 것 let - 재할당이 가능한 키워드 재선언 정의 같은 것으로 선언해주면 box 는 이미 선언되어있다고 에러가 뜨게 됨. let - 재할당만 가능 const - 상수 변수 변수: 변할 수 있는 값을 의미 상수: 변하지 않는 값을 의미 const - 재할당 불가, 재선언 불가 let 과 달리 선언과 할당이 동시에 이뤄져야 함 선언과 할당이 동시에 이뤄진 모습 재할당 시도해보면 상수라고 하면서 재할당 불가. var 키워드 특징 재선언한 케이스 엔터 눌러도.. 2023. 8. 29. 훈훈한 Javascript (1) 1. 변수란? 자바스크립트: 동적 변수: 상자와 같은 개념 원하는 데이터를 담아둘 수 있는 상자 사전에 변수를 먼저 선언해주고 데이터를 할당해 줌 2. 변수선언과 데이터 할당 var 은 자주 사용하진 않음 let - 변수 선언하겠다는 키워드 변수명이 box 인 변수 할당연산자(=)를 통해서 데이터를 담아주면 된다. 데이터를 담는 것 = 할당 선언해 준 변수 사용하기 위해선 변수 참조를 해 줘야한다. 변수 참조 = 선언해 준 변수를 그대로 입력해주기만 하면 된다. 2023. 8. 28. [그림으로 배우는 자바, part2]: 03 레퍼런스와 스태틱 그림으로 배우는 자바, 파트2: 객체지향! 레퍼런스와 스태틱 참고 사이트: 자바, 입문하기! | CloudStudying 레퍼런스? 스태틱? 생성자: 객체 생성 및 초기화 역할 담당 생성자 또한 메소드이기 때문에 호출과 정의로 나누어짐 레퍼런스: 자바 타입의 큰 범주, 카테고리를 의미 자바에서의 변수의 타입(2): 레퍼런스형 / 기본형 - 레퍼런스형: 객체를 변수에 연결하기 위해 사용 이런식으로 객체를 생성해서 변수(marine)에 연결하고 있는 것 Marine 을 레퍼런스 타입, 또는 클래스 타입이라고 부른다 marine 은 레퍼런스 변수명이 된다 레퍼런스 변수와 일반 기본형 변수와의 차이: 1) 레퍼런스 변수 = 객체를 간접적으로 가리킴 대문자로 시작 2) 기본 변수 = 객체가 아닌 값을 직접 가짐 .. 2023. 2. 27. 이전 1 2 3 4 5 다음 728x90 반응형
